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 Content Block.
How to Document Code Components from Storybook in Frontify
To embed a story from Storybook in Frontify:
Access to your Guidelines
Switch to the edit mode
Open the Content 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 Guidelines 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 Guidelines.
Due to browser restrictions, Frontify can only embed content that supports HTTPS, because Frontify itself is served over HTTPS. Please confirm that your hosted Storybook website is served via HTTPS and has a proper SSL certificate.
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.