New
I18n with StorybookAutomate with Chromatic
Star74,173

Canvas

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.

OptionDescription
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.

โœ๏ธ Edit on GitHub โ€“ PRs welcome!
Join the community
5,784 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI