Storybook is configured via a folder called
.storybook, which contains various configuration files.
Note that you can change the folder that Storybook uses by setting the
-c flag to your
The main configuration file is
main.js. This file controls the Storybook server's behavior, so you must restart Storybook’s process when you change it. It contains the following:
main.js configuration file is a preset and, as such, has a powerful interface, but the key fields within it are:
stories- an array of globs that indicates the location of your story files, relative to
addons- a list of the addons you are using.
webpackFinal- custom webpack configuration.
babel- custom babel configuration.
By default, Storybook will load stories from your project based on a glob (pattern matching string) in
.storybook/main.js that matches all files in your project with extension
.stories.*. The intention is you colocate a story file with the component it documents.
If you want to use a different naming convention, you can alter the glob, using the syntax supported by picomatch.
For example, if you wanted to pull both
.js files from the
my-project/src/components directory, you could write:
Additionally, you can also customize your Storybook configuration to load your stories based on a configuration object. For example, if you wanted to load your stories from a
packages directory, you could adjust your
stories configuration field into the following:
When Storybook starts, it will look for any file containing the
stories extension inside the
packages/stories directory and generate the titles for your stories.
You can also simplify your Storybook configuration and load the stories based on a directory. For example, if you want to load all the stories inside a
packages/MyStories, you can adjust the configuration as such:
You can also adjust your Storybook configuration and implement your own custom logic for loading your stories. For example, suppose you were working on a project that includes a particular pattern that the conventional ways of loading stories could not solve, in that case, you could adjust your configuration as follows:
As your Storybook grows in size, it gets challenging to load all of your stories in a performant way, slowing down the loading times and yielding a large bundle. Starting with Storybook 6.4, you can optimize your story loading by enabling the
storyStoreV7 feature flag in your configuration as follows:
Once you've restarted your Storybook, you'll see an almost immediate performance gain in your loading times and also a decrease in the generated bundle.
This feature is experimental, and it has some limitations on what you can and cannot do in your stories files. If you plan to use it, you'll need to take into consideration the following limitations:
storiesOfconstruct is not.
storySortfunctions are allowed based on a restricted API.
To control the way stories are rendered and add global decorators and parameters, create a
.storybook/preview.js file. This is loaded in the Canvas tab, the “preview” iframe that renders your components in isolation. Use
preview.js file can be an ES module and export the following keys:
decorators- an array of global decorators
parameters- an object of global parameters
globalTypes- definition of globalTypes
If you’re looking to change how to order your stories, read about sorting stories.
To control the behavior of Storybook’s UI (the “manager”), you can create a