State of Storybook 2019

Breakout year for Community, Product, and Ecosystem

Michael Shilman
Dec 19, 2019 · 9 min read

Storybook is the most popular UI component workshop on the planet.

It powers front-end development for teams at Airbnb, Lyft, Slack, Twitter, and thousands more companies. It’s used to build top design systems like Shopify Polaris, IBM Carbon, and Salesforce Lightning.

Thanks to our vibrant community, the project is growing like gangbusters by every measure. Our product is improving rapidly and on a regular release cycle. And tools across the design and development ecosystem now integrate into Storybook.

This is great news if you’re a front-end developer. It means that you have a standard tool you can bet on for the long term even as UI engineering quality, performance, and complexity expectations increase.

As the year comes to a close, it’s the perfect time to take stock. This article tracks our open source journey in 2019 and celebrates key project milestones. You’ll also get a sneak preview of next year’s initiatives.


👩‍💻 Storybook’s community is thriving

Framework usage flourishing

What’s new in 2019 is major growth in Storybook framework sub-communities:

Storybook monthly NPM downloads among in framework sub-communities

It’s thrilling to see these communities gaining critical mass. Leading the pack are Storybook for Vue (309% YTD growth), React Native (168%), Angular (420%), and HTML (893%). This growth translates into a more useful and robust platform. Every time someone adds a feature or fixes a bug it benefits everyone, no matter which framework they choose.

One of the fastest growing open source communities

Thankfully, our user growth has also translated into a flood of new contributors. According to Github’s 2019 State of the Octoverse, Storybook is the 9th fastest growing open source community in the world:

Storybook now has 860+ contributors, hailing from every continent except Antarctica. The team is not only bursting with talent, but comprised of some of the friendliest, most collaborative folks in open source.

New maintainers. Community growth helped us add new project maintainers. Storybook has an “M x N problem” of maintaining hundreds of addons and integrations (M) across dozens of different frameworks (N). Our large community helps keep the project stable and provide user support across all our frameworks, even as the product rapidly evolves.

Better documentation. Community growth has also helped us improve documentation, which is crucial to the project’s success. Storybook’s website got completely overhauled and the new site is a thing of beauty! We also upgraded Learn Storybook, Storybook’s collection of free guides for professional developers, with new tutorials and translations.

  • New 9 chapter tutorial: Design Systems for Developers
  • Supported frameworks: React, Vue, Angular, React Native, Svelte
  • Localizations: English, Español, Português, Nederlands, 简体中文

Sponsors make Storybook sustainable

Corporate stewardship is provided by Chromatic, whose team has provided technical leadership for the project since 2017 and accounted for over half of the commits in 2019.


🖼 Storybook: Making developers more productive

Just look at a few screenshots from different points in the year to see Storybook’s rapid evolution:

UI evolution from 4.x (January) to 5.0 (New UI, March) to 5.2 (SB Docs, September)

A whole new UI

5.0 also set the stage for Storybook as an open source platform. Norbert de Langen created new ways for addons to integrate with Storybook, such as toolbar buttons and tab panes, and made Storybook themable.

The future of component documentation

Earlier this year, we laid out a vision to make UI documentation dead simple to create and maintain. We delivered on that promise with the official Storybook Docs addon, a reference implementations, and guides:

Continued architectural evolution

2019’s big wins include:

  • Component Story Format (CSF) is a clean and fully portable way to write component example stories using standard ES modules. It allows stories to be imported in Jest and other testing tools, and is being adopted by other tools in the design and development space.
  • Declarative configuration is a similar effort to dramatically simplify Storybook’s configuration, improve performance, and help Storybook to interoperate with other tools.
  • Typescript. We ported Storybook’s codebase to TypeScript and also improved TS support for end users to keep up with the language’s surge in popularity this year.

Storybook’s satisfaction rating doubles

I’m thrilled to report that the percentage of happy users — developers who use Storybook and would use it again — more than doubled in 2019, increasing from 15.4% to 32.2%. These results are courtesy of State of JS 2019, the annual survey of 20,000+ Javascript developers.


