Back to blog

The Storybook Story

From UI development startup to open collective

Michael Shilman
Last updated:

With over 10,000 Github stars and 290k monthly npm downloads, Storybook is the most popular open source tool for React and React Native UI component development. Storybook 3.0 is our first community-driven release and represents a significant restructuring of Storybook’s source code and its maintainers.

This post explains how Storybook morphed from a startup into a community-driven project. Its goal is to help Storybook users understand the context of the 3.0 release and the change in maintenance. It may also be useful for anyone who wishes to understand how a project can smoothly transition from commercial entity into community-driven open collective.

The history of Storybook can be summarized by a single chart:

Key Storybook milestones overlaid on top of its Github commit history.
  1. Storybook 1.0 was developed by a startup called Kadira and launched in April 2016.
  2. Storybook 2.0 was released by Kadira in September 2016 with great docs, extensibility, and a paid hosted service.
  3. Kadira shut down in December 2016 and Storybook development went idle from mid-January 2017.
  4. After a minor uproar on Github in April 2017, the project was handed off to the community.
  5. Storybook 3.0 was released in May 2017, driven by the community.

Storybook’s Origin

Kadira was the original developer of Storybook. Kadira was a bootstrapped Sri Lankan startup, led by Arunoda Susirapala and consisting of a talented and close-knit team of developers.

Kadira Team: Nadie Anuththara, Arunoda Susiripala, , Aruna Herath, Pahan Sarathchandra, Kasun Indi, Muhammed Thanish, Madushan Nishantha.

Before Storybook, Kadira was already known and well-loved in the open source world, having contributed massively to the Meteor community, developing online courses, open source packages, and Kadira APM, a freemium application performance manager for Meteor.

As focus shifted away from Meteor, Kadira released React Storyboook 1.0 to the world in April 2016. The release consisted of an open-source project as well as the promise of a commercial hosted solution.

Real-time component editing in Storybook.

Storybook is an environment for defining, developing, and testing UI components. It’s based on the idea of “stories,” or individual component states that can be viewed in isolation. Applications can then be developed, piece-by-piece, and efficiently assembled from working parts. Building applications from components also improves testability, documentation, and collaboration.

With a compelling value proposition that captured developers’ imaginations, and a solid implementation for React component development, Storybook was a hit from day one, rising to the top of Hacker News, and amassing a bunch of early adopters out of the gate.

Storybook’s Rapid Growth

During 2016, Storybook matured from a tool for React component development into a platform:

  • Addons. Storybook has a flexible addon API, and it has been extended by Kadira and the community at large with dozens of addons to improve component design, testing, and documentation.
  • Frameworks. Storybook’s open architecture supports multiple component frameworks, and during 2016 it grew to support React Native.

As Storybook matured, its usage grew tremendously. There are numerous great open-source projects for component development and documentation, but we believe Storybook’s success is due to several factors:

  1. A zero-configuration integration with popular frameworks.
  2. An open architecture and continual stream of new features.
  3. Strong community marketing by Kadira.
Simplicity wins: installing Storybook in a single, zero-configuration step.

Storybook’s Death and Rebirth

Despite Storybook’s rapid rise in popularity, Kadira shut its doors in December 2016. The closure was attributed to a collection of personal and professional circumstances. It was a loss for the Javascript open source ecosystem.

Although Storybook was open source from the start, it was managed entirely by Kadira. Consequently, from-mid January, pull requests sat idle and the project stagnated in a limbo state over the following months, though Storybook was still being widely used by the community during that time.

Eventually, frustration was punctuated by issue storybook#731, which questioned whether the project was dead. This provocative post triggered React kingpin and Storybook supporter Dan Abramov to propose community maintenance. He later encouraged the new group of maintainers in a subsequent tweet to his nearly 70k followers:

Under New Management

In response to Dan’s exhortation, Storybook enthusiast Norbert de Langen stepped up to lead the transition to a community-driven Storybook. Arunoda and Muhammed Thanish graciously assisted in the transition and continue to advise the project.

Norbert organized a Google Hangout among community volunteers in early April, and I was one of those interested members on the first call. Since then, Norbert and I have driven the 3.0 release on both Github and Slack, along with a set of core maintainers and a massive number of contributors due to the project’s popularity.

Our kickoff meeting with community volunteers, including yours truly.

The new management are mostly first-time open-source maintainers, brought together by our love of Storybook and our excitement around a radically better way to develop user interfaces. We’ve never met in person, but are an easy-going group that’s having fun working together.

We’re spread across the globe, with core maintainers in Amsterdam, Colombo, Leicester, Melbourne, Moscow, Paris, San Francisco, and Seoul, and contributors from every continent except Antarctica (gotta leave something for v4!):

Storybook contributors around the globe.

Over the past month, we’ve completed an overhaul of Storybook, cleaning up its code/package structure/documentation/release process and closing a bunch of outstanding issues along the way:

Announcing Storybook 3.0
webpack2, create-react-native-app, snapshot testing++, & more!

The Road Ahead

In the past two months, Storybook has been reborn from the ashes of a startup and grown into a community-driven collective. And with Storybook 3.0, we’ve developed a strong foundation for future releases.

Soon we’ll be sharing our roadmap for improving the platform’s functionality, usability, and extensibility. To stay posted, hit “follow” on our Medium publication below or check us out on Twitter.

If you want to join the cause and discuss Storybook, please jump in our Slack channel. We’re a friendly bunch and welcome all collaborators at any level of experience!

If you’re interested in learning more about Storybook, please read our docs and give Storybook a try in your next React or React Native project. It’s this easy:

npm i -g @storybook/cli
cd my-storybook2-project

Finally, to stay up to date with Storybook-related news, hit “follow” below, or check us out on Twitter. And if you love Storybook, please tap the 👏 button below to help more people discover it.

With ❤️, storybook team.

Join the Storybook mailing list

Get the latest news, updates and releases

6,615 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

OPEN open source software

OPEN open-source at Storybook
Norbert de Langen

Introducing: Storybook for Vue 🎉

First of many “Storybook for <insert framework here>”
Norbert de Langen

Announcing Storybook 3.0

webpack2, create-react-native-app, snapshot testing++, & more!
Michael Shilman
Join the community
6,615 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI