Generate Realistic JSON Mock Data for UI Prototyping

Paste the generated array directly as the prototype's data. The seed keeps it identical across reloads and across reviewers.

// Generated: count 30, seed 42
const data = [
  { id: 1, name: 'Grace Davis', status: 'pending', score: 25, address: { city: 'North Haverbrook' } },
  { id: 2, name: 'Frank Wilson', status: 'suspended', score: 6.2, address: { city: 'Springfield' } },
  // ...28 more, all deterministic
];

export default function App() {
  return <UserList items={data} />;
}

Generate enough records to fill the frame, then let a data-populating plugin bind one record per instance so every card shows distinct content.

Step 1 — generate count 12, seed 42 here; Copy the array.
Step 2 — in Figma, open a Data Populator-style plugin, paste the JSON.
Step 3 — bind layers: title→name, subtitle→email, badge→status.
         Each card instance gets a different record from the array.
Result: a 12-card grid with varied real-feeling content for review.

The generator's names are short-to-medium. To prove the title cell handles overflow, override one record's name with a long string.

import data from './data.json'; // count 20, seed 42

const withOverflow = data.map((r, i) =>
  i === 0 ? { ...r, name: 'Anastasia Konstantinopolitanopoulos-Wright' } : r
);
// Render withOverflow to confirm the title truncates or wraps gracefully.

There is no price field and no price-range control. Map the existing 0–100 score onto a price after generating, scaling as needed.

import data from './data.json'; // count 24, seed 42

const products = data.map(r => ({
  id: r.id,
  title: r.name,            // reuse as product name
  price: Math.round(r.score * 50) / 1, // 0–100 → $0–$5000-ish
  inStock: r.active
}));
// Now you have a varied price spread for grid-alignment testing.

The generator's minimum is 1 record, so it cannot produce an empty list. Pass an empty array yourself to prototype the empty state.

// Populated state: generated array.
// Empty state — author by hand:
const data = [];
// <UserList items={data} />  → renders the empty-state UI

There is no per-field range control and no category preset. Values come from fixed pools (score 0–100, age 18–77, four status values, no price field). Generate the base data and remap or rescale fields in the prototype — e.g. derive a price from score.

The generator emits the fixed person shape and ignores any schema. Map its fields onto your component, or rename/trim with json-key-renamer and json-key-filter to reach your component's data shape.

Generated names come from a small pool and are short-to-medium length, so the natural data may never overflow a title cell. Override one record's name with a deliberately long string to prove the overflow handling.

The record has no image field. For avatars in a prototype, derive a placeholder URL from name or id (DiceBear, picsum) after pasting, or bind an image layer to a static asset in Figma.

The generator's minimum count is 1; it cannot emit []. Pass an empty array yourself for the empty-state prototype. Use the generator for the populated states.

With only a few records you may not see status or score variety. Generate 8+ records so status cycles all four values and scores spread across the range, which is what makes the grid look real in review.

A different seed produces different (still deterministic) data. Keep one seed per screen and commit the JSON so review screenshots stay consistent. Change the seed only when you intend to refresh the content.

Free caps at 500 records. A table prototype usually needs only enough rows to show scrolling and a couple of pages; for genuinely large datasets, Pro raises the cap to 10,000.

Names come from a 100-combination pool, so large grids repeat names. For a prototype this is usually fine; if a screenshot needs all-unique names, keep the count under ~100 or swap specific names by hand.