🌎 Storybook’s booming ecosystem

Over 30,000 projects use Storybook

One of the keys to Storybook’s early success was its recommendation by create-react-app, the most popular tool for scaffolding React apps. In 2019, we’ve seen even more frameworks adopt Storybook as their recommended UI component explorer:

Addons for everything a developer could want

We’ve always been known for our rich addons support, but 2019 was a tipping point. This year, Storybook became the standard integration point for design tools. First, InVision built Storybook support into Design System Manager. Now, there’s an addon for every major design tool, including Sketch, Figma, Zeplin, Abstract, and Adobe XD.


🚀 2020 here we come!

Community

Product

Ecosystem


🙏 Thank you!

Special thanks

Every Storybook contributor in 2019 🙏@8beeeaaat @9renpoto @aaron-pool @adamdoyle @adamyonk @adrian-potepa @aej11a @afebbraro @afholderman @alanhchoi @alazurenko @andersos @aokiken @apanizo @apust @aromanarguello @arthurdenner @atanasster @b0c4j @baraalex @beizhedenglong @benoitdion @billfeller @bpeab @bqrichards @brandonchinn178 @canercandan @carolstran @chaseadamsio @christiancooksponge @christianliebel @christoph-fricke @christophe-g @chrsep @codebyalex @collingreen @crimx @crubier @ctavan @dakmor @danielduan @danrha @darmawanalbert @darondel-yoobic @dbendaou @dhuang612 @discostarslayer @domjacks @domoritz @domyen @donaldpipowitch @donysukardi @dsusskind @dylanpiercey @edelgado @edumoreira1506 @emilio-martinez @enagy27 @enuvid @ericcarboni @ewgenius @expe-lbenychou @ezhikov @fabianmarinog-turner @fabiradi @fforres @frederickfogerty @gaetanmaisse @gaspardip @ghengeveld @gherciu @ghondar @gongreg @good-idea @halitogunc @hansottowirtz @hasparus @hcz @himynameisdave @hipstersmoothie @hobroker @hypnosphi  @igor-dv @indigolain @jack-barry @jamesdbruner @jamesgeorge007 @jasdeepgill @jb9229 @jballin @jeffgukang @jerriclynsjohn @jessica-koch @jimmydalecleveland @joeycozza @jounqin @juliamitchelmore @jung-han @just-boris @kamahl19 @karlsander @kerbe @kerumen @kevinsuttle @kroeder @kush @kylemh @lazaroonline @lebenleben @leoyli @libetl @lonyele @lucas-burdell-karmak @lucasterra @luchanso @macrozone @mariocadenas @mathiasrando @matt-tingen @mattfelten @matthewliuswims @meirish @michaeldeboey @mrmckeb @natalia504 @naturalclar @nchudleigh @ndelangen @ndom91 @necolas @nminhnguyen @nutboltu @nzacca @pascaliske @patricklafrance @patrickteivas @pau1fitz @peeja @pierroberto @pittan @pksunkara @pmmmwh @pocka @qazzian @quentind @quramy @ramkrish2079 @rbardini @rembrandtreyes @resource11 @rmccue @robaxelsen @roydipti23 @rwieruch @rwoverdijk @sairus2k @sakito21 @schalkventer @shiatsumat @shilman @siadcock @simenbrekken @slaviczavik @smasontst @spencerbyw @squidfunk @steel @stephanemw @stereodenis @stnamring @stof @stowball @superpencil @svewag @taimoormk @testerez @thebuilder @thollander @tmeasday @tylerlee @victorgb6 @wa4-fearless-otter @xmile1 @xyshaokang @yankovsky @yosefalnajjarofficial @zaccc123

Storybook

The UI development environment you'll ♥️ to use.

Thanks to Tom Coleman and Dominic Nguyen

Michael Shilman

Written by

energetic engineer 👷 frequent flyer 🚀 eternal optimist ❤️

Storybook

Storybook

The UI development environment you'll ♥️ to use.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade