Source

Watch a video tutorial

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

Screenshot of Source block

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:

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Basic: Story = {
  parameters: {
    docs: {
      source: { language: 'tsx' },
    },
  },
};

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.

`excludeDecorators`

Type: boolean

Default: parameters.docs.source.excludeDecorators

Determines if decorators are rendered in the source code snippet.

`format`

Type: boolean | 'dedent' | BuiltInParserName

Default: parameters.docs.source.format or true

Specifies the formatting used on source code. Both true and 'dedent' have the same effect of removing any extraneous indentation. 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.

`transform`

Type: (code: string, storyContext: StoryContext) => string

Default: parameters.docs.source.transform

A function to dynamically transform the source before being rendered, based on the original source and any story context necessary. The returned string is displayed as-is. If both code and transform are specified, transform will be ignored.

`type`

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

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

Specifies how the source code is rendered.

auto: Same as dynamic, if the story's render function accepts args inputs and dynamic is 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.