features

Type:

{
  actions?: boolean;
  argTypeTargetsV7?: boolean;
  backgrounds?: 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;
}

Enables Storybook's additional features.

`actions`

Type: boolean

Default: true

Enable the Actions feature.

`argTypeTargetsV7`

(⚠️ Experimental)

Type: boolean

Default: true

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

.storybook/main.ts

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

`backgrounds`

Type: boolean

Default: true

Enable the Backgrounds feature.

`componentsManifest`

Type: boolean

Default: true

Generate manifests, used by the MCP server.

.storybook/main.ts

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

`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, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    developmentModeForBuild: true,
  },
};
 
export default config;

`experimentalCodeExamples`

(⚠️ Experimental)

Type: boolean

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, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    experimentalCodeExamples: true,
  },
};
 
export default config;

`experimentalTestSyntax`

(⚠️ Experimental)

Type: boolean

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

.storybook/main.js|ts (CSF Next 🧪)

// 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,
  },
});

`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.

.storybook/main.ts

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

`measure`

Type: boolean

Default: true

Enable the Measure feature.

`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.