Create an Addon

Addons give you superpowers to extend Storybook, automate workflows, and integrate with your favorite tools. This guide shows you how to create an addon.

Languages: English Español Français 한국어

Contributors

Chapters

Overview

While the Storybook community offers over 250 addons, you can also build one tailored to your specific needs. This guide introduces you to the Addon Kit and APIs, along the way you will build an addon from scratch.

Table of Contents

1
Introduction
The anatomy of an addon
2
Setup
Get started with the Addon Kit
3
Register addon
Build the addon UI and register it in Storybook
4
Track state
Manage addon state across the Manager and Preview
5
Decorators
Interacting with the stories
6
Preset
Enable Outline for every story
7
Add to catalog
Share your Storybook addon with the community
8
Conclusion
Help automate and extend Storybook

What you'll build

React

Outline Addon

Follow along as we code the Outline addon—used for visually debugging CSS layout and alignment. It adds a toolbar button that outlines all UI elements, making it easy to verify positioning and placement at a glance.

Author

Varun Vachhar

Storybook DX