Skip to content
Back to blog

From Manual Fixtures to a Browser Data Mocker

3 min read
From Manual Fixtures to a Browser Data Mocker

In development, some tasks can't be fully automated — but they can be reduced to two clicks. Test data preparation is one of them.

From manual fixtures to Faker.js

For a long time, the only way to get test data was to write it by hand. Ten JSON objects with made-up names, addresses, and phones — a chore you can't delegate but can automate.

In 2012, Marak Squires released Faker.js — a library that generates realistic data: names, addresses, phone numbers, emails, text, and more. It quickly became the de facto standard, with ports appearing for PHP (FakerPHP), Python (Faker), Ruby (Faker), and others.

The idea is simple: instead of making up "John Doe, [email protected], +1-555-0100" by hand, you tell the generator "give me 50 users with name, email, and phone" — and get a ready-made array.

Faker.js also has one of the more dramatic backstories in the npm ecosystem. In January 2022, frustrated that companies were using his free labor without paying for it, Squires deliberately pushed a corrupted release of faker.js (along with his other popular package, colors.js) that broke thousands of dependent projects — including tools built on AWS's CDK. npm reverted the malicious versions, but Squires' own package was effectively abandoned afterward. The community forked the last clean version as @faker-js/faker, which is the actively maintained project used today; the original faker package on npm is now deprecated.

Data Mocker: a schema builder in the browser

Faker.js is powerful, but for a one-off task, installing a library and writing a script is overkill. Data Mocker solves the same problem without setup:

18 field types

TypeWhat it generates
Primary KeyAuto-incrementing IDs (1, 2, 3…) with configurable start value
NameRandom full names (first + last)
EmailRealistic email addresses from random name + domain
UUIDUnique identifiers (v4)
PhonePhone numbers
Avatar URLProfile picture placeholder URLs
ISO DateRandom dates within the past 2 years
PriceRandom decimal prices (0–1000)
NumberIntegers with configurable digit count (e.g. 3 for 100–999, 1-4 for 1–9999)
BooleanRandom true/false
Text / LoremLorem ipsum text — configurable paragraphs (3p) or character range (100-500)
CityRandom city names from a pool of 40 cities
CountryRandom country names from a pool of 40 countries
CompanyRandom company names (Acme Corp, Stark Industries, etc.)
URLRandom URLs with scheme, domain, and path
IPv4Random IP addresses
EnumRandom pick from your own comma-separated values (e.g. active, inactive, pending)
CustomLiteral text you type yourself

Schema management

  • Auto-save — your current schema is saved to localStorage on every change. Reload the page and it's still there.
  • Save / Load — save named schemas to reuse later. Click Save, type a name, done. Load picks from your saved schemas.
  • Update — saving with an existing name overwrites it. The button text changes to "Update" automatically.
  • Reset — one click restores the default schema.
  • Export / Import — download your schema as a JSON file, or import a schema from a file. Share schemas with your team.

Output

  • Set row count from 1 to 200 using the stepper control
  • Switch between JSON and CSV output
  • Copy to clipboard or download as a file
  • Live preview updates as you edit the schema

Quick start: open the tool → click "Add field" a few times → pick types (Name, Email, UUID) → set 10 rows → copy the JSON — ready test data for your component.

Frequently asked questions

Why do I need a test data generator?

When developing a frontend or testing an API, you need realistic data — users, orders, products. Typing it by hand is tedious. A mock data generator creates a set of records from a schema in seconds.

What is Faker.js?

Faker.js is a library for generating fake data, created by Marak Squires in 2012. It can generate names, addresses, phones, emails, text, and more in dozens of languages. The original package is no longer maintained — in January 2022, Squires deliberately sabotaged his own faker.js in protest, and the community fork @faker-js/faker is now the actively maintained, most widely used version in the JavaScript ecosystem.

Does Data Mocker send my data to a server?

No. Data Mocker runs entirely in the browser. All data is generated locally, nothing is sent to any server.

How is Data Mocker different from Faker.js?

Faker.js is a Node.js library you need to install and import. Data Mocker is a ready-to-use web page: open it, configure the schema, copy the JSON or CSV. No installation required, perfect for one-off data generation.

Can I save and reuse schemas?

Yes. Data Mocker auto-saves your current schema to localStorage. You can also save named schemas, load them later, reset to defaults, or export/import schemas as JSON files.

Related Articles