How It Works

Overview

FillKit uses a multi-step intelligent process to understand your forms and fill them with realistic data. Everything happens locally in your browser—we never send your HTML, form structure, or field values to our servers.

1. Form Scanning

FillKit scans the DOM to find all forms and form controls on the page. This includes:

• •<form> elements
• •<input>, <textarea>, <select> elements
• •Form controls outside <form> tags (via form attribute)
• •Shadow DOM elements (where accessible)

2. Field Detection

FillKit analyzes each field to understand what type of data it expects. It uses multiple signals:

• 1.
  Explicit Attributes: The data-fillkit-type attribute lets you explicitly tell FillKit what data to use (e.g., <input data-fillkit-type="email" />).
• 2.
  Input Type: HTML input types like type="email", type="tel", type="date" provide strong hints.
• 3.
  Name & ID Patterns: Field names like user-email, billing_address, phoneNumber are analyzed for keywords.
• 4.
  Labels & Placeholders: Associated labels and placeholder text like "Enter your email address" help identify field purpose.

3. Data Generation

Once field types are detected, FillKit generates appropriate data using your chosen provider.

• •Local Provider (Faker.js) - Generates generic random data offline, perfect for quick testing
• Cloud Provider (AI-powered) - Generates domain-specific realistic data for demos and QA

See the Local vs Cloud comparison for a detailed breakdown of each provider's capabilities and use cases.

4. Form Filling

Finally, FillKit populates each field with the generated data, simulating human interaction:

• •Sets input values programmatically
• •Dispatches input and change events to trigger validation
• •Handles checkboxes, radio buttons, and select dropdowns
• •Respects disabled and readonly fields
• •Works with custom input components (React Select, etc.)