Storybook lets developers and designers build, test, and document UI components. With the Storybook content block, you can display interactive stories directly in your Frontify guidelines, bringing your component documentation and live UI examples together.
Embed a story from Storybook
Open your guideline in edit mode.
Open the block chooser and search for Storybook, or find it under UI and code.
Select the Storybook content block.
Paste the URL of your hosted Storybook story into the URL field.
The interactive component appears in your guideline.
Note: The Storybook navigation sidebar is hidden by default. You can control the visibility of the sidebar and add-on panels using supported Storybook URL parameters.
Preconditions and technical requirements
Storybook stories are embedded in Frontify using an iframe. Your hosted Storybook instance must meet the following requirements:
HTTPS and SSL certificate
Your Storybook instance must use HTTPS with a valid SSL certificate. HTTP URLs cannot be embedded in Frontify guidelines because of browser security restrictions.
If you need an SSL certificate, free options are available from providers such as Let’s Encrypt.
Frame embedding permissions
Your Storybook server must allow Frontify to embed its content. Check the following security settings:
X-Frame-Options: The
X-Frame-OptionsHTTP response header on your Storybook server must not be set toDENYorSAMEORIGIN. It must allow embedding. See MDN’s X-Frame-Options reference for more information.Content Security Policy (CSP): If your server uses CSP, ensure the
frame-ancestorsdirective permits embedding from your Frontify domain (for example,frame-ancestors 'self' https://*.frontify.com).
This example allows embedding from the same origin and Frontify subdomains. Your server configuration may need to be adjusted for your specific Frontify domain.
Network and authentication access
Anyone viewing the embedded component must also be able to access your hosted Storybook instance.
If Storybook is behind a corporate firewall, VPN, or private network, viewers outside that network may not be able to load the component.
Make sure your Storybook instance is accessible to your intended audience, or limit access to the guidelines to users who can reach the Storybook server.