Learn how to integrate and use addons using a popular example

Storybook boasts a robust system of addons with which you can enhance the developer experience for everybody in your team. If you've been following along with this tutorial linearly, we have referenced multiple addons so far, and you will have already implemented one in the Testing chapter.

Looking for a list of potential addons?
😍 You can see the list of officially-supported and strongly-supported community addons here.

We could write forever about configuring and using addons for all of your particular use-cases. For now, let's work towards integrating one of the most popular addons within Storybook's ecosystem: knobs.

Setting Up Knobs

Knobs is an amazing resource for designers and developers to experiment and play with components in a controlled environment without the need to code! You essentially provide dynamically defined fields with which a user manipulates the props being passed to the components in your stories. Here's what we're going to implement...


First, we will need to install all the necessary dependencies.

yarn add -D @storybook/addon-knobs

Register Knobs in your .storybook/main.js file.

// .storybook/main.js

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: [
📝 Addon registration order matters!
The order you list these addons will dictate the order in which they appear as tabs on your addon panel (for those that appear there).

That's it! Time to use it in a story.


Let's use the object knob type in the Task component.

First, import the withKnobs decorator and the object knob type to Task.stories.js:

// src/components/Task.stories.js

import React from 'react';
import { action } from '@storybook/addon-actions';
import { withKnobs, object } from '@storybook/addon-knobs/react';
If you're using TypeScript, you'll need to make a small adjustment to the imports. You'll need to use import { withKnobs, object } from '@storybook/addon-knobs' instead.

Next, within the default export of Task.stories.js file, add withKnobs to the decorators key:

// src/components/Task.stories.js

export default {
  component: Task,
  title: 'Task',
  decorators: [withKnobs],
  excludeStories: /.*Data$/,

Lastly, integrate the object knob type within the "default" story:

// src/components/Task.stories.js

export const Default = () => {
  return <Task task={object('task', { ...taskData })} {...actionsData} />;

Now a new "Knobs" tab should show up next to the "Action Logger" tab in the bottom pane.

As documented here, the object knob type accepts a label and a default object as parameters. The label is constant and shows up to the left of a text field in your addons panel. The object you've passed will be represented as an editable JSON blob. As long as you submit valid JSON, your component will adjust based upon the data being passed to the object!

Addons Evolve Your Storybook's Scope

Not only does your Storybook instance serve as a wonderful CDD environment, but now we're providing an interactive source of documentation. PropTypes are great, but a designer or somebody completely new to a component's code will be able to figure out its behavior very quickly via Storybook with the knobs addon implemented.

Using Knobs To Find Edge-Cases

Additionally, with easy access to editing passed data to a component, QA Engineers or preventative UI Engineers can now push a component to the limit! As an example, what happens to Task if our list item has a MASSIVE string?

Oh no! The far right content is cut-off! 😥

Thanks to quickly being able to try different inputs to a component we can find and fix such problems with relative ease! Let's fix the issue with overflowing by adding a style to Task.js:

// src/components/Task.js

// This is the input for our task title. In practice we would probably update the styles for this element
// but for this tutorial, let's fix the problem with an inline style:
  placeholder="Input title"
  style={{ textOverflow: 'ellipsis' }}

That's better. 👍

Adding A New Story To Avoid Regressions

Of course we can always reproduce this problem by entering the same input into the knobs, but it's better to write a fixed story for this input. This will increase your regression testing and clearly outline the limits of the component(s) to the rest of your team.

Let's add a story for the long text case in Task.stories.js:

// src/components/Task.stories.js

const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;

export const LongTitle = () => (
  <Task task={{ ...taskData, title: longTitleString }} {...actionsData} />

Now we've added the story, we can reproduce this edge-case with ease whenever we want to work on it:

Here it is in Storybook.

If we are using visual regression testing, we will also be informed if we ever break our ellipsizing solution. Such obscure edge-cases are always liable to be forgotten!

Merge Changes

Don't forget to merge your changes with git!

As we've seen, Knobs is a great way to get non-developers playing with your components and stories. However, there are many more ways you can customize Storybook to fit your workflow with addons. In the create addons bonus chapter we'll teach you that, by creating a addon that will help you supercharge your development workflow.

Next Chapter
Put all your knowledge together and learn more Storybook techniques