Storybook Story Generator
Describe a component and its props and the tool writes a complete CSF3 story file — it infers the right argTypes control for every prop (boolean, select, number, color, text), emits Default + Playground + auto-derived variant stories, and can add autodocs, an a11y panel, and a play() interaction stub. A live preview shows the generated code alongside the exact Storybook controls table your config will produce, for React, Vue, or Svelte.
About this ToolHow it works, benefits & use casesTap to collapse
Most story scaffolders make you hand-write argTypes and remember which control goes with which prop. This one infers them. Describe a component and list its props — name, type, default, and optional description — and the generator produces a complete CSF3 (Component Story Format 3) story file with the correct Storybook control wired up for every prop: boolean props get a toggle, enum/union props become a select with your options, numbers get a number input, and colour-ish names render a colour picker. It does not stop at a single story: you get a typed meta, a Default story, a Playground for tinkering, and variant stories auto-derived from your notable prop states (one per enum option, plus each boolean turned on). Optional extras add tags: ['autodocs'] for an automatic docs page, an addon-a11y panel that runs axe on every story, and a play() interaction-test stub. A live preview shows the generated code alongside the exact Storybook controls table your configuration will produce, and you can target React, Vue, or Svelte. The whole configuration lives in a shareable URL.
How to Use
- 1Start from a component preset (Button, Input, Badge, Card) or type your own component name and import path.
- 2Pick the framework (React, Vue, or Svelte) and the story layout (centered, padded, or fullscreen).
- 3Add props with the prop builder: set each name and type, and either a default value, comma-separated enum options, or mark it as a function (rendered as a Storybook action).
- 4Toggle Story options — TypeScript, Playground, variant stories, autodocs, the a11y panel, and a play() stub.
- 5Watch the controls table and CSF3 code regenerate live, then copy or download the story file with its framework-aware name.
Key Benefits
- Infers the right Storybook control per prop — boolean, select, number, color, or text — no manual argTypes
- Emits multiple story exports: a typed Default, a Playground, and auto-derived variant stories
- Targets current CSF3 syntax for React, Vue, or Svelte
- Optional autodocs, addon-a11y panel, and a play() interaction-test stub
- Live controls/argTypes table preview so you see the Storybook canvas controls before you ship
- Function props are wired as Storybook actions automatically
- Framework- and TypeScript-aware file name (.stories.tsx / .stories.ts / .stories.js)
- Full configuration captured in a shareable URL
Common Use Cases
- Scaffolding a fully documented story for a new component without writing argTypes by hand
- Generating a select/boolean/number control set so designers can tweak props in the Storybook canvas
- Producing consistent Default + Playground + variant stories across an entire component library
- Adding an accessibility (axe) audit and a docs page to existing components by regenerating their stories
- Bootstrapping an interaction test with a ready-made play() stub during a spike
Controls table
6 stories · ReactCSF3 · @storybook/react · TypeScript
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
// a11y: the @storybook/addon-a11y panel audits each story against axe-core.
// Set parameters.a11y.test to 'error' (above) to fail the run on violations.
const meta = {
title: 'Components/Button',
component: Button,
parameters: {
layout: "centered",
a11y: { test: 'error' }, // fail CI on accessibility violations
},
tags: ['autodocs'],
argTypes: {
variant: { control: "select", options: ["primary","secondary","ghost"], description: "Visual style of the button." },
size: { control: "select", options: ["sm","md","lg"], description: "Control size." },
disabled: { control: "boolean", description: "Disables the button." },
label: { control: "text", description: "Button text." },
},
args: {
variant: "primary",
size: "md",
disabled: false,
label: "Click me",
},
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
variant: "primary",
size: "md",
disabled: false,
label: "Click me",
},
};
export const Playground: Story = {
args: {
variant: "primary",
size: "md",
disabled: false,
label: "Click me",
},
};
export const Primary: Story = {
args: {
variant: "primary",
size: "md",
disabled: false,
label: "Click me",
},
};
export const Secondary: Story = {
args: {
variant: "secondary",
size: "md",
disabled: false,
label: "Click me",
},
};
export const Ghost: Story = {
args: {
variant: "ghost",
size: "md",
disabled: false,
label: "Click me",
},
};
export const Disabled: Story = {
args: {
variant: "primary",
size: "md",
disabled: true,
label: "Click me",
},
};
Start from a component
Component
Props
Story options
Typed meta/Story + .tsx/.ts extension
Full-args story for tinkering
One per enum option + boolean states
tags: ['autodocs'] docs page
addon-a11y axe audit per story
Interaction-test scaffold
Controls are inferred, not typed by hand
Every prop maps to the right Storybook control automatically: a boolean prop gets a toggle, an enum becomes a select with your options, a number gets a numeric input, and colour-ish names render a colour picker. Those are exactly the controls a designer sees in the Storybook canvas.
CSF3, the current Storybook format
Component Story Format 3 declares stories as plain objects with an args field — no render boilerplate. The tool emits a typed meta, a Default and Playground, and derives variant stories from your notable prop states so a new component starts documented instead of blank.
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- TypeScript FormatterFormat and beautify TypeScript code
- SVG to React ComponentConvert SVG to a clean TSX/JSX/React Native component — currentColor, prop spread, forwardRef, memo, live preview
- Changelog GeneratorGenerate changelog from Git commit history
- Heroku Procfile GeneratorBuild a Heroku Procfile and matching app.json — process types, env vars, addons, dyno formation — plus a Procfile parser and audit
- Markdown TOC GeneratorGenerate table of contents for Markdown
- Package.json Scripts GeneratorGenerate common npm scripts for different project types and workflows
It infers the control from the prop type. A boolean prop becomes a boolean toggle, an enum/union prop becomes a select populated with the options you list, a number prop gets a numeric control, and a string prop whose name looks colour-related (color, background, fill, accent, and similar) gets a colour picker — everything else is a text control. Function props are treated as Storybook actions rather than controls. The live controls table shows exactly what will appear in the canvas.
Component Story Format 3 is the current Storybook story format. Stories are plain objects with an args field instead of render functions, the meta object is typed against your component, and shared args/argTypes live on the default export. It is less boilerplate than CSF2 and is what modern Storybook (7, 8, and 9) expects, so the generated files drop straight into a current project.