English for Storybook Developers

Storybook has become a standard tool for developing and documenting UI components in isolation, and it comes with a vocabulary that is easy to mix up. Terms like “story”, “args”, and “decorators” have specific technical meanings in the Storybook context that differ from everyday English usage. Whether you are presenting components to a designer, reviewing a colleague’s story file, or writing component documentation, using these terms accurately signals that you understand the tool and the workflow.

Key Vocabulary

Story A single named example of a component rendered with a specific set of props and state. A component typically has multiple stories — one for each meaningful variant. The word is both countable (“write a story”) and used as a collective noun (“update the stories for this button”). Example: “I added a Disabled story to show how the button looks when user interaction is blocked.”

Args The Storybook term for the props (or arguments) passed to a component in a story. Args can be controlled interactively in the Storybook UI, making it easy to explore component states without editing code. Example: “I set the variant arg to 'destructive' in the story so reviewers can see the red warning style.”

ArgTypes Metadata that tells Storybook how to render controls for each arg — what type it is, what values it accepts, and how the control widget should look. ArgTypes are usually inferred automatically from TypeScript types. Example: “I added an argType for size with options ['sm', 'md', 'lg'] so the controls panel shows a dropdown.”

Decorator A wrapper applied around a story or an entire component to provide context it needs — for example, a theme provider, a router context, or a Redux store. Decorators can be applied at the story, component, or global level. Example: “I added a decorator to wrap all stories in the ThemeProvider so the component receives the correct design tokens.”

Addon A plugin that extends Storybook’s functionality. Common addons include Controls (for interactive args), Actions (for logging events), Accessibility (for a11y checks), and Viewport (for responsive testing). Example: “The Accessibility addon flagged a missing aria-label on the icon button — I’ll fix it before the PR is merged.”

Controls The interactive panel in Storybook’s UI that lets you change arg values in real time and see the component re-render. Powered by the Controls addon, which is built in to Storybook 6 and later. Example: “Use the Controls panel to toggle the isLoading arg and check how the skeleton placeholder looks.”

Canvas The main preview area in Storybook where the component renders. When you select a story, the Canvas shows the component in isolation, free from the surrounding application layout. Example: “The modal looks correct in the Canvas but clips the footer — I think it is missing a min-height in the story’s decorator.”

Autodocs A Storybook feature that automatically generates a documentation page for a component from its stories, ArgTypes, and JSDoc comments. Enabled with the autodocs tag on a component’s default export. Example: “We enabled autodocs for all components in the design system, so the docs page is always in sync with the stories.”

Common Phrases

In code reviews:

• “This story is missing an args object — the component is rendering with all props undefined. Can you add a Default story with sensible defaults?”
• “The decorator here is duplicated in every story file in this folder. Move it to .storybook/preview.ts so it applies globally.”
• “ArgTypes for the onClick prop should use the action addon so reviewers can see click events logged in the Actions panel.”

In standups:

• “I’m adding stories for all the form components this sprint so the design team can review states without needing a local dev environment.”
• “The Accessibility addon is now failing on three components — I’m working through the violations before we enable the accessibility check in CI.”
• “Autodocs is generating the documentation page automatically from our TypeScript types, so we no longer need to maintain a separate docs file.”

In documentation:

• “Each story exports a named object that merges with the default args defined in the component’s default export.”
• “Decorators defined in preview.ts apply to every story in the project; decorators defined in a story file apply only to stories in that file.”
• “The Canvas URL is stable per story — you can share a link directly to a specific component state with your design team.”

Phrases to Avoid

Saying “the component’s page” instead of “the Canvas” — In Storybook, the area where a component renders is called the Canvas. “Page” is ambiguous and might be confused with Storybook’s Docs page. Use “Canvas” for the live preview and “Docs page” or “autodocs” for the documentation view.

Saying “parameters” when you mean “args” — Storybook has both args (the component inputs) and parameters (story-level configuration that controls addons and Storybook behaviour). They are different. If you want to change what the component renders, you change args. If you want to change how an addon behaves for that story, you change parameters.

Saying “props” exclusively — Using “props” is fine in a React context, but in Storybook discussions, the preferred term is “args” because stories are framework-agnostic. In a team that uses both React and Vue, saying “args” is always unambiguous; saying “props” may confuse Vue developers.

Quick Reference

Term	How to use it
story	”Write a story for every meaningful visual state of the component.”
args	”Set the args in the story to match the most common production usage.”
decorator	”Wrap stories in a decorator to provide the router or theme context.”
addon	”The Accessibility addon runs axe-core checks on every story.”
autodocs	”Enable autodocs with the autodocs tag on the default export.”