Addons can inject decorators to hook into story rendering
Addons can hook into the rendering of stories in the preview pane by injecting their own decorators.
Storybook · Setup · all subjects
addons
108 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
Addons extend Storybook UI, rendering, and build setup
Addons are the primary way to extend and customize Storybook to fit a team's development workflow. They are integral to how Storybook works, with many core features implemented as addons. Addons can affect three aspects: the Storybook UI (appearing in the toolbar and addons panel), the rendering of stories in the preview pane via decorators, and the build setup of Storybook by injecting webpack configuration.
Toolbar and addons panel are the chief places addons appear in UI
Within the Storybook UI, the toolbar and addons panel are the two chief places where addons will appear.
Core addons are developed by Storybook core team
Core addons are developed by the Storybook core team. They are kept in sync with the development of Storybook itself and written in idiomatic ways as templates for other addons. Core addons can be found within the Storybook monorepo at https://github.com/storybookjs/storybook/tree/next/code/addons.
Docs addon and Docs page for component documentation
The Docs page displays auto-generated documentation for components inferred from source code. This is helpful when sharing reusable components with your team. The documentation can be made available in published Storybook using the Docs addon.
Visual Tests addon for UI bug detection
The Visual Tests addon lets you pinpoint UI bugs in your local development environment by providing instant feedback directly in Storybook.
Addons panel location and purpose
Addons are plugins that extend Storybook's core functionality. The addons panel is located below the Canvas in the Storybook UI. Each tab in the addons panel shows generated metadata, logs, or static analysis for the selected story.
Controls addon for dynamic component interaction
The Controls addon allows you to interact with a component's args (inputs) dynamically, enabling experimentation with alternate configurations to discover edge cases.
Actions addon for verifying callbacks
The Actions addon helps verify that interactions produce the correct outputs via callbacks. For example, clicking a button can trigger a callback that the addon records and displays.
Interactions addon for debugging interaction tests
The Interactions addon provides a helpful user interface for debugging interaction tests that use the play function.
Accessibility addon for identifying violations
The Accessibility addon helps identify accessibility violations in your components.
Svelte CSF addon for native story syntax
Storybook provides the @storybook/addon-svelte-csf addon maintained by the community, which enables writing stories for Svelte components using Svelte template syntax. This addon has some feature limitations compared to official Storybook Svelte framework support.
Svelte CSF addon auto-installation
When initializing a Svelte Vite project with Storybook, the Svelte CSF addon is automatically installed and configured. For users migrating from previous versions, additional manual setup steps are required to enable this feature.
Svelte CSF addon configuration
The Svelte CSF addon offers zero-config support by default but can be extended by adding options to the .storybook/main.js|ts configuration file. The legacyTemplate option enables support for the Template component for backward compatibility (disabled by default), but enabling it can introduce performance overhead.
defineMeta function for story metadata
In Svelte CSF addon v5, the defineMeta function replaces the Meta component and meta named export for defining story metadata such as parameters. The function returns an object containing a Story component that must be used to define component stories.
Story template snippet support
Example of using template snippet in Svelte CSF addon v5: ```svelte title="MyComponent.stories.svelte" <script> import { defineMeta } from '@storybook/addon-svelte-csf'; import MyComponent from './MyComponent.svelte'; const { Story } = defineMeta({ component: MyComponent, }); </script> <Story name="Default" args={{ exampleProperty: true }}> {#snippet template(args)} <MyComponent {...args}>Reactive component</MyComponent> {/snippet} </Story> ```
Svelte CSF addon installation
The Storybook Svelte CSF addon (@storybook/addon-svelte-csf) is maintained by the community and enables writing stories for Svelte components using template syntax. If the SvelteKit framework was used during project initialization, the addon is already installed and configured. Otherwise, run the install command from svelte-csf-addon-install.md.
Svelte CSF addon configuration in main.js
To enable Svelte CSF addon support, update the .storybook/main.js|ts configuration file by registering the addon. See main-config-svelte-csf-register.md for the configuration code.
Svelte CSF addon legacyTemplate option
The Svelte CSF addon supports a legacyTemplate configuration option that enables support for the Template component for backward compatibility. This can be set with: options: { legacyTemplate: true }. Enabling this option can introduce a performance overhead and should be used cautiously.
Storybook supports hundreds of addons and integration tutorials
Storybook aims to integrate with industry-standard tools and platforms to simplify setup. There are hundreds of addons and tutorials that walk through how to set up Storybook in various types of projects.
Zeplin addon for Storybook
Use the Zeplin addon to connect Storybook with Zeplin, a design tool that generates styleguides from Sketch, Figma, and Adobe XD. The addon displays designs from Zeplin alongside the currently selected story and includes tooling to overlay the design image atop the live component.
Zeroheight Storybook integration
Zeroheight is a collaborative styleguide generator for design systems. It integrates with Storybook, enabling you to embed stories alongside your design specs in the Zeroheight documentation.
Storybook Connect Figma plugin prerequisites
Before installing the Storybook Connect Figma plugin, you must have a Storybook published to Chromatic. Chromatic provides the index, versions, and access control that back the plugin.
Storybook Connect Figma plugin installation
Go to Storybook Connect in the Figma community plugin directory. In Figma, open the command palette (Command + / on Mac OS, Control + / on Windows) and type 'Storybook Connect' to enable it. Follow the instructions to connect and authenticate with Chromatic.
Linking stories to Figma components with Storybook Connect
To link stories to Figma components, variants, and instances: Go to a story in a Storybook published on Chromatic on the branch you want to link, then copy the story URL. In Figma, select the component, open the Storybook Connect plugin, and paste the URL. Chromatic will automatically update linked stories to reflect the most recent Storybook published on that branch.
Storybook Connect plugin does not support layers
The Storybook Connect Figma plugin does not support linking stories to Figma layers.
Viewing linked stories in Figma
Once stories are linked in the Storybook Connect plugin, view them by clicking the link in the sidebar and selecting 'View story'. Alternatively, open the plugin using the command palette (Command + / on Mac OS, Control + / on Windows) and type 'Storybook Connect'.
Design addon for Figma integration
The Designs addon allows you to embed Figma files and prototypes in Storybook. Install it using the CLI's add command, which automates the addon's installation and setup.
Linking Figma designs to stories with Design addon
To embed Figma designs in Storybook using the Designs addon: In Figma, open the file you want to embed. For files or prototypes, click 'Share' to generate a URL and click 'Copy link'. For components or frames, check 'Link to selected frame' in the Share dialog or right-click the frame and go to 'Copy/Paste as' > 'Copy link'. In Storybook, add a parameter named 'design' to your story and paste the Figma URL.
Viewing Figma designs in Storybook
Click the 'Design' tab in the addon panel to view the embedded Figma design in Storybook.
UXPin Storybook integration
UXPin is an interactive design tool that uses production code to generate prototypes. UXPin allows you to use interactive stories from Storybook to design user flows.
InVision DSM Storybook integration
InVision Design System Manager (DSM) is a design system documentation tool. It allows you to embed Storybook in your design system documentation.
Adobe XD integration with Storybook
Integrate Adobe XD with Storybook using the design addon. You can embed design specs from Adobe XD alongside stories in Storybook.
Building custom Storybook integrations
You can extend and customize Storybook by building a custom integration. This involves integrating with lower-level Storybook APIs or bootstrapping an addon to customize Storybook's UI and behavior. Refer to the addon documentation and 'Create an addon' tutorial for guidance.
Design integrations overview
Storybook integrates with design tools to speed up your development workflow. These integrations help you debug inconsistencies earlier in the design process, discover existing components to reuse, and compare designs to stories.
Addons in composed Storybooks do not work as they normally do
Addons in composed Storybooks will not work as they normally do in a non-composed Storybook.
Install @storybook/addon-a11y accessibility addon
Install the @storybook/addon-a11y package using the command: npx storybook add @storybook/addon-a11y. This addon provides accessibility testing for Storybook stories using axe-core.
@storybook/addon-a11y uses axe-core for testing
The @storybook/addon-a11y package uses axe-core to run accessibility tests on Storybook stories.
MDX example with Meta, Story, and Canvas blocks
Example MDX documentation file: import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; import * as CheckboxStories from './Checkbox.stories'; <Meta title="MDX/Checkbox" of={CheckboxStories} />; # Checkbox; <Canvas><Story of={CheckboxStories.Unchecked} /></Canvas>
Storybook Docs addon provides DocsPage and MDX documentation
Storybook Docs transforms stories into component documentation. DocsPage provides zero-config aggregation of component stories, text descriptions, docgen comments, props tables, and code examples. MDX allows writing long-form markdown documentation with stories in one file, giving full control over component documentation.
DocsPage tab displays generated documentation
When Docs addon is installed, every story gets a DocsPage accessible by clicking the Docs tab. DocsPage pulls information from stories, components, source code, and story metadata to construct a sensible, zero-config default.
Docs addon hides addon panel
When docs is visible, the addons panel is hidden. This is because addons assume only one story is visible at a time, but docs can display many stories simultaneously.
Docs framework support
Storybook Docs supports all frameworks that Storybook supports, including React, Vue 3, Angular, Ember, Svelte, and others. React Native is not currently supported.
Debugging MDX stories in Canvas
To debug MDX stories in the Canvas, open browser dev tools and view the source served by the webpack dev server. Look under the webpack folder at path/to/your/stories. MDX compiles to JavaScript/Component Story Format (CSF), which can be copied into a .stories.js file for lower-level debugging.
MDX support for Angular with Storybook Docs
MDX is a convenient way to document Angular components in Markdown and embed documentation components such as stories and props tables inline.
MDX with moduleMetadata and decorators for Angular
When using template, moduleMetadata and/or addDecorators with storiesOf, you can translate your story to MDX by importing moduleMetadata from '@storybook/angular' and using it in the Meta decorators or Story elements.
Angular docs requires Compodoc for props tables
Getting Props tables for Angular components requires Compodoc, the API documentation tool. Compodoc supports inputs, outputs, properties, methods, view/content child/children as first class prop types.
addon-vitest for automatic story transformation
The addon @storybook/addon-vitest can be used to automatically transform your stories at Vitest runtime to in-memory test files, allowing you to run your stories in a Vitest environment without needing to manually transform your stories.