> **Version 9** — **React** / **TypeScript** > Also available: - `?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 8 (`/docs/8/api/main-config/main-config-preview-head.md`) # previewHead Parent: [main.js|ts configuration](./main-config.mdx) Type: `(head: string) => string` Programmatically adjust the [preview ``](../../configure/story-rendering.mdx#adding-to-head) of your Storybook. Most often used by [addon authors](../../addons/writing-presets.mdx#ui-configuration). If you don't need to programmatically adjust the preview head, you can add scripts and styles to [`preview-head.html`](../../configure/story-rendering.mdx#adding-to-head) instead. For example, you can conditionally add scripts or styles, depending on the environment: ```ts // .storybook/main.ts // 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; ```