> **Version 10.4 (beta)** โ **React** / **TypeScript**
> Also available:
- `?renderer=angular` for angular, vue, web-components
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: Version 10.3 (latest) (`/docs/api/main-config/main-config-preview-head.md`), Version 9 (`/docs/9/api/main-config/main-config-preview-head.md`), Version 8 (`/docs/8/api/main-config/main-config-preview-head.md`)
# previewHead
Parent: [main.js|ts configuration](https://storybook.js.org/docs/10.4/api/main-config/main-config.md)
Type: `(head: string) => string`
Programmatically adjust the [preview ``](https://storybook.js.org/docs/10.4/configure/story-rendering.md#adding-to-head) of your Storybook. Most often used by [addon authors](https://storybook.js.org/docs/10.4/addons/writing-presets.md#ui-configuration).
If you don't need to programmatically adjust the preview head, you can add scripts and styles to [`preview-head.html`](https://storybook.js.org/docs/10.4/configure/story-rendering.md#adding-to-head) instead.
For example, you can conditionally add scripts or styles, depending on the environment:
```ts
// .storybook/main.ts โ CSF 3
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
previewHead: (head) => `
${head}
${
process.env.ANALYTICS_ID ? '' : ''
}
`,
};
export default config;
```
```ts
// .storybook/main.ts โ CSF Next ๐งช
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
export default defineMain({
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
previewHead: (head) => `
${head}
${
process.env.ANALYTICS_ID ? '' : ''
}
`,
});
```