Storybook allows you to create an interactive pattern library for your code components. You can display these components directly in your zeroheight styleguide and stay in sync with code changes.

Embed your Stories

To embed a story from your Storybook in zeroheight:

1) Create a Storybook block and select Embedded iframe.

2) Paste the Storybook URL to your component into the input field.

For example, given the following Button component from Auth0's React Storybook, you can paste its link directly into the zeroheight Storybook block and it will display like so:

👉 Note: Only the upper right hand side preview from the Story is shown, not the left hand menu sidebar, and not the bottom section with Knobs, Accessibility etc.

If you use the Embed option, the Storybook side navigation will appear.

Show source code / props

You can use the Storybook Info Addon to display additional information below the component - like the source code or the React props. These will then also be displayed in zeroheight.

Here's an example of how your Story could look:

Fixed width display option

You can choose to display your Storybook with a fixed width. When you add a Storybook block, go to settings and toggle on fixed width. You can then adjust the width of your Storybook frame to a fixed width to be displayed in viewer mode.

If you choose the fixed width option then the re-sizing handle in the viewer mode will not be visible.

Hybrid view

You can display both the docs and canvas using the canvas (story) URL. Toggle on the 'Show add-ons'. This will give viewers the option to switch between the canvas and docs view.

FAQs

Can I used the embedded iframe option with Storybook sites that aren't public?

Yes. If your Storybook is behind a VPN, the embeds will only show for users connected to the VPN. This is also true for the native embed option.

If your Storybook is protected by authentication/SSO it may also be possible to embed via the iframe option. More information available here.

If someone makes changes in the Storybook iframe in zeroheight, do those changes push into Storybook?

No.

Will Storybook update itself when we have a new version release in the styleguide?

Yes, Storybook updates itself with new releases. The past release will show the Storybook URL from that time period but not the contents in the iFrame. If you review past releases, the iFrame will display the latest version of Storybook. If you want to have a snapshot of previous versions of Storybook, you will need to change the URL each time you create a release.