Storybook allows you to build an interactive pattern library for your code components. Then, simply embed the UI patterns in your Frontify brand guidelines through the Storybook smart block.
How to Document Code Components from Storybook in Frontify
To embed a story from Storybook in Frontify:
- Access to your Style Guide
- Switch to the edit mode
- Open the smart block chooser by clicking the plus symbol
- Search for the Storybook block and select it
Once selected, you can paste the Storybook URL into the field, and the code component will appear.
Note that the Storybook menu sidebar will not automatically be shown. You can, however, easily toggle the display to reveal the menu alongside your component through the Storybook Addons.
Preconditions to Display Stories from Storybook
Your story is embedded via iframe. That’s why the X-Frame-Options header has to be unset to allow all domains to embed your stories into Frontify. Learn more about that here.
It’s important to note that anyone viewing your Style Guide needs access to your hosted Storybook website. That’s why you want to ensure the Storybook website is either public or that you only direct internal users to the Style Guide.
Due to browser restrictions, Frontify can only embed content that supports HTTPS, due to the fact that Frontify itself is served over HTTPS. Please confirm that your hosted Storybook website is served via HTTPS and has a proper SSL certificate in place.
If your Storybook website does not currently support HTTPS, however, there are many online resources explaining how to add HTTPS support to your Storybook server. Should you need a free SSL certificate, you can quickly grab one from Let’s Encrypt.
In case of any further questions, don’t hesitate to contact our support team. We’re always happy to help.