main.js

This file is an evolution of the presets.js file. As the main configuration file, it controls the generation of your Storybook. As such, it concerns itself with the location of your story files, management of presets (which configure Webpack and Babel to allow different file types), and generalized webpack configuration. You can also do basic addon registration in main.js .

The key configuration is the stories property. This now allows you to tell Storybook where your story-files are located declaratively with a glob! This is a very welcome improvement over using the webpack-only api of require.context() .

The list of story files is retrievable without running a line of your code. When combined with Component Story Format (which uses static ES6 exports), the total list of stories is also retrievable. This is a boon for addons and integrations that need to understand your story list.

Addon configuration also got a lot simpler. Just add an entry to the addons field and that will register the addon or use its built-in configuration preset if one is available.

main.js

preview.js

This file replaces config.js and controls the rendering of your stories. Unlike config.js , preview.js is not responsible for loading any stories. Its main purpose is to add global parameters and decorators should you need them. Other uses are importing global CSS, adding extra polyfills if needed, and similar browser-side tweaks.

In practice, many simple Storybooks will not need this file.

preview.js

manager.js

This file replaces addons.js and allows you to customize how Storybook’s app UI renders. That is, everything outside of the Canvas (preview iframe).

In common cases, you probably won’t need this file except when you’re theming Storybook.