Storybook: Native Embedding vs. Embedding iframe
Brienne Wong
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 via zeroheight toolbar and Storybook modal | Add stories 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 will be displayed as zeroheight content. | The component and controls will be displayed in an iframe. |
| Displays canvas view and docs view | Displays canvas view and docs view |
| Displays code | Doesn’t display code |
| Displays controls add-on, other add-ons not currently supported | Displays add-ons |
| Sidebar menus do not appear | Sidebar menus appear |
| Supports Storybook instance being restricted to a VPN | Supports Storybook instance being restricted to a VPN |