core

Type:

{
  allowedHosts?: string[] | true;
  builder?: string | { name: string; options?: BuilderOptions };
  channelOptions?: ChannelOptions;
  crossOriginIsolated?: boolean;
  disableProjectJson?: boolean;
  disableTelemetry?: boolean;
  disableWebpackDefaults?: boolean;
  disableWhatsNewNotifications?: boolean;
  enableCrashReports?: boolean;
  renderer?: RendererName;
}

Configures Storybook's internal features.

`allowedHosts`

Type: string[] | true

Default: []

Configures the allowed hosts for the Storybook dev server. Storybook validates the Host header of every request, and the Origin header of WebSocket connections and requests to the MCP server, against this list. Storybook's localhost (or --host) address is always allowed. Use this when accessing your local Storybook instance through a reverse proxy (e.g. your webapp dev server). Set to true to disable hostname validation (insecure).

.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)'],
  core: {
    allowedHosts: ['storybook.example.local'],
  },
};
 
export default config;

Host validation protects the dev server from DNS rebinding. In a DNS rebinding attack, a website you visit points its own domain at your machine, and your browser sends that website's requests to your local Storybook. With host validation disabled, the website can read your stories and source files. It can also write files in your project through the WebSocket channel.

Host validation does not protect Storybook from other machines on your network. Anyone who can reach the dev server over the network has the same access. The dev server listens on localhost only unless you pass --host. Only expose it to a network you trust.

`builder`

Type:

| '@storybook/builder-vite' | '@storybook/builder-webpack5'
| {
    name: '@storybook/builder-vite' | '@storybook/builder-webpack5';
    options?: BuilderOptions;
  }

Configures Storybook's builder, Vite or Webpack.

With the new Framework API, framework.options.builder is now the preferred way to configure the builder.

You should only use core.builder.options if you need to configure a builder that is not part of a framework.

.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 = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  framework: '@storybook/your-framework',
  core: {
    builder: {
      name: '@storybook/builder-vite',
      options: {
        viteConfigPath: '../../../vite.config.js',
      },
    },
  },
};
 
export default config;

`channelOptions`

Type: ChannelOptions

{
  allowDate: boolean;
  allowRegExp: boolean;
  allowSymbol: boolean;
  allowUndefined: boolean;
  maxDepth: number;
  space: number | undefined;
}

Configures the channel used by Storybook to communicate between the manager and preview.

Only two properties are likely to be used:

`channelOptions.maxDepth`

Type: number

Default: 3

The maximum depth of nested objects to serialize across the channel. Larger values will be slower.

`crossOriginIsolated`

Type: boolean

Enable CORS headings to run document in a "secure context". See SharedArrayBuffer security requirements

This enables these headers in development-mode:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

.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)'],
  core: {
    crossOriginIsolated: true,
  },
};
 
export default config;

`disableProjectJson`

Type: boolean

Disables the generation of project.json, a file containing Storybook metadata

.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)'],
  core: {
    disableProjectJson: true,
  },
};
 
export default config;

`disableTelemetry`

Type: boolean

Disables Storybook's telemetry collection.

.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)'],
  core: {
    disableTelemetry: true,
  },
};
 
export default config;

`disableWebpackDefaults`

Type: boolean

Disables Storybook's default Webpack configuration.

.storybook/main.ts

// Replace your-framework with the framework you are using, e.g. react-webpack5, nextjs, angular, 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)'],
  core: {
    disableWebpackDefaults: true,
  },
};
 
export default config;

`disableWhatsNewNotifications`

Type: boolean

Disables the "What's New" notifications in the UI for new Storybook versions and ecosystem updates (e.g., addons, content, etc.).

.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)'],
  core: {
    disableWhatsNewNotifications: true,
  },
};
 
export default config;

`enableCrashReports`

Type: boolean

Enable crash reports to be sent to Storybook telemetry.

.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)'],
  core: {
    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
  },
};
 
export default config;

`renderer`

Type: RendererName