> **Version 10.3** โ **React** / **TypeScript**
> Also available:
- `?renderer=angular` for angular, vue, web-components
- `?language=js` for JavaScript
- `?codeOnly=true` for code snippets only
- other versions: Version 9 (`/docs/9/api/main-config/main-config-preview-body.md`), Version 8 (`/docs/8/api/main-config/main-config-preview-body.md`)
# previewBody
Parent: [main.js|ts configuration](./main-config.mdx)
Type: `(body: string) => string`
Programmatically adjust the [preview ``](../../configure/story-rendering.mdx#adding-to-body) 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 body, you can add scripts and styles to [`preview-body.html`](../../configure/story-rendering.mdx#adding-to-body) 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)'],
previewBody: (body) => `
${body}
${
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)'],
previewBody: (body) => `
${body}
${
process.env.ANALYTICS_ID ? '' : ''
}
`,
});
```