You're viewing older docs for version 6.5. View latest docs


Stories (component tests) are Storybook's fundamental building blocks. In Storybook Docs, stories are rendered in the Story block.

Docs blocks with stories

Working with the DocsPage

With each story you write, Storybook will automatically generate a new Story Doc Block, wrapped inside a Canvas(with a toolbar if it's the first "primary" story) alongside a source code preview underneath it. Below is a condensed table of the available configuration options.

inlineStoriesConfigures Storybook to render stories inline.
docs: { inlineStories: false }
Read the documentation for inline rendering framework support.

Working with MDX

With MDX, the Story block is not only a way of rendering stories, but how you define them. Internally, Storybook looks for named Story instances located at the top of your document, or inside a Canvas. Below is an abridged example and table featuring all the available options.

argsProvide the required component inputs (e.g., props).
<Story args={{ text: 'Button' }}/>
Read the documentation to learn more.
decoratorsProvide additional markup or mock a data provider to allow proper story rendering.
<Story decorators={[(Story) => ( <div style={{ margin: '3em' }}><Story/></div>)]}/>
Read the documentation to learn more.
idStorybook's internal story identifier. Used for embedding Storybook stories inside Docs.
<Story id="example-mycomponent--starter"/>
Read the documentation to learn more.
inlineEnables Storybook's inline renderer.
<Story inline={false}/>
Read the documentation to learn more.
loaders(Experimental) Asynchronous function for data fetching with stories.
<Story loaders={[async () => ({ data: await (await fetch('your-endpoint'))}) ]}/>
Read the documentation to learn more.
nameAdds a name to the component story.
<Story name="Example"/> .
parametersProvides the necessary static named metadata related to the story.
Story parameters={{ backgrounds: { values: [{ name:'red', value:'#f00' }] } }} />
Read the documentation to learn more.
playGenerate component interactions.
<Story play={async () => { await'button')) }}/>
Read the documentation to learn more.

Inline rendering

All stories are rendered in the Preview iframe for isolated development in Storybook's Canvas. With Docs, if your framework supports inline rendering, it will be used by default for both performance and convenience. However, you can force this feature by providing the required configuration option (see tables above).

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Join the community
6,615 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI