Display Storybook

Brienne Wong
Brienne Wong
  • Updated

This feature is available for all plans. This is not available for legacy plans.

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.

Native embedding your Storybook enables you to handle versioning much easier and display the controls as if they’re part of zeroheight.

Gif showing how to add Storybook in zeroheight

You must integrate your Storybook with zeroheight to display your Storybook stories.

Add story

1) In the toolbar, select Storybook

Storybook function hovered over in the toolbar

2) Click Native embed

Native embed and embedded iframe options for Storybook

3) Click Add Story

Storybook modal

4) Select which story you want to add and click Add

Window to find and select stories to add

5)Your story is now displayed in zeroheight!

👉 Note: The Storybook integration won’t allow you to display the add-ons or docs view.

Story natively displayed in zeroheight

How stories are displayed to viewers

Viewers can play with the controls, but it will not change the story globally.

Storybook display in viewer mode

FAQs

Does my Storybook need to be public?

Yes, it will need to be public, but can be behind a VPN for privacy. Here are our instructions for setting up Storybook.

How do I display the docs view of Storybook?

You can embed the docs view of your Storybook by by selecting the Embedded iframe option in the Storybook block and pasting the URL.

How do I display add-ons from Storybook?

You can embed your Storybook by selecting the Embedded iframe option in the Storybook block and toggle on Show add-ons.

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.

Was this article helpful?