A fake JSON API, served over a real HTTP URL

A fixture file is not an API

Importing a JSON file into a component gets data on the screen, but it skips everything that makes a network call a network call. There is no loading state, because the data is already there. There is no error branch, because an import cannot fail at runtime. There is no race, no abort, no stale response arriving after the user has navigated away.

Those are precisely the paths that break in production. Serving the same JSON over HTTP costs nothing extra and puts every one of them back in play, and the mock API generator is where you define the endpoint that serves it.

Write the body, get the body

Paste any valid JSON object and the endpoint answers with it, unchanged. This matters more than it sounds: many tools round-trip your JSON through a parser before sending it, which reorders integer-like keys and quietly destroys any number past 2^53. An id like 9007199254740993 has to survive, and here it does.

{
  "id": 1,
  "name": "John Doe",
  "email": "john@example.com",
  "orders": [
    { "id": "A-1001", "total": 42.5, "status": "shipped" }
  ]
}

Or let the values move

Placeholder data is uniform in a way real data never is. Every name is the same length, every price ends in .00, every list has three items. UIs built against that data look fine until the first real row arrives and a card overflows.

Turn on AI variants, tick the fields that should change, and the endpoint keeps its shape while those values are regenerated on every call. The keys, the nesting, and the fields you did not tick stay exactly as you wrote them.

// first call
{ "id": 1, "name": "Marguerite Ellsworth", "email": "m.ellsworth@northwind.co" }

// second call, same endpoint
{ "id": 1, "name": "Bo Tran", "email": "bo.tran@lumen.io" }

Dummy JSON data for a full screen, not one row

Most dummy JSON data you find lying around is a single object or a list of three. That is enough to prove a fetch works, and not enough to find out what your table does at row forty. A body here holds up to 50 items in one list and runs to 30,000 characters, which is a screen of results rather than a sample of one.

Size is also how you reach the states nobody tests. Give one endpoint the full list, a second the same shape with an empty array, and a third a single item, and the empty state and the one-result layout stop being things you find out about after release.

What the JSON layer gives you

Precise when you want it, varied when you need it.