Storybook Config Generator

Storybook is an open-source tool for building UI components in isolation, outside your main app. It provides a sandbox where you can develop, test, and document components independently. It's used by frontend developers working with React, Vue, Svelte, Angular, Web Components, and more. Teams use it for component-driven development, design system documentation, and visual regression testing.

main.ts (or main.js) is the core Storybook configuration file. It tells Storybook where to find your story files (stories glob), which addons to load, and which framework/builder to use. In Storybook 8, the framework field replaces the separate builder field — for example, '@storybook/react-vite' means the React renderer with the Vite builder.

preview.ts (or preview.js) controls the rendering environment for all stories. It sets global parameters (like controls matchers for color/date pickers), global decorators that wrap every story, and global args (default args available to all stories). It runs in the browser context, unlike main.ts which runs in Node.

Addons extend Storybook's functionality. The 'essentials' addon bundle includes Controls (interactive arg editor), Actions (event logging), Docs (MDX documentation), Viewport (responsive testing), and Backgrounds. The a11y addon runs axe-core accessibility checks on every story. Chromatic adds visual regression testing by capturing screenshots and comparing them on each commit.

Adding 'autodocs' to a story's tags array tells Storybook to automatically generate a documentation page for that component. It combines the component's JSDoc/TSDoc comments, prop types (from TypeScript or PropTypes), and all the named stories into a readable API reference page. This is part of the Storybook Docs addon.

Storybook 8 defaults to Vite for most frameworks because it's significantly faster — both for initial startup and HMR (hot module replacement). The framework packages like '@storybook/react-vite' and '@storybook/vue3-vite' bundle Vite as the builder. Angular uses its own CLI-based builder. If you have a Webpack-based project, you can still use '@storybook/react-webpack5', but the Vite builder is recommended for greenfield projects.