features

Type:

{
  argTypeTargetsV7?: boolean;
  backgroundsStoryGlobals?: boolean;
  legacyDecoratorFileOrder?: boolean;
  viewportStoryGlobals?: boolean;
  developmentModeForBuild?: boolean;
}

Enables Storybook's additional features.

`argTypeTargetsV7`

(⚠️ Experimental)

Type: boolean

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-webpack5, vue3-vite)
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;

`backgroundsStoryGlobals`

Type: boolean

Configures the Backgrounds addon to opt-in to the new story globals API for configuring backgrounds.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
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: {
    backgroundsStoryGlobals: true,
  },
};
 
export default config;

`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-webpack5, vue3-vite)
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;

`viewportStoryGlobals`

Type: boolean

Configures the Viewports addon to opt-in to the new story globals API for configuring viewports.

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
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: {
    viewportStoryGlobals: true,
  },
};
 
export default config;

`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-webpack5, vue3-vite)
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;