Create an Addon
  • Introduction
  • Setup
  • Register addon
  • Track state
  • Decorators
  • Preset
  • Add to catalog
  • Conclusion
Framework:
React

Introduction to addons

The anatomy of an addon
This guide is made for professional developers learning how to build Storybook addons. Intermediate experience in JavaScript and React is recommended. You should also know Storybook basics, such as writing a story and editing config files (Intro to Storybook teaches basics).

Storybook is a tool for developing UI components outside your app in an isolated environment. Addons allow you to enhance and automate parts of this workflow. In fact, most of Storybook's core features are implemented as addons. For instance: documentation, accessibility testing and interactive controls, among others. There are also over 200 addons made by the community that unlock time-savings for UI developers.

What are we going to build?

It's tough to tell if your CSS layout matches the design. Eyeballing alignment is tricky when DOM elements are far apart or have odd shapes.

The Outline addon adds a toolbar button that outlines all UI elements, using CSS. That makes it easy to verify positioning and placement in a glance. Check out the example below.

Outline Addon

The anatomy of an addon

Addons allow you to extend what’s possible with Storybook. Everything from the interface to the APIs. They ⚡supercharge⚡ the UI development workflow.

There are two broad category of addons:

  • UI-based: customize the interface, add shortcuts for repetitive tasks or format and display additional information. For instance: documentation, accessibility testing, interactive controls, and design previews.
  • Presets: a collection of Storybook configurations that get applied automatically. These are often used to quickly pair Storybook with a specific technology. For example, the preset-create-react-app, preset-nuxt and preset-scss.

UI-based addons

Addons can create three types of interface elements:

  1. You can add a tool to the Toolbar, for example the Grid and Background tools

toolbar

  1. Create an addon Panel similar to the Actions addon which displays a log of actions

panel

  1. Create a new Tab much like Storybook Docs which displays the component documentation.

tab

It’s clear that addons can do a lot. So what does our addon do?

The Outline addon allows a developer to click a button in the toolbar to draw outlines around each element in the story. When they click that button again, all the outlines are removed.

Our addon code has four parts that we'll cover in the next few chapters:

  • Addon UI that creates the “tool” button in the toolbar. This is what the user clicks.
  • Registration of the addon with Storybook.
  • State management to track the toggle state of the tool. This controls whether the outlines are visible or not.
  • Decorator that injects CSS in the preview iframe to draw the outlines.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Setup
Get started with the Addon Kit
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookDocsTutorialsReleasesAddonsBlogGet involvedUse casesSupportTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify