Source

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

import { Meta, Source } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
<Source of={ButtonStories.Primary} />

Source

import { Source } from '@storybook/addon-docs/blocks';

// 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' },
    },
  },
};

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

code

Type: string

Default: parameters.docs.source.code

Provides the source code to be rendered.

import { Meta, Source } from '@storybook/addon-docs/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.

excludeDecorators

Type: boolean

Default: parameters.docs.source.excludeDecorators

Determines if decorators are rendered in the source code snippet.

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 | Promise<string>

Default: parameters.docs.source.transform

An async 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.

// .storybook/preview.js|ts|jsx|tsx
export default {
  parameters: {
    docs: {
      source: {
        transform: async (source) => {
          const prettier = await import('prettier/standalone');
          const prettierPluginBabel = await import('prettier/plugins/babel');
          const prettierPluginEstree = await import('prettier/plugins/estree');
 
          return prettier.format(source, {
            parser: 'babel',
            plugins: [prettierPluginBabel, prettierPluginEstree],
          });
        },
      },
    },
  },
};

This example shows how to use Prettier to format all source code snippets in your documentation. The transform function is applied globally through the preview configuration, ensuring consistent code formatting across all stories.

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