GhostFill replaces test123 with realistic, domain-specific data. One click. Any form. The whole team.
$ npm install ghostfill -D
Works with React, Vue, Angular, vanilla JS — devs install, everyone benefits
It's not just developers. Everyone who touches a form with fake data in front of someone else feels the pain.
"Let me walk you through the new CRM flow..." and there's "John Doe" at "[email protected]" working at "Company Inc" on every single record. The client notices.
QA fills every form with "aaa", "123", and "asdf". Edge cases? What edge cases? The data doesn't exercise real validation paths because nothing looks like real input.
Designer screenshots the form for a deck. Every field says "test". Now they're manually typing realistic data into 40 fields. Again. For the third time this sprint.
Every team has this story. Right there on the screen, in front of the client: "Cheeseburger" in the company name field.
Set your domain preset, select any form, click fill. Every field gets data that fits your industry.
Click the ghost icon, select this form, and fill it. This is the real GhostFill library running on the page.
Different tool, different problem. GhostFill works in the browser, on the page, for anyone on the team.
| GhostFill | faker.js | Browser Autofill | |
|---|---|---|---|
| Who uses it | Anyone on the team | Developers only | Individual user |
| How it works | Visual in-page UI | Code library | Browser feature |
| Data quality | Domain-aware, contextual | Random but typed | Your personal data |
| Form detection | Labels, selects, custom dropdowns | N/A — you call it in code | Standard inputs only |
| Domain presets | D365, Healthcare, E-commerce... | Generic schemas | N/A |
| Setup | One import, zero config | Write generation scripts | Already there |
Install the package and add one line to your entry file. That's it.
// Install // npm install ghostfill -D import 'ghostfill'; // That's it. The ghost icon appears in dev mode. // Click it to start filling forms.
// Install // npm install ghostfill -D // In your _app.tsx or layout.tsx: import 'ghostfill'; // Or conditionally in development only: if (process.env.NODE_ENV === 'development') { require('ghostfill'); }
// Install // npm install ghostfill -D // In your main.ts or main.js: import 'ghostfill'; // GhostFill auto-detects Vue's reactivity // and triggers proper change events.