Version:
Framework:

Story rendering

In Storybook, your stories render in a particular β€œpreview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a webpack config, but you also may want to directly control the rendered HTML to help your stories render correctly.

Adding to <head>

If you need to add extra elements to the head of the preview iframe, for instance, to load static stylesheets, font files, or similar, you can create a file called .storybook/preview-head.html and add tags like this:

Storybook will inject these tags into the preview iframe where your components render, not the Storybook application UI.

It's also possible to modify the preview head HTML programmatically using a preset defined in the main.js file. For more information see Preview/Manager templates.

Adding to <body>

Sometimes, you may need to add different tags to the <body>. Helpful for adding some custom content roots.

You can accomplish this by creating a file called preview-body.html inside your .storybook directory and adding tags like this:

If using relative sizing in your project (like rem or em), you may update the base font-size by adding a style tag to preview-body.html:

Storybook will inject these tags into the preview iframe where your components render, not the Storybook application UI.

Similarly to the preview head HTML, preview body HTML can also be updated programmatically using a preset. See Preview/Manager templates for more information.

Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify