For CLI options see: here.

migration guide: This page documents the method to configure storybook introduced recently in 5.3.0, consult the migration guide if you want to migrate to this format of configuring storybook.

Main configuration

Storybook has a few files it uses for configuration, and they are grouped together into a directory (default: .storybook).

The most important file is the main.js file. This is where general config is declared.

Here’s a minimal example of that file:

module.exports = {
stories: ['../src/components/**/*.stories.js'],
addons: [
  '@storybook/addon-essentials',
],
};

stories is a list of glob patterns that tells where your stories are located, relative to the configuration file.

The addons field can refer to traditional addons, but it can also include presets, which are able to extend the config further.

main.js is a Preset

The main.js file is actually a preset! So if you know how to configure storybook, then you know how to write a preset, and vice-versa! So the main.js API is equal to that of presets.

Manager & preview

Storybook works by being split into 2 applications (“manager” and “preview”), which communicate with each other over a postMessage channel.

The preview application is essentially just your stories with a framework-agnostic ‘router’. It renders whichever story the manager application tells it to render.

The manager application renders the UI of addons, the navigator and toolbar.

There are two extra config files, if you need to configure the runtime of Manager or Preview.

In preview.js you can add global decorators and parameters:

// preview.js
import { addDecorator } from '@storybook/svelte';
import { withA11y } from '@storybook/addon-a11y';

addDecorator(withA11y);

In manager.js you can add UI options.

// manager.js
import { themes } from '@storybook/theming/create';
import { addons } from '@storybook/addons';

addons.setConfig({
  theme: themes.dark,
});

webpack

For how to customize webpack, view the customize webpack section