Storybook: Native Embedding vs. Embedding iframe

Brienne Wong
Brienne Wong
  • Updated

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 Displays canvas view
Doesn’t display docs view Displays docs view
Doesn’t display add-ons 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

Was this article helpful?