You're viewing older docs for version 6.5. View latest docs


Storybook's Source Doc Block displays the story's source code. It supports syntax highlighting for most languages (e.g., javascript, jsx, json, yml, md, bash, css, html) and can be copied with the click of a button.

Docs blocks with source

Working with the DocsPage

Storybook automatically generates a Source Doc Block within the Canvas to display the story's code snippet. It includes additional customization via parameters. Below is a condensed example and tables featuring all the available options.

💡 The pattern demonstrated here applies only to the story. If you need, you can apply this to all the component stories, introducing a component parameter.

codeCustomizes the code snippet to be displayed.
docs: { source: { code: '<h1>Hello world</h1>' } }.
Requires language for proper syntax highlighting.
darkSets the background to dark mode.
<Source dark/>
Applies only to MDX.
idSupplies a unique story identifier.
<Source id="example-mycomponent--starter" />
Applies only to MDX.
languageSets the language for syntax highlighting.
docs: { source: { language: 'html'} }
formatFormats the code snippet.
docs: { source: { format:false } }
typeSets how the story source snippet is auto-generated. See table below for available values.
auto (default)Use dynamic snippets if the story is written using Args and the framework supports it.
docs: { source: { type: 'auto' } }
dynamicDynamically generated code snippet based on the output of the story function (e.g, JSX code for React).
docs: { source: { type: 'dynamic' } }
codeUse the raw story source as written in the story file.
docs: { source: { type: 'code' } }

Working with MDX

If you need, you can also include the Source Doc Block in your MDX stories. It accepts either a story ID or a code snippet. For example:

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,616 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI