features

Type:

{
  actions?: boolean;
  babelRemoveBugfixes?: boolean; // webpack only
  backgrounds?: boolean;
  componentsManifest?: boolean;
  controls?: boolean;
  developmentModeForBuild?: boolean;
  docgenServer?: boolean;
  experimentalCodeExamples?: boolean;
  experimentalTestSyntax?: boolean;
  highlight?: boolean;
  interactions?: boolean;
  measure?: boolean;
  outline?: boolean;
  sidebarOnboardingChecklist?: boolean;
  menuOnboardingChecklist?: boolean;
  toolbars?: boolean;
  viewport?: boolean;
}

Enables Storybook's additional features.

`actions`

Type: boolean

Default: true

Enable the Actions feature.

`babelRemoveBugfixes`

(⚠️ Webpack builder only)

Type: boolean

Disable the bugfixes option in @babel/preset-env for Webpack builder. This option was removed in Babel 8 and now causes Babel to throw an error. Set this to true if you use Babel 8 and Storybook fails to detect your Babel version.

`backgrounds`

Type: boolean

Default: true

Enable the Backgrounds feature.

`componentsManifest`

Type: boolean

Default: true for React, Angular Vite, and Vue 3 Vite

Generate manifests, used by the MCP server.

With the default docgenServer, manifests use a ref-based format with per-component JSON snapshots for faster MCP loading.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    componentsManifest: true,
  },
});

`controls`

Type: boolean

Default: true

Enable the Controls feature.

`developmentModeForBuild`

Type: boolean

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

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    developmentModeForBuild: true,
  },
});

`experimentalCodeExamples`

(⚠️ Experimental)

Type: boolean

Prefer docgenServer, which supersedes this flag and provides the same static snippet behavior along with faster, more accurate docgen.

Enable the new code example generation method for React components (as seen in the story previews in an autodocs 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.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    experimentalCodeExamples: true,
  },
});

`docgenServer`

Type: boolean

Default: true for React and Vue 3 when the typescript package is installed; true for @storybook/angular-vite, @storybook/web-components-vite, and community frameworks that support the docgen server; false for other frameworks.

When the typescript package is not installed, React falls back to builder docgen only when react-docgen is installed. Otherwise, Controls and the Docs args table show no props.

Enable server-side docgen. Storybook extracts component metadata on the dev server using the TypeScript Language Service instead of injecting docgen into the preview bundle. This provides faster startup, more accurate Controls and ArgTypes tables in autodocs, and improved static code snippets in docs and the Code panel. Manifests and the MCP server use an optimized, ref-based format that loads faster for AI agents.

Snippets are static: they won't update if you change values in the Controls table.

When enabled, you do not need experimentalCodeExamples because snippet generation is handled by the server-side story-docs service.

To use the legacy builder-based docgen path, turn the server off:

.storybook/main.ts

import { defineMain } from '@storybook/react-vite/node';
 
export default defineMain({
  framework: '@storybook/react-vite',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    docgenServer: false,
  },
});

Server-side docgen replaces React's typescript.reactDocgen and Vue's framework.options.docgen. There is no translation for reactDocgenTypescriptOptions, including propFilter, or for a custom Vue docgen tsconfig. Set docgenServer: false if your project depends on those settings.

On @storybook/angular-vite, framework.options.compodoc: false only prevents Compodoc from running on the legacy path. It does not turn off docgenServer; use the feature option for that.

`experimentalTestSyntax`

(⚠️ Experimental)

Type: boolean

Enable the experimental .test method with the CSF 4 format.

.storybook/main.js|ts

// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
import { defineMain } from '@storybook/your-framework/node';
 
export default defineMain({
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    experimentalTestSyntax: true,
  },
});