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.
However, it's also possible to modify the preview head HTML programmatically using a preset defined in the main.js
file. Read the presets documentation for more information.
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.
Just like how you have the ability to customize the preview head
HTML tag, you can also follow the same steps to customize the preview body
with a preset. To obtain more information on how to do this, refer to the presets documentation.