| title |
|---|
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.
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.
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.
<CodeSnippets paths={[ 'common/mdx-canvas-doc-block.mdx.mdx', ]} />
| Option | Description |
|---|---|
columns |
Splits the stories based on the number of defined columns. <Canvas columns={2}></Canvas> |
isColumn |
Displays the stories one above the other. <Canvas isColumn></Canvas> |
withSource |
Controls the source code block visibility. Canvas withSource="open"></Canvas> |
withToolbar |
Sets the Canvas toolbar visibility. <Canvas withToolbar></Canvas> |
If you want, you can also group multiple stories and render them inside a single Canvas Doc Block. For example:
<CodeSnippets paths={[ 'react/mdx-canvas-multiple-stories.mdx.mdx', 'angular/mdx-canvas-multiple-stories.mdx.mdx', 'vue/mdx-canvas-multiple-stories.mdx-2.mdx.mdx', 'vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx', 'svelte/mdx-canvas-multiple-stories.mdx.mdx', ]} />
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:
<CodeSnippets paths={[ 'common/my-component-with-story-content.mdx.mdx', ]} />
When rendered, Storybook will automatically generate the code snippet for this inside the Source block beneath the block.