Top Storybook addons to take your code to the next level
Tags: storybook, ui, webdev
Published: 2020-04-01 16:14:30

---
title: Top Storybook addons to take your code to the next level
published: true
date: 2020-03-12 16:00:16 UTC
tags: storybook,ui,webdev
canonical_url: https://blog.logrocket.com/top-storybook-addons-to-take-your-code-to-the-next-level/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/mdw7oy5ggqad6sxmsdt5.png
---
**Written by [Dylan Tientcheu](https://blog.logrocket.com/author/dylan-tientcheu/)**✏️

Growing up, I enjoyed playing with Legos because they enable you to endlessly put together different combinations of creative toys using the same pieces.

You can think of components in UI development as Lego bricks.

In the same way, they allow you to assemble different interfaces from a pool of pieces.

Imagine there exists a tool that helps you organize all these components — or bricks — in an isolated manner to enable you to build, share, and test them efficiently.

This is the role of [Storybook](https://storybook.js.org/), and it’s defined on their website as follows:

> [Storybook](https://storybook.js.org/) is an open source tool for developing UI components in isolation for React, Vue, and Angular.  
> It makes building stunning UIs organized and efficient.

## What are [Storybook addons](https://storybook.js.org/addons/)?

Addons are plugins that help supercharge your Storybook with new custom advanced functionalities and workflows.

These addons are contributed by the core maintainers (official addons) and by the developer community (community addons).

If you have been using Storybook, you’ve probably seen some official addons like [Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs) and [Actions](https://github.com/storybookjs/storybook/tree/master/addons/actions).

Addons are still a growing feature of Storybook.

Below are some major addons that greatly enhance your workflow:

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

### [Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs)

![A screenshot of the Knobs Storybook addons.](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/top-storybook-addons.png?resize=730%2C398&ssl=1)

[Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs) allow you to dynamically edit props through the Storybook interface.

It’s a great development, testing, and debugging tool.

With Knobs, you are able to change a button’s state or text from enabled to disabled simply by checking a box or changing a field.

### [Actions](https://github.com/storybookjs/storybook/tree/master/addons/actions)

![A screenshot of the Actions Storybook addon.](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/Actions.png?resize=730%2C488&ssl=1)

The [Actions addon](https://github.com/storybookjs/storybook/tree/master/addons/actions) is used to display data received by event handlers.

It’s basically your event `console.log()`.

With this addon, you can monitor multiple actions on your component.

You can even process the data before sending it to the logger incase you need to do some cleanup before.

**Tip:**  
The [Events addon](https://github.com/storybookjs/storybook/tree/master/addons/events) can also enable you to add (emit) custom events for your stories.

You can mimic an event and customize the payload.

### [Viewport](https://github.com/storybookjs/storybook/tree/master/addons/viewport)

![A screenshot of the Viewport addon.](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/Viewport-addon.png?resize=730%2C423&ssl=1)

The Viewport addon allows you to display your stories in different sizes and layouts.

This addon basically functions as your browser developer tools.

You are able to set popular (iPhone 6, iPhone X, Pixel XL etc..), edit them, or add custom viewports on your components to help visualize them in different environments.

```jsx
import { addParameters } from '@storybook/react';

const customViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  kindleFireHD: {
    name: 'Kindle Fire HD',
    styles: {
      width: '533px',
      height: '801px',
    },
  },
};

addParameters({
  viewport: { viewports: customViewports },
});
```

**Tip:**  
You can improve your component’s responsiveness tests with [taffy](https://github.com/DEGJS/storybook-addon-taffy) and [responsive views](https://github.com/vizeat/storybook-addon-responsive-views).

Taffy enables a dynamic draggable re-sizer and responsive views is able to set media queries to help test your components.

### [Storysource](https://github.com/storybookjs/storybook/tree/master/addons/storysource)

![A gif of the Storybook UI.](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/the-storybook-UI.png.gif?resize=730%2C411&ssl=1)

This addon simply adds the stories code sources in the addon panel.

This enables the reader to see the component’s implementation.

You are even able to add a prettier configuration (or formatting rules) to the code.

Moreover, you can add dark and light syntax themes to the code.

**Tip:**  
In case you are a React user, there’s a [React live edit plugin](https://github.com/vertexbz/storybook-addon-react-live-edit).

As its name says, it helps you to live edit a story’s code.

### [Accessibility](https://github.com/storybookjs/storybook/tree/master/addons/a11y)

![A screenshot of a Storybook addon intended to ensure accessibility.](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/React-storybook-addon.png?resize=730%2C464&ssl=1)

The [a11y addon](https://github.com/storybookjs/storybook/tree/master/addons/a11y) checks your components against common [accessibility rules](https://a11y.me/).

This helps developers understand which of these rules their components respect and which ones they violate.

It even provides hints for how to fix it, as well as links to get more information.

### [Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs)

![An image of the Storybook docs.](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/Badge-storybook.png?resize=730%2C362&ssl=1)

[Storybook Docs](https://github.com/storybookjs/storybook/tree/master/addons/docs) transform your Storybook stories into world-class component documentation.

### DocsPage

Out of the box, all your stories get a `DocsPage`.

`DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into clean, readable pages.

**MDX** If you want more control, `MDX` allows you to write long-form markdown documentation and stories into one file.

You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.

**Tip:**  
You can use [notes](https://github.com/storybookjs/storybook/tree/master/addons/notes) and [chapters](https://github.com/Checkfront/react-storybook-addon-chapters) addons to organize and supercharge even more of your components’ documentation.

[Versions](https://github.com/buildit/storybook-addon-versions)

![A screenshot Versions, which is basically the git of the Storybook.](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/hello-button.png.gif?resize=730%2C339&ssl=1)

Versions is basically your git for the components in your storybook.

This addon allows you to navigate through different versions of your components via a `versions` panel, in case you have a setup that produces a different static Storybook build for each of your versions.

## Data and State Management

### GraphQL and Apollo

If you work with the **Apollo client** to help query and mutate your GraphQL API, the [Apollo storybook addon](https://github.com/abhiaiyer91/apollo-storybook-decorator) has you covered.

You are able to provide a [mock object](https://www.apollographql.com/docs/graphql-tools/mocking/) which will be consumed by your component.

Furthermore, if your graphQL API relies on [GraphCMS](https://graphcms.com/), the [Graph kit addon](https://github.com/focusreactive/storybook-graphql-kit) helps you visualize all your data directly in appropriate components.

You’re also able to browse the database in a friendly, visible form.

[Formik addon](https://github.com/bhishp/storybook-formik)  
Now, just in case you happen to use the well known [Formik](https://github.com/jaredpalmer/formik) to build your forms without tears in React, [this Storybook addon](https://github.com/bhishp/storybook-formik) wraps your Formik fields and tracks their state in a panel to provide you with a nice experience.

### [i18n](https://github.com/goooseman/storybook-addon-i18n)

i18n is a tool that simply helps to change a component’s locale.

The addon is made completely library-agnostic (it doesn’t depend on any particular internationalization tool).

### Styles

With the different style addons in Storybook, you are able to present your components in various ways.

[Theme playground](https://github.com/jeslage/storybook-addon-theme-playground)  
Theme playground provides a panel where the theme values predefined in the components can be tweaked easily.

![A screenshot of the UI of the Storybook theme playground.](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/Active-theme.png?resize=730%2C368&ssl=1)

### Flavored styles

If you have any flavored stylesheets, you may use the following:

1. [styled-components-theme addon](https://github.com/echoulen/storybook-addon-styled-component-theme)
2. [JSS-theme addon](https://github.com/vertexbz/storybook-addon-jss-theme)
3. [Material UI addon](https://github.com/react-theming/storybook-addon-material-ui)
4. [CSS-class theme addon](https://github.com/tonai/storybook-addon-themes)

### [Playroom](https://github.com/rbardini/storybook-addon-playroom)

![The storybook UI demo.](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/storybook-demo.gif?resize=730%2C544&ssl=1)

Playroom is probably one of the greatest community Storybook addons.

[The playroom](https://github.com/rbardini/storybook-addon-playroom) enables you to play along with all of your components while testing them against popular screen breakpoints.

Using this addon, you can start designing combinations of components using each story source as a starting point.

### Design addons

If you wish to have your Adobe XD or Figma UI designs embedded in your Storybook page for any reason, you can use the [XD addon](https://github.com/morgs32/storybook-addon-xd-designs) and [Figma addon](https://github.com/hharnisc/storybook-addon-figma), respectively.

You can also use the [vertical rhythm](https://github.com/jmlweb/storybook-vrhythm) addon each time your high-fidelity designs have very sensitive specs.

They will help you deal with your component’s sizes, depths, and line heights.

**Tip:**  
There also exists a [Design token addon](https://github.com/UX-and-I/storybook-design-token) that enables you to automatically generate design token documentation from your stylesheets.

![A screenshot of Storybook components.](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/03/storybook-components.png?resize=730%2C392&ssl=1)

## Extra tips

- Each time you want to try a new addon, you should always take a look at the [framework support table](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md).  
It is basically the [caniuse.com](https://caniuse.com/) for Storybook addons.
- If you are a big fan of Storybook and its ecosystem, remember to stay at the cutting edge by watching the [Storybook’s awesome-list repository](https://github.com/lauthieb/awesome-storybook).
- [React carbon design system](https://react.carbondesignsystem.com/) has included in their Storybook a good collection of addons. You can use it to check out most of the aforementioned addons.

## Conclusion

Storybook already offers a great approach to frontend development, and addons only increase its power.

Addons are a great addition to Storybook and its vision of giving developers a better experience. 

* * * 
## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *

The post [Top Storybook addons to take your code to the next level](https://blog.logrocket.com/top-storybook-addons-to-take-your-code-to-the-next-level/) appeared first on [LogRocket Blog](https://blog.logrocket.com).