Preview documentation with --docs flag
To preview documentation during development, use the --docs flag with the storybook dev command. This can be set up as a script in package.json like: storybook dev --docs
Storybook · Writing and testing · all subjects
documentation/preview
33 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Documentation mode flattened display
In documentation mode, stories are displayed in a flattened display mode with a different set of icons to focus on the documentation itself, rather than the interactive story interface.
Documentation mode toolbar hidden
In documentation mode, Storybook's toolbar will not be displayed.
Documentation mode primary story display
In documentation mode, the top level item refers to the primary story for your component.
Code panel replacement for Storysource addon
Code Panel is a replacement for the Storysource addon, which was discontinued in Storybook 9.
Code panel renders source code with args values
The Code panel renders a story's source code when viewing that story in the canvas. Any args defined in the story are replaced with their values in the output.
Enable Code panel with parameters.docs.codePanel
To enable the Code panel, set parameters.docs.codePanel to true. For most projects, this is best done in the .storybook/preview.* file to apply to all stories. You can also enable it at the component or story level.
Code panel customization uses Source configuration
Code panel renders the same snippet as the Source docs block, which is also used in Autodocs pages. The snippet is customizable and reuses the Source configuration parameters.
Description block
The Description block displays the description for a component, story, or meta obtained from their respective JSDoc comments.
IconGallery block
The IconGallery block lets you quickly document all icons associated with your project, displayed in a neat grid.
Markdown block
The Markdown block allows you to import and include plain markdown in your MDX files.
Meta block
The Meta block is used to attach a custom MDX docs page alongside a component's list of stories. It doesn't render any content but serves two purposes in an MDX file: to attach the MDX file to a component and its stories, or to control the location of the unattached docs entry in the sidebar.
Primary block
The Primary block displays the primary (first defined in the stories file) story in a Story block. It is typically rendered immediately under the title in a docs entry.
Source block
The Source block is used to render a snippet of source code directly. It accepts parameters in the namespace parameters.docs.source.
Stories block
The Stories block renders the full collection of stories in a stories file.
Story block and story annotations
The Story block allows you to render any story from your CSF files in the context of an MDX file. All annotations (parameters, args, loaders, decorators, play function) are applied when using the Story block.
Subtitle block
The Subtitle block can serve as a secondary heading for your docs entry.
TableOfContents block
The TableOfContents block renders a table of contents for the current documentation page, allowing users to quickly navigate between sections. It appears as a fixed sidebar on the right side of the page. It accepts parameters in the namespace parameters.docs.toc.
Title block
The Title block serves as the primary heading for your docs entry. It is typically used to provide the component or page name.
Typeset block
The Typeset block helps document the fonts used throughout your project.
Unstyled block
The Unstyled block is a unique block that disables Storybook's default styling in MDX docs wherever it is added. By default, most elements like h1 and p in docs have default styles applied. The Unstyled block removes these default styles from its wrapped content.
Stories block expands to Canvas blocks
The Stories block expands to multiple Canvas blocks. Each Canvas contains a story name description, a Description block, a Story block, and a Source block. Customizing the Source block via parameters will affect the Source blocks rendered as part of Canvas blocks.
Doc blocks are designed for MDX files
Storybook's Doc Blocks are primarily designed for MDX files, not for use inside stories. Attempting to use doc blocks like ColorPalette inside a story will result in an error message when the story loads in Storybook.
useOf hook for custom doc blocks
Storybook provides a useOf hook to make it easier to create custom blocks that function like the built-in blocks.
Default automatic docs page template
The default automatic docs page template includes the following blocks in order: Title, Subtitle, Description, Primary, Controls, and Stories. This template can be overridden to create custom documentation pages.
MDX doc blocks import statement
To use doc blocks in MDX, import them from '@storybook/addon-docs/blocks': import { Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks'.
Doc blocks overview and two usage patterns
Storybook offers several doc blocks to help document components and other aspects of a project. Doc blocks can be used in two common ways: within MDX documentation files and as part of the automatic docs page template.
Doc blocks customization via parameters
Many doc blocks can be customized via parameters. Parameters can be defined at the component (meta) level or the story level. For example, you can filter out the 'style' prop from all Controls tables through your Storybook configuration using parameters.docs.controls namespace.
Doc blocks customization via props in MDX
When using a doc block in MDX, it can also be customized with its props. For example, you can use <Controls exclude={['style']}> to exclude the style prop from the Controls block.
ArgTypes block
The ArgTypes block shows a static table of arg types for a given component as a way to document its interface. It accepts parameters in the namespace parameters.docs.argTypes.
Canvas block
The Canvas block is a wrapper around a Story block, featuring a toolbar that allows you to interact with its content while automatically providing the required Source code snippets. It accepts parameters in the namespace parameters.docs.canvas.
ColorPalette block
The ColorPalette block allows you to document all color-related items, such as swatches, used throughout your project.
Controls block
The Controls block shows a dynamic table of args for a given story as a way to document its interface and allow you to change the args for a separately rendered story via Story or Canvas blocks. It accepts parameters in the namespace parameters.docs.controls.