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


Storybook's Canvas Doc Block is a wrapper featuring a toolbar that allows you to interact with its content while automatically providing the required Source snippets.

Docs block with a story preview

Working with the DocsPage

Storybook's DocsPage wraps each story inside a Canvas Doc Block. The first story rendered in the DocsPage is automatically configured with a toolbar and set as primary. All other existing stories will not feature the toolbar. It also includes a Source Doc Block to visualize the story code snippet.

Working with MDX

The Canvas Doc Block includes additional customization options if you're writing MDX stories. Below is a condensed example and table featuring all the available options.

columnsSplits the stories based on the number of defined columns.
<Canvas columns={2}></Canvas>
isColumnDisplays the stories one above the other.
<Canvas isColumn></Canvas>
withSourceControls the source code block visibility.
Canvas withSource="open"></Canvas>
withToolbarSets the Canvas toolbar visibility.
<Canvas withToolbar></Canvas>

Rendering multiple stories

If you want, you can also group multiple stories and render them inside a single Canvas Doc Block. For example:

Non-story content

Additionally, you can also place non-story related content inside Canvas Doc Block allowing you to render the JSX content precisely as it would if you placed it inside an MDX file, for example:

When rendered, Storybook will automatically generate the code snippet for this inside the Source block beneath the block.

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,616 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI