· 4 min read
How to Generate Mock JSON Data
Heshan Fernando
Co-founder & COO
Your new table component works with three hand-written records, but you do not know what happens at 50 rows, with long names, missing optional details, or repeated categories. Copying the same object again and changing a few IDs produces valid JSON, yet it does not exercise the interface in a meaningful way.
Mock JSON data is useful when it mirrors the shape of a real payload without containing real customer or production information. A generator can create consistent records quickly. Your job is to choose fields and sample values that expose layout, parsing, and state problems rather than merely filling space.
What useful mock JSON contains
Start from the contract your code expects. If a component reads id, name, status, and metadata.createdAt, generate exactly those keys with the appropriate primitive or nested types. A pretty sample that uses the wrong field names only tests a different application.
Record count should match the question you are asking. Five records are enough to inspect basic rendering. Dozens can reveal pagination, scrolling, and repeated-key problems. Very large performance tests need a deliberate benchmark rather than an arbitrary browser-generated fixture.
Why placeholder data misses bugs
Uniform values produce uniform layouts. Real strings vary in length, arrays can be empty, booleans switch states, and optional fields may be absent or null. A useful first fixture is consistent; a useful second fixture introduces controlled edge cases.
| Field Type | Basic Sample | Edge Case | What It Tests |
|---|---|---|---|
| ID | Unique integer | Large or string ID | Key handling |
| Name | Short phrase | Very long text | Wrapping |
| Status | Known enum | Unexpected value | Fallback UI |
| Array | Two items | Empty list | Empty state |
| Nested object | Complete fields | Missing optional key | Safe access |
Randomness can make failures difficult to reproduce. Save the exact payload that triggered a bug. For automated tests, deterministic fixtures or a fixed seed are usually easier to maintain than freshly random data on every run.
Also include at least one empty-state fixture. It often exercises different component branches than a populated payload and catches assumptions that an array always contains a first item.
What good mock data looks like
It matches the real schema
Keep key spelling, nesting, types, and required-versus-optional behavior aligned with the API contract. Validate the fixture with the same schema tooling used by the application when possible.
It contains no real personal data
Do not paste production records into a mock generator and merely change the names. Build synthetic values from the start so emails, tokens, internal identifiers, and confidential notes never enter screenshots or repositories.
It tests a stated scenario
Name fixture files by purpose: users-empty.json, orders-many.json, or profile-long-text.json. A scenario-focused file explains why its unusual values exist.
If your starting point is tabular data, the guide to converting CSV into JSON covers that related workflow. More developer utilities are available in the free tools directory.
Common mistakes to avoid
- Generating the wrong shape. Matching field names and types matters more than realistic prose.
- Using duplicate IDs. UI keys and database-like logic may behave unpredictably.
- Testing only average values. Long strings, blanks, empty arrays, and nulls reveal different bugs.
- Including production data. Synthetic fixtures should be safe to share and commit.
- Depending on random output in assertions. Preserve a fixed fixture for reproducible tests.
How to do it with Lorem JSON Generator
- Write down the fields, types, and nesting your API or component expects.
- Open the Lorem JSON Generator.
- Choose a record count appropriate for the UI or parsing behavior you are testing.
- Configure the available fields and nested metadata options.
- Generate the payload and inspect several records for type and key consistency.
- Copy or download the JSON using the available browser controls.
- Add deliberate edge cases manually, validate the result, and save a stable fixture when it reproduces useful behavior.
The generated data remains in your browser and does not require an account. Treat it as development material, not as authoritative domain data.
Frequently asked questions
Is mock JSON suitable for production demos?
Yes when it is clearly synthetic, visually appropriate, and free of misleading claims. Review the wording and values rather than exposing raw lorem text in a polished customer-facing demonstration.
How many records should I generate?
Generate enough to exercise the scenario: a few for component states, more for pagination or scrolling. Performance testing should use a measured plan and representative volume.
Should optional fields be null or missing?
Test both if the real contract allows both. They can produce different behavior in JavaScript, validation libraries, serializers, and UI fallback logic.
Final thought
Good mock JSON is deliberately boring in structure and deliberately varied where behavior matters. Match the contract, keep the data synthetic, and save edge-case fixtures that make failures easy to reproduce.