Source
Watch a video tutorial
The Source
block is used to render a snippet of source code directly.
Source
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:
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.
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:
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.