You can display your Storybook seamlessly in your styleguide. You have two ways of embedding Storybook into your styleguide: native embedding or embedding iframes. We recommend natively embedding your Storybook.

Connect Storybook

To connect your Storybook account to zeroheight for the Native embed block, you simply need to paste in the URL from any of your Storybook stories. So long as your Storybook account is configured correctly, this will connect your entire Storybook instance with zeroheight and make all stories available to zeroheight.

Click here for more details on connecting Storybook.

If you use versioning in Storybook, you can edit the base URL of your Storybook instance in your styleguide settings. As long as the story structure and story name remain the same across versions, all stories in your zeroheight documentation will update — so you don't need to update every individual block when something changes in Storybook.

Add story

1) From the inserter menu, select Storybook then choose Native embed.

Or, on a blank page, select Start with Storybook components

2) Select which stories you want to add

3) Select how you'd like the stories to appear using the Settings tab

The available settings are below and as you interact with them, the preview on the right hand side will update to reflect your choices.

• Include story name - when toggled on, the name of the story (or the name of the page if you're adding docs pages) will be added to the page above the native embed
• Story name style - if you're including story name you can choose whether you want it styled as a big, medium or small heading
• Fixed width - when toggled on, editors will be able to resize the width of each embed and this will be fixed for viewers. When toggled off, viewers will be able to resize the width of the embed.
• Show code - when toggled on, the code for the component (from Storybook) is shown below the story (only available for embeds from a Storybook site using the docs Storybook Addon)
• Show docs - only available on Storybook sites running version 6 or 7. When toggled on, the Docs view for the component is shown in zeroheight
• Storybook controls
  • No controls - if Show code is toggled on, only the code displays below the story. If Show code is toggle off, nothing displays below the story
  • Controls - component properties table is shown below the story. If Show code is toggle on, viewers can choose to view the code or the properties
  • Docs view - component properties table is shown below the story with additional columns. If Show code is toggle on, viewers can choose to view the code or the properties
• Show theme switcher - when toggled on, viewers will be able to switch the theme being used by the embedded story (only available for embeds from a Storybook site using the themes Storybook Addon)

4)Your stories are now displayed in zeroheight!

How stories are displayed to viewers

The Settings described above all affect how stories appear to viewers and all of the settings (except Include story name) can also be managed for individual blocks.

There is also one setting that can only be managed for individual blocks - Theme. This setting is only available for embeds from a Storybook site using the themes Storybook Addon and determines the Theme used by the embed when viewers first load the page. If the embed also has Show theme switcher toggled on - users will be able to view the embed using other Themes.

Viewers can interact with the component and modify the controls (if Controls or Docs view is selected for the Storybook controls setting) but these changes won't be saved/affect other viewers.

If your story has controls and code, they are accessible via the tab bar and editors can change what is visible for each story.

FAQs

Does my Storybook need to be public?

Yes, it will need to be public in order to be added via the native embed, but can be behind a VPN for privacy. Here are our instructions for setting up Storybook.

If the Storybook is protected by authentication/SSO you may be able to use the iframe embed. More information here.

How do I display the docs view of Storybook?

For Storybook sites running on v6 and v7, you can enable the docs view via the Docs view option for Storybook controls presentation.

For Storybook sites running on v8 you can select the Docs page when choosing which story to embed.

How do I display Addons from Storybook?

If you want to show code and/or Docs, ensure the Docs Addon for Storybook is enabled and toggle the Show code option on and/or choose Docs view from the Storybook controls presentation options

If you want to show Controls, ensure the Controls Addon for Storybook is enabled and choose Controls from the Storybook controls presentation options.

For other Addons, you can embed your Storybook by selecting the Embedded iframe option in the Storybook block and toggle on Show Addons.

If I'm already using Storybook in zeroheight, how do I move from the embedded iframe to the native embed?

You will need to manually go to each Storybook block and add the new block underneath.

What's the difference between native embedding Storybook and embedding an iframe of Storybook?

You can read more about the differences here.

How does native embedding of Storybook work with different versions and releases?

Individual stories in zeroheight will always reflect the base URL in your Styleguide settings.

So, if your Storybook instance is updated and the URL remains the same, the stories in zeroheight will also update.

If you use Storybook versioning and release a new version, you will need to update the base URL in your styleguide settings for all your stories in zeroheight to update.

If you're using the releases feature in zeroheight, previous releases will show whatever is shown by the base Storybook URL from your styleguide settings from that time period. If you want to have a snapshot of previous versions of Storybook, you should use versioning in Storybook and change the base URL in your styleguide settings each time you create a release.

Can I display stories from multiple Storybook accounts?

Yes, you can add stories from multiple Storybook accounts. Follow the instructions on connecting your Storybook. You can add a story from each Storybook instance from the modal.