What is the difference between main.js and main.ts?

They are the same configuration file in JavaScript versus TypeScript. This tool generates main.ts so you get type-checking via the StorybookConfig type, but you can rename it to main.js and drop the import if you prefer plain JavaScript.

Which framework value should I choose?

Pick the builder matching your bundler and UI library, for example @storybook/react-vite for a Vite React app or @storybook/nextjs for Next.js. The framework field tells Storybook how to compile and serve your stories.

What does the autodocs setting do?

Setting docs.autodocs to "tag" makes Storybook auto-generate a documentation page for any story file tagged with autodocs. It produces an args table and usage docs from your component without writing MDX by hand.

Do I still need to install the addons?

Yes. The config only references the addon packages. You must add them to your devDependencies with your package manager, for example npm install -D @storybook/addon-a11y, before Storybook can load them.

Why is addon-essentials always included?

addon-essentials bundles the core toolbox — controls, actions, viewport, backgrounds, and measure — that almost every Storybook needs. Including it by default saves you from listing each addon separately.

Storybook main.js / .storybook Config Builder

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Configure Storybook in seconds

Storybook is an isolated workshop for building and testing UI components, and every project needs a .storybook folder with a main file telling it where stories live, which framework builder to use, and which addons to load. This builder generates a clean, typed main.ts plus a sensible preview.ts so you can scaffold a new Storybook or align an old one with current conventions.

How it works

Storybook reads .storybook/main.ts at startup. The stories array is a glob that Storybook scans to find every *.stories.* file. The framework object selects the compiler and renderer — this is the single most important setting, because it must match your bundler (Vite or Webpack) and UI library (React, Vue, Angular, Svelte). The addons array lists plugins that extend the toolbar and docs.

The generated preview.ts sets global parameters: an actions matcher that auto-detects on* event props, and controls matchers that render color pickers and date pickers based on prop-name patterns. The staticDirs option tells Storybook to serve assets like images or fonts from your public folder, and docs.autodocs: "tag" auto-generates documentation pages.

Tips and notes

Install each addon you enable; the config only references the package names.
The stories glob is relative to the .storybook folder, so ../src/** points at your source directory.
For a TypeScript project keep main.ts; for plain JavaScript rename to main.js and remove the import type line and the StorybookConfig annotation.
staticDirs accepts multiple comma-separated paths if you serve assets from more than one folder.