You can select stories from your connected Storybook data source or use a URL to embed a single story.
Embed a Storybook
Display interactive components from your Storybook in an interactive playground view.
- Select Storybook from the block menu.
- Select a story from the dropdown list of your connected Storybook, or Embed from URL by pasting a link to story.
- Click Save selection.
- The story will be displayed in an interactive playground view.
- Customize the display using the property panel (see Customization options below).
- You can resize the container vertically by using the resize handle (accessible on hover).
Storybook content can be public, private, or behind a VPN. You must be logged in with Storybook before it will show up in the documentation.
Customization
Display options
Story can be displayed as an interactive Playground that provides a lot of customization options, or as an HTML iframe that renders the view directly from Storybook.
In the property panel, you can customize the following display options:
- Preview height: Determines the height of the story preview.
- Show code: Shows or hides Code tab from preview.
- Footer: Shows or hides footer containing link to open story in Storybook.
- Show properties: Shows or hides Properties tab from preview.
- Properties: Show or hide specific properties from preview.
- Show description: Shows or hides Description column.
- Show defaults: Shows or hides Defaults column.
- Storybook Info Addon: If enabled, then all panels from Storybook will be visible. If disabled, only canvas will be rendered in preview.
- Embed height: Determines the height of the story preview.
- Caption: Add a caption that will be displayed below the block.
Example
Hiding specific properties from preview
You can control which properties appear in your preview in two ways:
- Directly in the block: Simply hover over any property you want to hide and click the Hide property button for immediate control.
- Through block properties: Navigate to the Controls section, open the Properties dropdown, and customize visibility settings to match your documentation needs.
Add a custom Storybook error message
In your Documentation settings, you can add an error message that will be shown to your viewers any time an error occurs in one of your Storybook blocks.
To do so:
- Go to the Storybook & React section of your documentation settings.
- Type your desired error message into the empty field in the Storybook error message section.
- Publish your documentation to apply this change.
