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.
// 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.
// 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.
// 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.
// 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.
// 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:
// 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:
- CSF formats from version 1 to version 3 are supported. The
storiesOfconstruct is not. - Custom
storySortfunctions receive more limited arguments.