# storybook | Storybook | Knowledge Base | Instagit

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

GitHub Stars: 89.3k

Repository: https://github.com/storybookjs/storybook

---

## Articles

### [How to Create Custom Storybook Addons: A Complete Developer Guide](/storybookjs/storybook/how-to-create-custom-storybook-addons)

Learn to create custom Storybook addons with this complete guide. Extend Storybook UI and iframe functionality using manager and preview APIs for powerful integrations.

- Tags: how-to-guide
- Published: 2026-02-27

### [How Storybook Preview-Web Works: Deep Dive into PreviewWeb, UrlStore, and the Rendering Runtime](/storybookjs/storybook/how-does-the-preview-web-work-preview-previewweb-urlstore)

Explore Storybook preview-web internals. Learn how PreviewWeb, UrlStore, and WebView manage story rendering, URL state, and DOM manipulation for seamless component display.

- Tags: deep-dive
- Published: 2026-02-27

### [How to Configure Story Parameters and Args in Storybook: A Complete Guide to CSF](/storybookjs/storybook/how-to-configure-story-parameters-and-args)

Master Storybook parameters and args to control static metadata and dynamic component props. Learn how to configure them for your stories with this comprehensive CSF guide.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use Project Annotations in Storybook: setProjectAnnotations and setDefaultProjectAnnotations Explained](/storybookjs/storybook/how-to-use-project-annotations-setprojectannotations-setdefaultprojectannotations)

Master Storybook project annotations. Learn how setProjectAnnotations and setDefaultProjectAnnotations ensure consistent UI rendering and global decorators for your components.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Migrate from Older Storybook Versions: Complete Guide to Storybook 8](/storybookjs/storybook/how-to-migrate-from-older-storybook-versions)

Migrate from older Storybook versions to Storybook 8 with our comprehensive guide. Learn about Node.js requirements, ESM config, API changes, and addon updates to ensure a smooth transition.

- Tags: migration-guide
- Published: 2026-02-27

### [How to Configure Hot Module Replacement (HMR) in Storybook: Complete Vite Builder Guide](/storybookjs/storybook/how-to-configure-hot-module-replacement-hmr-in-storybook)

Learn to configure Hot Module Replacement HMR in Storybook with the Vite builder. Customize port, protocol, or disable HMR via viteFinal in your main.ts file for faster development.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use Storybook Manager API Stores (Status, Test-Provider, Checklist)](/storybookjs/storybook/how-to-use-the-manager-api-stores-status-test-provider-checklist)

Learn to use Storybook Manager API stores like status testprovider and checklist to read and mutate UI state with experimental hooks and internal store instances

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Configure Storybook for Different Frameworks: React, Vue, Angular, and Svelte](/storybookjs/storybook/how-to-configure-storybook-for-different-frameworks-react-vue-angular-svelte)

Configure Storybook for React Vue Angular or Svelte by setting the framework field in .storybookmainjs. Learn how to integrate Storybook with your favorite UI frameworks.

- Tags: how-to-guide
- Published: 2026-02-27

### [How Portable Stories Work with Vitest, Jest, and Playwright: A Complete Guide](/storybookjs/storybook/how-does-portable-stories-work-with-vitest-jest-and-playwright)

Discover how portable stories streamline UI testing with Vitest, Jest, and Playwright. Learn to reuse Storybook stories across your toolchain for a single source of truth.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use the Storybook Links Addon to Connect Stories](/storybookjs/storybook/how-to-use-links-addon-to-connect-stories)

Learn to use the Storybook Links addon to connect stories programmatically or declaratively. Integrate navigation easily with linkTo, hrefTo, withLinks, and LinkTo.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use the a11y Addon for Accessibility Testing in Storybook](/storybookjs/storybook/how-to-use-a11y-addon-for-accessibility-testing)

Easily test component accessibility in Storybook with the a11y addon. Integrate axe-core to automatically detect violations and improve your UI.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Configure the Storybook Docs Addon for Automatic Documentation (Autodocs)](/storybookjs/storybook/how-to-configure-docs-addon-for-automatic-documentation)

