features

Parent: main.js|ts configuration

Type:

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

{
  actions?: boolean;
  angularFilterNonInputControls?: boolean;
  argTypeTargetsV7?: boolean;
  babelRemoveBugfixes?: boolean; // webpack only
  backgrounds?: boolean;
  changeDetection?: boolean;
  controls?: boolean;
  developmentModeForBuild?: boolean;
  highlight?: boolean;
  interactions?: boolean;
  legacyDecoratorFileOrder?: boolean;
  measure?: boolean;
  outline?: boolean;
  sidebarOnboardingChecklist?: boolean;
  menuOnboardingChecklist?: boolean;
  toolbars?: boolean;
  viewport?: boolean;
}

<If notRenderer={['react','angular']}>

{
  actions?: boolean;
  argTypeTargetsV7?: boolean;
  babelRemoveBugfixes?: boolean; // webpack only
  backgrounds?: boolean;
  changeDetection?: boolean;
  controls?: boolean;
  developmentModeForBuild?: boolean;
  highlight?: boolean;
  interactions?: boolean;
  legacyDecoratorFileOrder?: 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.

angularFilterNonInputControls

Type: boolean

Filter non-input controls in Angular.

argTypeTargetsV7

(⚠️ Experimental)

Type: boolean

Default: true

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

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: false

Generate manifests, used by the MCP server.

When combined with experimentalDocgenServer, manifests use a ref-based format with per-component JSON snapshots for faster MCP loading.

changeDetection

Type: boolean

Default: true

Enable change detection. 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.

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.

experimentalCodeExamples

(⚠️ Experimental)

Type: boolean

Prefer experimentalDocgenServer — it 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.

experimentalDocgenServer

(⚠️ Experimental)

Type: boolean

Default: false

Enable server-side docgen for React projects. Storybook extracts component metadata on the dev server using the TypeScript Language Service (via React Component Meta) 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.

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

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

This feature is currently only supported for React projects. We welcome feedback on the RFC.

experimentalReview

(⚠️ Experimental)

Type: boolean

Default: false

Enable the experimental agentic review feature, which allows you to review the work an AI agent has done in your Storybook.

Builds on changeDetection, which must also be enabled (it is, by default).

experimentalTestSyntax

(⚠️ Experimental)

Type: boolean

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

highlight

Type: boolean

Default: true

Enable the Highlight feature.

interactions

Type: boolean

Default: true

Enable the Interactions feature.

legacyDecoratorFileOrder

Type: boolean

Apply decorators from preview.js before decorators from addons or frameworks. More information.

measure

Type: boolean

Default: true

Enable the Measure feature.

menuOnboardingChecklist

Type: boolean

Default: true

Enable a link to the onboarding guide in the menu.

outline

Type: boolean

Default: true

Enable the Outline feature.

sidebarOnboardingChecklist

Type: boolean

Default: true

Enable the onboarding checklist sidebar widget.

viewport

Type: boolean

Default: true

Enable the Viewport feature.