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.

Add story

1) In the toolbar, select Storybook

2) Click Native embed

3) Click Add Story

4) Select which story you want to add and click 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.

How stories are displayed to viewers

Viewers can play with the controls, but it won’t save or change the component for anyone else viewing the documentation.

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.

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.