How to generate mock API data for testing

The designs are signed off, the sprint has started, and the endpoint you need is still “coming Thursday”. You can wait, or you can fake the response and keep building.

Why mock data helps

Frontend work often starts before the backend API exists. Mock data lets you build components, check layouts and demo features in the meantime, so the frontend and backend teams stop waiting on each other.

It's also useful for unit and integration tests, documentation examples, seeding databases and demo environments. Data with the right shape also catches more bugs than placeholder values like "test" and 123: a 40-character surname will find the one card that doesn’t wrap text, long before a customer does.

Start with a schema

A schema describes each record: its field names and the type of each field. The generator follows it to produce as many records as you need. Written down, it also documents the shape both sides of the API agree on.

[
  { "name": "id", "type": "uuid" },
  { "name": "name", "type": "string" },
  { "name": "email", "type": "email" },
  { "name": "age", "type": "number" },
  { "name": "createdAt", "type": "date" },
  { "name": "isActive", "type": "boolean" }
]

Common field types

Most generators offer some mix of these:

• Strings: random text, or realistic values such as first names, company names, addresses and lorem ipsum.
• Numbers: integers or decimals, often within a range, for prices, ages, quantities and scores.
• Booleans: true or false.
• Formatted values: emails, UUIDs, URLs, dates, phone numbers and IP addresses. These pass format validation, so your forms and parsers accept them.
• Enums: one value from a fixed list, such as admin, editor or viewer.

Wrap records in a response envelope

Real APIs rarely return a bare array. They usually wrap the records in an object with a status, a count or pagination details:

{
  "status": "success",
  "data": [
    {
      "id": "550e8400-e29b-41d4-a716-446655440000",
      "name": "Priya Raman",
      "email": "priya.raman@example.com",
      "createdAt": "2026-01-15T09:30:00Z",
      "isActive": true
    }
  ],
  "pagination": { "page": 1, "perPage": 10, "total": 247, "totalPages": 25 }
}

If your mock has the same envelope as the real API, the code that reads it doesn't change when you switch to live data.

Who uses mock data

Frontend developers build UI before the API exists. QA engineers create fixtures with specific patterns. Technical writers need realistic examples for docs. Teams seed staging environments for demos and load tests.

Synthetic data also avoids privacy problems. Anonymized production data can still leak personal information if a field is missed; generated data has the same structure and contains nobody’s details.

Using the mock API generator

1. Open the mock API generator. Start from a preset (Users, Products or Events) or build your own list of fields.
2. For each field, enter a name and pick a type. Use Add field for more rows and the remove button to drop one.
3. Set Records to between 1 and 100, and leave Wrap in API response ticked if you want an envelope.
4. Select Generate, then Copy the JSON.

The generator has seven field types:

With the wrapper turned on, the output looks like this:

{
  "status": 200,
  "total": 2,
  "data": [
    { "id": "3f2b8c1e-9d4a-4e7b-a1c2-6b5d8e9f0a12", "name": "kqzmwtra", "email": "hjwqpe@xkrtu.com" },
    { "id": "a9e1d7c4-2b3f-4c8a-9e6d-1f0b2c3d4e5f", "name": "plsnvbex", "email": "omzrta@bqwle.com" }
  ]
}

Everything is generated in your browser. The values have the right type and format, but strings are random letters rather than real names.

Generating realistic values in code

When you need real-looking names, enums or numeric ranges, or more than 100 records, generate the data in a script. With Faker (npm install @faker-js/faker):

import { faker } from "@faker-js/faker";

function makeUser() {
  const firstName = faker.person.firstName();
  const lastName = faker.person.lastName();
  return {
    id: faker.string.uuid(),
    firstName,
    lastName,
    email: faker.internet.email({ firstName, lastName }),
    age: faker.number.int({ min: 18, max: 85 }),
    role: faker.helpers.arrayElement(["admin", "editor", "viewer"]),
    createdAt: faker.date.past().toISOString(),
    isActive: faker.datatype.boolean(),
  };
}

const users = faker.helpers.multiple(makeUser, { count: 250 });
console.log(JSON.stringify({ status: "success", data: users }, null, 2));