Quick Start

Get FillKit running in your application in under 5 minutes.

Development/Testing Environments Only

FillKit is designed exclusively for development, staging, and test environments—never for production. Always verify your environment before initializing.

Install FillKit

npm install @fillkit/core

Note: You can also use yarn, pnpm, or load via CDN. See the Installation Guide for all options.

Initialize FillKit

Import FillKit and create a new instance with environment checking. FillKit automatically injects two widgets: the main form-filling widget and a shortcuts/settings panel.

main.js or app.js

import { FillKit } from '@fillkit/core';

// IMPORTANT: Only initialize in non-production environments
const isDev = import.meta.env.DEV;
const isStaging = location.hostname.includes('staging');
const isTest = location.hostname.includes('test');

if (isDev || isStaging || isTest) {
  const fk = new FillKit({
    mode: 'valid',  // Generate valid data
    locale: 'en',   // English locale
    ui: {
      enabled: true,              // Auto-inject widgets (default: true)
      position: 'bottom.center',  // Main widget position
      theme: {
        primary: '#6366f1',       // Customize colors (optional)
        appearance: 'system'      // 'light', 'dark', or 'system'
      }
    }
  });

  console.log('FillKit initialized! Widgets are now visible.');
}

That's it! FillKit automatically injects a draggable widget at the bottom of your page. No manual controls needed.

Use the Auto-Injected Widget

Once initialized, FillKit displays a draggable widget at the bottom of your page. Use it to fill forms with one click or use keyboard shortcuts.

Main Widget Controls

•Fill All: Click the "Fill All Forms" button or press Ctrl+Shift+K
•Fill Current: Press Alt+K to fill only the focused form
•Clear All: Press Ctrl+Shift+L to clear all filled data
•Toggle Widget: Press Alt+H to hide/show the widget

Press Ctrl+/ or click the shortcuts button in the widget to see all available keyboard shortcuts.

See the SDK documentation for the complete list of shortcuts and customization options.

Advanced: You can also use the programmatic API (fk.autofillAll(), fk.autofillCurrent(), etc.) for custom integrations. See the SDK docs for details.

Complete Example

Here's a complete working example with environment checking and event listening:

main.js

import { FillKit } from '@fillkit/core';

// Only initialize in non-production environments
const isDev = import.meta.env.DEV;
const isStaging = location.hostname.includes('staging');
const isTest = location.hostname.includes('test');

if (isDev || isStaging || isTest) {
  const fk = new FillKit({
    mode: 'valid',
    locale: 'en',
    ui: {
      enabled: true,              // Auto-inject widgets
      position: 'bottom.center',  // Main widget position
      theme: {
        appearance: 'system'      // Match system theme
      }
    }
  });

  // Optional: Listen for fill events
  fk.on('afterFill', (data) => {
    console.log(`✓ Filled ${data.fieldsCount} fields!`);
  });

  // Optional: Listen for errors
  fk.on('error', (error) => {
    console.error('FillKit error:', error);
  });

  console.log('FillKit ready! Use the widget or press Ctrl+Shift+K');
}

Installation

SDK Reference