Ive just started using Storybook 📖

March 31, 2019

I’ve just started using Storybook recently due to a new contract that i’ve been working on. It has been amazing so far, it greatly improved my development experience in a couple of ways. It allows me to create documentation around a component while i’m building it.

What is Storybook?

So here’s the pretty official description from the storybook github: “Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.”

What does that mean for me?

Storybook gives me a contained environment to run the component and easily switch between edge cases of that component while working on it.

That means everything, end to end, from UI to logic can all be interacted with through storybook. This is really powerful because it essentially gives me a playground to rapidly develop and test components. The theory being that if each of these components work in isolation then when I combine them it’ll all be peachy. 🍑

Rapid Development 🚀

I cannot stress enough how good Storybook actually is just to develop inside, given that I work primarily with React on the front end and that because I use react i’m mostly working with small self contained components that when combined create a bigger picture, Storybook is perfect.

When I create a new component I want to create a feedback loop really quickly so that I can iterate on what I have and get the component built, with Storybook I can write a lot less code and start working on my component immediately.

All I have to do is create a file called ComponentName.story.js and put the following inside:

import React from 'react';
import { storiesOf } from '@storybook/react';
import ComponentName from './ComponentName';

storiesOf('Welcome', module)
  .add('ComponentName', () => <ComponentName />);

Then I just run yarn storybook and I can immediately start working on my new component while getting immediate feedback on things like its a11y violations, this is vital accessibility info.


Overall although i’m new to Storybook i’m really happy with how it’s going so far, so much so that i’ve also started using it in side projects, i’ve dabbled with it for both react and react-native, the setup can be a little bit fiddly but that’s something i’m confident the team will iron out with time.

Grant Leadbetter

Hey I'm Grant Leadbetter a JS contractor and consultant from Edinburgh. I mainly write about my thoughts on programming and startups. If you would like to hire me you can contact me via my website or twitter.

Subscribe to my newsletter 🙏