Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic


Watch a video tutorial on the Storybook channel

The Canvas block is a wrapper around a Story, featuring a toolbar that allows you to interact with its content while automatically providing the required Source snippets.

Screenshot of Canvas block

When using the Canvas block in MDX, it references a story with the of prop:

💡 In previous versions of Storybook it was possible to pass in arbitrary components as children to Canvas. That is deprecated and the Canvas block now only supports a single story.


Configuring with props and parameters

ℹ️ Like most blocks, the Canvas block is configured with props in MDX. Many of those props derive their default value from a corresponding parameter in the block's namespace,

The following sourceState configurations are equivalent:

The example above applied the parameter at the story level, but it could also be applied at the component (or meta) level or project level.




Provides any additional custom actions to show in the bottom right corner. These are simple buttons that do anything you specify in the onClick function.


Type: string


Provides HTML class(es) to the preview element, for custom styling.


Type: 'padded' | 'centered' | 'fullscreen'

Default: parameters.layout or or 'padded'

Specifies how the canvas should layout the story.

  • padded: Add padding to the story
  • centered: Center the story within the canvas
  • fullscreen: Show the story as-is, without padding

In addition to the property or the layout prop, the Canvas block will respect the parameters.layout value that defines how a story is laid out in the regular story view.


Type: CSF file exports

Specifies the CSF file to which the story is associated.

You can render a story from a CSF file that you haven’t attached to the MDX file (via Meta) by using the meta prop. Pass the full set of exports from the CSF file (not the default export!).


Type: Story export

Specifies which story's source is displayed.


Type: SourceProps['code'] | SourceProps['format'] | SourceProps['language'] | SourceProps['type']

Specifies props passed to the inner Source block. See SourceProps.

💡 The dark prop is ignored, as the Source block is always rendered in dark mode when shown as part of a Canvas block.


Type: 'hidden' | 'shown' | 'none'

Default: or 'hidden'

Specifies the initial state of the source panel.

  • hidden: the source panel is hidden by default
  • shown: the source panel is shown by default
  • none: the source panel is not available and the button to show it is not rendered


Type: StoryProps['inline'] | StoryProps['height'] | StoryProps['autoplay']

Specifies props passed to the inner Story block. See StoryProps.


Type: boolean


Determines whether to render a toolbar containing tools to interact with the story.


(⛔️ Deprecated)

Type: React.ReactNode

Expects only Story children. Reference the story with the of prop instead.


(⛔️ Deprecated)

Type: number

Splits the stories based on the number of defined columns. Multiple stories are not supported.


(⛔️ Deprecated)

Type: boolean

Displays the stories one above the other. Multiple stories are not supported.


(⛔️ Deprecated)

Type: string

Provides source to display. Use source.code instead.


(⛔️ Deprecated)

Type: 'open' | 'closed' | 'none'

Controls the source code block visibility. Use sourceState instead.


(⛔️ Deprecated)

Type: boolean

Sets the Canvas toolbar visibility. Use story.withToolbar instead.

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,326 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI