Storybook enables you to build, test, and document your UI components.
There are two methods of integrating Storybook with zeroheight. Here are the main differences between each method.
The ‘native embed’ is designed to give a more native feel with easier resizing controls, a more intuitive interface for selecting stories in zeroheight and better handling of Storybook versions.
The ‘embedded iframe’ method embeds a single URL at a time and brings the entire contents of the page into zeroheight.
| Native embed | Embedded iframe |
|---|---|
| Connects to zeroheight by adding a Storybook URL in the Styelguide settings once | Connects to zeroheight by pasting the Storybook URL in each embed block |
| Add stories to the styleguide in bulk via zeroheight toolbar and Storybook modal | Add stories one by one via zeroheight toolbar and pasting story URL in the iframe |
| Update Storybook in zeroheight by updating the Storybook URL in the Styleguide settings | Update Storybook in zeroheight by pasting updated Storybook URLs in each iframe |
| The component will be displayed in an iframe and the controls (if Controls Addon is available) will be displayed as zeroheight content. | The component and controls will be displayed in an iframe. |
| Displays canvas view and docs view (if Docs Addon is available) | Displays canvas view and docs view (if Docs Addon is available) |
| Displays code | Doesn't display code |
| Displays Controls and Docs Addons (if available), other Addons not currently supported | Displays any Addon |
| Sidebar menus do not appear | Sidebar menus appear |
| Supports Storybook instance being restricted to a VPN | Supports Storybook instance being restricted to a VPN |
| Does not support embedding content from Storybooks protected by authentication/SSO. | May be possible to embed content from Storybooks protected by authentication/SSO. More information here. |
| Can automatically create a new styleguide from a Storybook site with a page per component and each story embedded. More information here | Not possible to automatically create a new styleguide from a Storybook site |
| For Storybook sites using the Themes Storybook Addon, editors can select which theme is used by the embed and can optionally allow viewers to switch between the themes for an embed. | For Storybook sites using the Themes Storybook Addon editors can select which theme is used by the embed (by using the theme specific URL) but viewers cannot switch between themes. |