Docs
Storybook Docs

features

Parent: main.js|ts configuration

Type:

{
  argTypeTargetsV7?: boolean;
  buildStoriesJson?: boolean;
  legacyDecoratorFileOrder?: boolean;
  legacyMdx1?: boolean;
  storyStoreV7?: boolean;
}

Enables Storybook's additional features.

buildStoriesJson

Type: boolean

Default: true, when storyStoreV7 is true

Generates a index.json and stories.json files to help story loading with the on-demand mode.

.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: {
    buildStoriesJson: 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;

legacyMdx1

Type: boolean

Enables support for MDX version 1 as a fallback. Requires @storybook/mdx1-csf to be installed.

.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: {
    legacyMdx1: true, // ๐Ÿ‘ˆ Enables MDX v1 support
  },
};
 
export default config;

storyStoreV7

Type: boolean

Default: true

Opts out of on-demand story loading; loads all stories at build time.

.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: {
    storyStoreV7: false, // ๐Ÿ‘ˆ Opt out of on-demand story loading
  },
};
 
export default config;

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;

On-demand story loading

As your Storybook grows, it gets challenging to load all of your stories performantly, slowing down the loading times and yielding a large bundle. Out of the box, Storybook loads your stories on demand rather than during boot-up to improve the performance of your Storybook. If you need to load all of your stories during boot-up, you can disable this feature by setting the storyStoreV7 feature flag to false in your configuration as follows:

.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: {
    storyStoreV7: false, // ๐Ÿ‘ˆ Opt out of on-demand story loading
  },
};
 
export default config;

Known limitations

Because of the way stories are currently indexed in Storybook, loading stories on demand with storyStoreV7 has a couple of minor limitations at the moment: