Storybook Source Doc Block#

The Source block renders a syntax-highlighted code snippet in MDX-based documentation. Source code resolution follows a two-stage pipeline: a renderer-specific sourceDecorator captures the rendered output at story-render time and emits it to a shared context; the Source React component then reads that snippet and applies any overrides before display.

Code Selection (useCode)#

The useCode hook in Source.tsx selects what to display using this priority order:

1. parameters.docs.source.code — always wins if set 1
2. Dynamic snippet from SourceContext — used when type === 'dynamic', or when type === 'auto' and the story uses args 2
3. parameters.docs.source.originalSource — static source injected by the CSF loader 3

The SourceProps type exposes of, type, transform, code, language, dark, and format. excludeDecorators is not listed, not consumed, and not forwarded by the component.

Renderer sourceDecorator Logic#

Whether decorators are stripped is determined inside each renderer's decorator, which reads parameters.docs.source.excludeDecorators from the story context — not from any JSX prop passed to <Source>.

• HTML — sourceDecorator.ts: when excludeDecorators is truthy, calls context.originalStoryFn(context.args, context) instead of the decorated story result 4. Otherwise, passes through the decorated output.
• Web Components — identical pattern to HTML: checks context.parameters.docs.source.excludeDecorators and swaps to context.originalStoryFn.
• React (jsxDecorator.tsx) — always calls context.originalStoryFn to produce JSX source; effectively decorator-free by design, no excludeDecorators check.
• Svelte — always calls context.originalStoryFn to generate Svelte template source; also effectively decorator-free by design.
• Vue 3 — generates source from ctx.args and __docgenInfo without referencing the decorated render result; no excludeDecorators check.

The emitted snippet travels via emitTransformCode into SourceContext, which is then consumed by the Source block.

The excludeDecorators Documentation Gap#

The official docs list excludeDecorators as a <Source> block prop (type: boolean, default: parameters.docs.source.excludeDecorators). In practice, SourceProps never declares, reads, or forwards this prop — passing <Source of={MyStory} excludeDecorators={true} /> is silently ignored. 5 6

This is a confirmed documentation/implementation discrepancy as of Storybook 10.x. 5

Correct Usage: Story-Level Parameter#

Because excludeDecorators is only read by renderer decorators from the story's parameters, it must be set at the story level:

// Button.stories.ts
export const PrimaryWithoutDecorators = {
  ...Primary,
  parameters: {
    docs: {
      source: {
        excludeDecorators: true,
      },
    },
  },
};

Reference both exports in MDX to get both variants: 5

<Source of={ButtonStories.Primary} /> {/* with decorators */}
<Source of={ButtonStories.PrimaryWithoutDecorators} /> {/* without decorators */}

Because excludeDecorators is story-scoped, two <Source> blocks pointing at the same story cannot independently toggle it. Use a second story export (as above), or use explicit code/transform props on one block. 5

Key Files#