Generate Realistic JSON Mock Data for Storybook Stories

Count 1, seed 42 gives one convincing record. Map the fields you need onto the component's props.

// Generated: count 1, seed 42
const user = {
  id: "ab732cc0-86ce-45f2-ad8f-78e93ffbe1ce",
  name: "Grace Davis",
  email: "grace.davis@mock.dev",
  status: "active",
  score: 47.1,
  address: { city: "Ogdenville" }
};

export const Default: Story = { args: { user } };

Because status cycles across active, inactive, pending, suspended, a grid of ~10 records naturally shows all chip variants in one story.

// Generated: count 10, seed 42 → import as users[]
import users from './users.json';

export const Grid: Story = {
  args: { users },
  // The grid renders 10 cards; status chips show all four states
  // without you authoring each variant by hand.
};

The seed makes Chromatic snapshots deterministic. Reuse one seed per story; never regenerate with a new seed unless you intend the snapshot to change.

// users.json was generated at seed 42 — committed alongside the story.
// Chromatic diff stays empty on rebuild because data never changes.
//
// To intentionally refresh content (and accept new snapshots):
//   regenerate at a NEW seed, commit, then approve the Chromatic diff.

Start from a generated record and override a single field to force the edge case. The generator supplies the realistic base; you author the extreme.

import users from './users.json';

export const LongName: Story = {
  args: {
    user: {
      ...users[0],
      name: 'Maximiliana Featherstonehaugh-Wellington III'
    }
  }
};

If your component expects fullName and joinedAt, generate the records and rename keys with json-key-renamer before pasting into the story.

Step 1 — generate count 8, seed 42 here.
Step 2 — json-key-renamer: name → fullName, createdAt → joinedAt

Result per record:
{ "id": "...", "fullName": "Grace Davis", "joinedAt": "2024-01-17", ... }

The generator does not read TypeScript prop types or PropTypes. It emits the fixed person shape and you map fields onto your props. For mismatched names, run the output through json-key-renamer; to drop unused fields, json-key-filter.

With only 1–3 records you may not hit all four status values. To guarantee every chip color appears, generate ~10+ records (status cycles through active/inactive/pending/suspended) or override the field per record for a deliberate variant matrix.

If you regenerated at a different seed, the data changed, so the snapshot legitimately differs. Keep one seed per story and commit the generated JSON. Only change the seed when you intend to refresh the story's content.

The generator's minimum is 1 record — it cannot emit an empty array. For an empty-state story, pass [] yourself: args: { users: [] }. Use the generator for the populated states.

The record has no image field — there is no avatar URL in the output. Add one in the story by deriving from name or id, e.g. a DiceBear or picsum URL keyed on user.id, after pasting the generated data.

The id mode shifts the random stream, so flipping Sequential IDs alters names, ages, and statuses at the same seed. Decide the id style first, then lock the seed for the story.

Output is always 2-space indented. That is fine inside a story file; your formatter (Prettier) will reflow it. If you specifically want minified JSON, pass it through json-minifier first.

Free caps at 500 records. A pagination story usually needs only enough rows to show two or three pages; if you genuinely need 1,000+, Pro raises the cap to 10,000.