How to generate realistic json mock data for storybook stories
- Step 1Identify the component's prop data shape — Review the component's TypeScript prop interface or PropTypes definition. This is the schema for generating the mock data.
- Step 2Generate mock data for the default story — Use the component's prop shape to generate a single realistic record for the Default story's args. Generate 5-10 records for list-component stories.
- Step 3Paste into Storybook story args — In the story file: export const Default: Story = { args: { user: generatedUserData, orders: generatedOrderList } }. The generated data appears as the story's rendered output.
- Step 4Create edge case stories with modified data — Use the generated data as a base and modify fields for edge-case stories: a story with a very long name (to test overflow), a story with null optional fields (to test conditional rendering), a story with empty arrays (to test empty state UI).
Frequently asked questions
How do I generate a realistic avatar URL for Storybook stories?+
For placeholder avatar images, use the DiceBear API: https://api.dicebear.com/7.x/avataaars/svg?seed={name}. Or use picsum.photos: https://picsum.photos/seed/{userId}/100/100 for a consistent photo per user. Paste these URL patterns into the mock generator's URL field configuration.
Should I use MSW (Mock Service Worker) or static JSON for Storybook data?+
Use static JSON args for components that accept data directly as props. Use MSW for components that make fetch calls internally — MSW intercepts the requests and returns mock responses without requiring code changes to the component.
Is the component data transmitted to JAD Apps?+
No. Mock generation runs entirely in your browser. Component schemas and story data are never transmitted to JAD Apps servers.
Privacy first
Conversion runs locally in your browser. No file is uploaded — only metadata counters are saved for signed-in dashboard stats.