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.

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.

ExampleStory.stories.mdx

import { Canvas, Meta } from '@storybook/addon-docs';
 
import { ExampleComponent} from './ExampleComponent';
 
export const Template = (args) => (
  {/* 
  *  Your template implementation goes here.
  * Read more about Storybook templates at:
  * https://storybook.js.org/docs/6/get-started/whats-a-story
  */}
);
 
<Meta title="SampleComponent" component={ ExampleComponent } />
 
<Canvas columns={2}  withSource="open" withToolbar>
  {/* Your stories go here */}
</Canvas>

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>`

Rendering multiple stories

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

Badge.stories.mdx

import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
import { Badge } from './Badge';
 
<Meta title="MDX/Badge" component={Badge} />
 
export const Template = (args) => <Badge {...args } />;
 
<Canvas>
  <Story 
    name="warning"
    args={{
      status: 'warning', 
      label: 'Warning',
    }}>
    {Template.bind({})}
  </Story>
  <Story 
    name="neutral"
    args={{
      status: 'neutral', 
      label: 'Neutral',
    }}>
    {Template.bind({})}
  </Story>
  <Story 
    name="error"
    args={{
      status: 'error', 
      label: 'Error',
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

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:

MyComponent.stories.mdx

import { Canvas } from '@storybook/addon-docs';
 
import { MyComponent } from './MyComponent';
 
<Canvas>
  <h2>Some here</h2>
  <MyComponent />
</Canvas>

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