> **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-features.md`), Version 9 (`/docs/9/api/main-config/main-config-features.md`), Version 8 (`/docs/8/api/main-config/main-config-features.md`)

# features

Parent: [main.js|ts configuration](https://storybook.js.org/docs/10.4/api/main-config/main-config.md)

Type:

```ts
{
  actions?: boolean;
  argTypeTargetsV7?: boolean;
  backgrounds?: boolean;
  changeDetection?: boolean;
  componentsManifest?: boolean;
  controls?: boolean;
  developmentModeForBuild?: boolean;
  experimentalCodeExamples?: boolean;
  experimentalTestSyntax?: boolean;
  highlight?: boolean;
  interactions?: boolean;
  legacyDecoratorFileOrder?: boolean;
  measure?: boolean;
  outline?: boolean;
  sidebarOnboardingChecklist?: boolean;
  toolbars?: boolean;
  viewport?: boolean;
}
```

```ts
{
  actions?: boolean;
  argTypeTargetsV7?: boolean;
  backgrounds?: boolean;
  changeDetection?: boolean;
  controls?: boolean;
  developmentModeForBuild?: boolean;
  highlight?: boolean;
  interactions?: boolean;
  legacyDecoratorFileOrder?: boolean;
  measure?: boolean;
  outline?: boolean;
  sidebarOnboardingChecklist?: boolean;
  toolbars?: boolean;
  viewport?: boolean;
}
```

Enables Storybook's additional features.

## `actions`

Type: `boolean`

Default: `true`

Enable the [Actions](https://storybook.js.org/docs/10.4/essentials/actions.md) feature.

## `argTypeTargetsV7`

(⚠️ **Experimental**)

Type: `boolean`

Default: `true`

Filter args with a "target" on the type from the render function.

```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)'],
  features: {
    argTypeTargetsV7: true,
  },
};

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)'],
  features: {
    argTypeTargetsV7: true,
  },
});
```

## `backgrounds`

Type: `boolean`

Default: `true`

Enable the [Backgrounds](https://storybook.js.org/docs/10.4/essentials/backgrounds.md) feature.

## `componentsManifest`

Type: `boolean`

Default: `false`

Generate [manifests](https://storybook.js.org/docs/10.4/ai/manifests.md), used by the [MCP server](https://storybook.js.org/docs/10.4/ai/mcp/overview.md).

```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)'],
  features: {
    componentsManifest: true,
  },
};

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)'],
  features: {
    componentsManifest: true,
  },
});
```

## `changeDetection`

Type: `boolean`

Default: `true`

Enable [change detection](https://storybook.js.org/docs/10.4/configure/user-interface/change-detection.md). When enabled, Storybook monitors your git working tree and the builder's module graph to show which stories are new, modified, or related to code changes. Changed stories are displayed with status icons in the sidebar.

```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)'],
  features: {
    changeDetection: false,
  },
};

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)'],
  features: {
    changeDetection: false,
  },
});
```

## `controls`

Type: `boolean`

Default: `true`

Enable the [Controls](https://storybook.js.org/docs/10.4/essentials/controls.md) feature.

## `developmentModeForBuild`

Type: `boolean`

Set `NODE_ENV` to `'development'` in built Storybooks for better testing and debugging capabilities.

```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)'],
  features: {
    developmentModeForBuild: true,
  },
};

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)'],
  features: {
    developmentModeForBuild: true,
  },
});
```

## `experimentalCodeExamples`

(⚠️ **Experimental**)

Type: `boolean`

Enable the new code example generation method for React components (as seen in the story previews in an [autodocs](https://storybook.js.org/docs/10.4/writing-docs/autodocs.md) page).

Unlike the current implementation, this method reads the actual stories source file, which is faster to generate, more readable, and more accurate. However, they are not dynamic: they won't update if you change values in the Controls table.

```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)'],
  features: {
    experimentalCodeExamples: true,
  },
};

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)'],
  features: {
    experimentalCodeExamples: true,
  },
});
```

## `experimentalTestSyntax`

(⚠️ **Experimental**)

Type: `boolean`

Enable the [experimental `.test` method with the CSF Next format](https://storybook.js.org/docs/10.4/api/csf/csf-next.md#storytest).

```ts
// .storybook/main.js|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)'],
  features: {
    experimentalTestSyntax: true,
  },
});
```

## `highlight`

Type: `boolean`

Default: `true`

Enable the [Highlight](https://storybook.js.org/docs/10.4/essentials/highlight.md) feature.

## `interactions`

Type: `boolean`

Default: `true`

Enable the [Interactions](https://storybook.js.org/docs/10.4/writing-tests/interaction-testing.md#debugging-interaction-tests) feature.

## `legacyDecoratorFileOrder`

Type: `boolean`

Apply decorators from preview.js before decorators from addons or frameworks. [More information](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#changed-decorator-order-between-previewjs-and-addonsframeworks).

```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)'],
  features: {
    legacyDecoratorFileOrder: true,
  },
};

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)'],
  features: {
    legacyDecoratorFileOrder: true,
  },
});
```

## `measure`

Type: `boolean`

Default: `true`

Enable the [Measure](https://storybook.js.org/docs/10.4/essentials/measure-and-outline.md#measure) feature.

## `outline`

Type: `boolean`

Default: `true`

Enable the [Outline](https://storybook.js.org/docs/10.4/essentials/measure-and-outline.md#outline) feature.

## `sidebarOnboardingChecklist`

Type: `boolean`

Default: `true`

Enable the onboarding checklist sidebar widget.

## `viewport`

Type: `boolean`

Default: `true`

Enable the [Viewport](https://storybook.js.org/docs/10.4/essentials/viewport.md) feature.