7 Benefits to using Storybook (i.e., why Think Company developers love Storybook and why we think you will, too)

While there’s no one magic tool for developers, the right software can be a game-changer. The tools you use can make a huge difference in how easily your team collaborates, whether your designs are accessibility compliant, and how much your head hurts when someone mentions documentation.

As developers at Think Company, we’ve been working with Storybook, and it’s changed our work for the better. Whether you’re new to Storybook or have been working in it for a while and are looking for new reasons to love it, we’ve assembled some of the reasons we love the tool—and why we think you (and your team) will too.

7 Benefits of using Storybook for developers

1. Design in real-time with stakeholders

Two of Storybook’s main benefits are that it is collaborative and fast. It’s also been helpful in unexpected ways at Think Company. 

For example, let’s say we’re in a meeting with a designer or stakeholder and discussing possible changes to a component. You could speak in hypotheticals, hoping everyone has the same mental picture of what is being described, or wait for a round of design changes from design software. 

Or (!) you could spin up Storybook locally, pop open your IDE of choice, and make code changes in real time while sharing your screen or in person. Watch Storybook recompile your CSS and update in the browser, getting consensus within minutes rather than hours or days. No more waiting to see whether or not that layout should be two columns or three, or if bumping up the heading’s font size is a good idea… or not! Storybook is your laboratory. 

Even better, you can guarantee the changes will look good in any browser because you’re working directly in it! We love our design and prototyping tools, but they create a degree of separation; you just can’t beat seeing the outcome in the real thing.

2. Streamline documentation

We don’t like managing documentation any more than you do, but it’s almost painless in Storybook. MDX allows for rendering the code with documentation together. Everything stays cohesive, and documentation is always up-to-date.

And in Storybook, almost anyone can write markdown—not just the people writing the code. This levels the playing field and makes it easy to keep everyone on the same page, making documentation less of a chore.

3. Hot module reloading

Hot module reloading (or replacement, refreshing, etc.) in Storybook is a game-changer. While this is becoming more and more of an industry standard in development software, it still bears mentioning.

While running Storybook locally, hot module reloading (sometimes called HMR) will watch changes to your files and refresh itself in real time without requiring a full-page refresh. All you have to do is write code and save your files. This significantly speeds up the development process and eliminates the deathly fear some of us still feel when we realize we haven’t reloaded the page in a while. 

4. A rich plug-in ecosystem

Developers are creating tools and plug-ins (called “Addons”) for Storybook all the time. If you have a specific use case need, chances are there’s an addon for that. 

And if there isn’t an existing addon for that, and you’re feeling incredibly industrious, you can create your own Addon! Storybook even provides a kit to bootstrap it and be on your merry way building something awesome.

5. Give context to components

This may be one of the things we love most about Storybook—it creates space to add context to design components. You can call out land mines ahead of time and articulate any “gotchas” in a design to set up other developers for success. 

For example, you can indicate the stability and recommended use of a component in the Docs tab. It comes in handy when you want to deprecate a pattern that’s in active use. It’s a more straightforward way to say, “don’t use it on the new design, or you will have bad times ahead, friend,” without loads of meetings and messages. Crisis averted.

6. Track component statuses

The Status Plugin also allows you a quick and simple way to communicate a component’s status, enabling easier project management. You can quickly and easily communicate progress with the rest of the team with a simple visible badge, whether a component is ready for prime time, marked for deprecation, or in beta testing, keeping collaboration moving forward. It’s incredible how much time can be spent (or wasted) just communicating whether a component is ready for use or shouldn’t be used going forward.

7. Streamline accessibility

Accessibility is a team effort. It’s not a single role’s responsibility, and designers or developers need to be in sync to make it work. Storybook provides an official plugin that automatically re-runs accessibility tests for you when the component changes. It gives you a heads-up about potential issues in real time when you have the best opportunity to fix them—right now, during development! No more “tacking on” accessibility as an afterthought; build accessible experiences from the start, and you will save untold hours of pain later.

One lovely side benefit we’ve experienced at Think Company is how this helps developers learn more about accessibility best practices and WCAG by reviewing the plugin’s reported issues and fixing them. With time and practice, developers build confidence in sensing what would likely cause an accessibility issue in the future (because they’ve been fixing them) and can contribute to design reviews with greater confidence.

Storybook benefits everyone

Using the right software for your team is a game-changer. While there’s no magic bullet for design and development projects, we’ve found that using Storybook has streamlined collaboration, cut churn, and helped keep everyone on the same page.

Clear communication is at the heart of every successful project. Storybook can help break down the communication silos between departments, setting the stage for win after win.