Online Tool Store
· 4 min read
How to Generate a Mock JSON API Response
Heshan Fernando
Co-founder & COO
You’re building a frontend component that needs to render a list of users, or a paginated table, or an object with several typed fields — but the actual backend API isn’t ready yet, or you specifically want to test how your UI handles various data shapes without depending on a live service. The usual workaround is hand-writing sample JSON, which works for a one-off case but gets tedious fast when you need it typed correctly (numbers as numbers, not strings), consistently structured, or wrapped in a specific shape like pagination metadata.
A mock response builder solves the “I need realistic-looking JSON right now, matching this exact field list” problem faster than typing it out by hand every time you need a new shape.
What building a mock API response actually involves
A mock response needs a defined field list (name, type — string, number, boolean, and so on), a chosen output shape (a single object, an array of objects, or a paginated structure with metadata like page number and total count), and realistic-looking fake values for each field rather than placeholder text that doesn’t reflect the field’s actual type. Getting the types right matters specifically because frontend code often behaves differently for a string “42” versus a number 42, and testing against correctly typed mock data catches bugs that generic placeholder text would hide.
The practical use case is almost always the same: define what a response should look like structurally, generate a realistic instance of it, and use that to build or test a frontend, a fixture file, or an API contract discussion — without needing a working backend behind it yet.
Why people get stuck here
- Hand-writing JSON is slow and error-prone. Manually typing out an array of objects with several fields, keeping formatting and types consistent, takes real time and invites syntax errors.
- Backend isn’t ready when frontend work needs to start. Frontend and backend development often happen in parallel, and frontend work shouldn’t be blocked waiting for a live API to exist.
- Pagination and nested shapes are extra work to fake convincingly. A paginated response needs metadata (page, total, per-page count) alongside the actual data array, which is more structure to hand-write than a flat object.
- Placeholder values that don’t reflect real data undermine testing. Generic “test test test” values don’t reveal how a UI handles realistic-looking names, dates, or numeric ranges the way more plausible fake data does.
What a good mock API response builder looks like
Simple field-list input
Defining fields by name and type should be quick — the whole point is generating a realistic response faster than hand-writing one.
Multiple output shapes
Array, single object, and paginated structures cover the range of common API response shapes frontend and testing work actually needs.
Typed, realistic fake values
Values should match their declared type and look plausible (real-looking names, sensible number ranges), not just be a repeated placeholder string.
Common mistakes to avoid
- Hand-writing mock JSON repeatedly for slightly different field combinations instead of generating each variation quickly from a field list.
- Using placeholder values that don’t match the field’s actual type, missing bugs that only appear with correctly typed data.
- Forgetting to include pagination metadata when the real API response will include it, leading to a frontend that doesn’t handle that structure correctly once the real API is connected.
- Treating a mock response as a permanent solution rather than a temporary stand-in for parallel frontend development before the real API is ready.
How to do it with Mock API Response Builder
Online Tool Store’s Mock API Response Builder builds a mock JSON API response — array, object, or paginated — from a simple field list with typed fake values, entirely in your browser.
- Open the Mock API Response Builder tool.
- Define your field list with names and types.
- Choose the output shape — array, single object, or paginated.
- Generate and copy the mock JSON response for use in your frontend or test fixtures.
Frequently asked questions
Can I generate a paginated response, not just a flat array?
Yes, choosing the paginated shape wraps your generated array in the typical pagination structure (page number, total count, per-page size) alongside the data, matching how many real APIs structure list responses.
Will the fake values match the correct data type for each field?
Yes — declaring a field as a number, string, or boolean should produce a value of that actual type in the generated JSON, which matters for frontend code that behaves differently based on type.
Is this meant to replace a real backend permanently?
No — it’s built for temporary use during parallel frontend development or testing, before a real API exists or is accessible, not as a permanent substitute for an actual backend service.
Final thought
Mock data only helps if it’s typed and shaped correctly — a quick field-list-driven generator gets you there faster and more reliably than hand-writing JSON for every new shape you need to test against.