mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-09 00:19:13 +08:00
84 lines
3.5 KiB
Plaintext
84 lines
3.5 KiB
Plaintext
---
|
|
title: 'Story rendering'
|
|
sidebar:
|
|
order: 5
|
|
title: Story rendering
|
|
---
|
|
|
|
In Storybook, your stories render in a particular “preview” iframe (also called the Canvas) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [builder](../builders/index.mdx) config, but you also may want to run some code for every story or directly control the rendered HTML to help your stories render correctly.
|
|
|
|
## Running code for every story
|
|
|
|
Code executed in the preview file (`.storybook/preview.js|ts`) runs for every story in your Storybook. This is useful for setting up global styles, initializing libraries, or anything else required to render your components.
|
|
|
|
<If notRenderer={['angular', 'vue']}>
|
|
Here's an example of how you might use the preview file to initialize a library that must run before your components render:
|
|
|
|
```ts title=".storybook/preview.ts"
|
|
// Replace your-renderer with the renderer you are using (e.g., react, vue3)
|
|
import { Preview } from '@storybook/your-renderer';
|
|
|
|
import { initialize } from '../lib/your-library';
|
|
|
|
initialize();
|
|
|
|
const preview: Preview = {
|
|
// ...
|
|
};
|
|
|
|
export default preview;
|
|
```
|
|
</If>
|
|
|
|
<If renderer={['angular', 'vue']}>
|
|
For example, with Vue, you can extend Storybook's application and register your library (e.g., [Fontawesome](https://github.com/FortAwesome/vue-fontawesome)). Or with Angular, add the package ([localize](https://angular.io/api/localize)) into your `polyfills.ts` and import it:
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-preview-with-library-decorator.md" />
|
|
|
|
{/* prettier-ignore-end */}
|
|
</If>
|
|
|
|
## 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`](./index.mdx#configure-story-rendering) and add tags like this:
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-preview-head-example.md" />
|
|
|
|
{/* prettier-ignore-end */}
|
|
|
|
<Callout variant="info">
|
|
Storybook will inject these tags into the *preview iframe* where your components render, not the Storybook application UI.
|
|
</Callout>
|
|
|
|
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](../addons/writing-presets.mdx#ui-configuration) 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:
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-preview-body-example.md" />
|
|
|
|
{/* prettier-ignore-end */}
|
|
|
|
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`:
|
|
|
|
{/* prettier-ignore-start */}
|
|
|
|
<CodeSnippets path="storybook-preview-body-font-size.md" />
|
|
|
|
{/* prettier-ignore-end */}
|
|
|
|
<Callout variant="info">
|
|
Storybook will inject these tags into the *preview iframe* where your components render, not the Storybook application UI.
|
|
</Callout>
|
|
|
|
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](../addons/writing-presets.mdx#ui-configuration).
|