storybook/docs/api/doc-block-source.md

title
Source

The Source block is used to render a snippet of source code directly.

{/* ButtonDocs.mdx */}

import { Meta, Source } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

<Source of={ButtonStories.Primary} />

Source

import { Source } from '@storybook/blocks';

Configuring with props and parameters

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

The following language configurations are equivalent:

<CodeSnippets paths={[ 'common/api-doc-block-source-parameter.js.mdx', 'common/api-doc-block-source-parameter.ts.mdx', 'common/api-doc-block-source-parameter.ts-4-9.mdx', ]} />

{/* ButtonDocs.mdx */}

<Source of={ButtonStories.Basic} language="tsx" />

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.

code

Type: string

Default: parameters.docs.source.code

Provides the source code to be rendered.

{/* ButtonDocs.mdx */}

import { Meta, Source } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

<Source code={`const thisIsCustomSource = true;
if (isSyntaxHighlighted) {
  console.log('syntax highlighting is working');
}`} />

dark

Type: boolean

Default: parameters.docs.source.dark

Determines if the snippet is rendered in dark mode.

💡 Light mode is only supported when the Source block is rendered independently. When rendered as part of a Canvas block—like it is in autodocs—it will always use dark mode.

format

Type: boolean | 'dedent' | BuiltInParserName

Default: parameters.docs.source.format or true

Specifies the formatting used on source code. Supports all valid prettier parser names.

language

Type:

'jsextra' | 'jsx' | 'json' | 'yml' | 'md' | 'bash' | 'css' | 'html' | 'tsx' | 'typescript' | 'graphql'

Default: parameters.docs.source.language or 'jsx'

Specifies the language used for syntax highlighting.

of

Type: Story export

Specifies which story's source is rendered.

type

Type: 'auto' | 'code' | 'dynamic'

Default: parameters.docs.source.type or 'auto'

Specifies how the source code is rendered.

• auto: Same as dynamic, if supported by the framework in use; otherwise same as code
• code: Renders the value of code prop, otherwise renders static story source
• dynamic: Renders the story source with dynamically updated arg values

💡 Note that dynamic snippets will only work if the story uses args and the Story block for that story is rendered along with the Source block.

id (deprecated)

Type: string

Specifies the story id for which to render the source code. Referencing a story this way is no longer supported; use the of prop, instead.

ids (deprecated)

Type: string[]

Specifies the story ids for which to render source code. Multiple stories are no longer supported; to render a single story's source, use the of prop.