Canvas Doc Block is a wrapper featuring a toolbar that allows you to interact with its content while automatically providing the required Source snippets.
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
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.
|Splits the stories based on the number of defined columns. |
|Displays the stories one above the other. |
|Controls the source code block visibility. |
|Sets the |
Rendering multiple stories
If you want, you can also group multiple stories and render them inside a single
Canvas Doc Block. For example:
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.