Learn to configure Storybook's Autodocs addon for automatic documentation. Install, register, and apply the autodocs tag to effortlessly generate component docs.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use the Storybook Actions Addon for Logging User Interactions](/storybookjs/storybook/how-to-use-actions-addon-for-logging-user-interactions)

Learn to use the Storybook Actions addon to log user interactions like clicks and changes. Capture events for real-time debugging in a dedicated panel. Enhance your development workflow.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use the Outline Addon for CSS Debugging in Storybook](/storybookjs/storybook/how-to-use-outline-addon-for-css-debugging)

Debug CSS layout issues in Storybook instantly with the Outline addon. This tool adds colored outlines to all elements, making CSS debugging quick and easy. Press 'o' to enable.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use the Measure Addon for Layout Inspection in Storybook](/storybookjs/storybook/how-to-use-measure-addon-for-layout-inspection)

Inspect layouts in Storybook with the Measure addon. Get exact dimensions, margins, padding, and borders on element hover. Improve your UI development workflow today.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use the Backgrounds Addon in Storybook: Configuration, Defaults, and Customization](/storybookjs/storybook/how-to-use-backgrounds-addon-in-storybook)

Learn how to use the Storybook backgrounds addon to easily switch background colors and toggle a grid overlay. Configure backgrounds globally or per-story for seamless UI development.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Configure Viewport Addon for Responsive Testing in Storybook](/storybookjs/storybook/how-to-configure-viewport-addon-for-responsive-testing)

Learn to configure the Storybook Viewport addon for effective responsive testing. Simulate various screen sizes easily by setting parameters in your preview file.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use the Storybook Controls Addon for Interactive Component Props](/storybookjs/storybook/how-to-use-the-controls-addon-for-interactive-component-props)

Learn how to use the Storybook Controls addon to interactively edit component props in real-time. Map args and argTypes to form fields for instant UI updates.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Configure Storybook with Webpack 5 and Vite Builders: A Complete Guide](/storybookjs/storybook/how-to-configure-storybook-with-webpack-and-vite-builders)

Master Storybook configuration with Webpack 5 and Vite. Learn to set the core builder and install necessary packages for a seamless workflow.

- Tags: how-to-guide
- Published: 2026-02-27

### [How Storybook Story Composition Works with composeStories and composeStory](/storybookjs/storybook/how-does-story-composition-work-with-composestories-and-composestory)

Learn how Storybook's portable-stories API and composeStories enable you to run your stories outside the Storybook UI in Jest, Vitest, and Playwright.

- Tags: internals
- Published: 2026-02-27

### [How to Create Custom Decorators Using makeDecorator in Storybook](/storybookjs/storybook/how-to-create-custom-decorators-using-makedecorator)

Learn to create custom decorators with Storybook's makeDecorator. This factory function streamlines adding reusable logic to your stories, enhancing your component development workflow. Get started now.

- Tags: how-to-guide
- Published: 2026-02-27

### [How to Use Storybook Preview API Hooks: A Complete Guide to useArgs, useState, and More](/storybookjs/storybook/how-to-use-the-preview-api-hooks-useargs-usecallback-usechannel-useeffect-useglobals-usememo-useparameter-usereducer-useref-usestate-usestorycontext)

Master Storybook Preview API hooks like useArgs, useState, and useEffect. Manage state, side effects, and story config for enhanced component development with this comprehensive guide.

- Tags: how-to-guide
- Published: 2026-02-27

### [How Storybook CSF Generates Story IDs with toId, toTestId, and storyNameFromExport](/storybookjs/storybook/how-does-storybooks-csf-component-story-format-work-with-toid-totestid-and-storynamefromexport)

Discover how Storybook CSF uses storyNameFromExport, toId, and toTestId to generate stable story IDs, human-readable titles, and test IDs for your components. Learn the mechanics behind CSF story identification.

- Tags: internals
- Published: 2026-02-27