Storybook 6.2

Future-proof component development

Storybook is the industry standard UI development workshop for components and pages. It's used by Netflix, Slack, Target, Shopify, Stripe, and thousands of teams around the world.

As a modern frontend developer, you’re in a constant cat-and-mouse game to stay on top of ecosystem changes. Every Storybook release contains hundreds of adaptations to try to make that easier for you, whether you’re upgrading a library, or migrating from one framework to another.

Storybook 6.2 is a giant leap towards future-proofing your UI development workflow that includes significant improvements and new features.

  • 🚀 Frameworks: Vue 3, Svelte Native story format
  • 📦 Packaging: NPM 7, Yarn 2, ESM
  • 🛠 Bundlers: Webpack 5, pluggable Vite, ESBuild, and Snowpack
  • 🎛 Controls refresh with new JSON editor, color picker, URL params
  • 💯 Hundreds more improvements

Next-gen frameworks: Vue 3, Svelte

Storybook supports every major web framework: React, Vue, Angular, Web components, Svelte, Ember, and over a dozen more. We aim for a first-class developer experience for each one, but it’s not easy. Fortunately, we’re making huge strides towards this goal.

Vue 3. Storybook for Vue 3 is a ground-up rewrite for the latest major installment of Vue.js. Vue 3 features better ergonomics, better performance, and new APIs for managing large apps. And now Storybook support. Read more: Storybook for Vue 3.

Svelte. Storybook for Svelte was supercharged with a new Svelte-native API for writing stories (component examples). It’s also got top-to-bottom improvements such as better auto-documentation and decorator support. Read more: Storybook for Svelte.

These investments are not just great for the Vue and Svelte communities, but for Storybook as a whole. This work defines what “first-class” framework support means, and in turn makes it easier to achieve in subsequent frameworks. For example, Angular Ivy support is coming to SB 6.3, and loads of Web-components improvements are also in the works.

Future of packaging: npm 7, Yarn 2, ESM

Remember when Yarn 2 came along and pulled the rug out from under the Javascript ecosystem? Now npm  7 is causing a commotion. Change is hard, but we’re hustling to ride the wave.

Yarn 2. Storybook is fully Yarn 2 PnP compatible. We’ve also updated some of our dependencies for compatibility. We love Yarn and are excited to help push the project forward.

npm 7. npm 7 handles peer dependencies completely differently, and unfortunately Storybook relies on the old semantics. In the short term, we’ve patched things over to unblock our users. In the long term we’re reworking our dependency structure to better support npm 7.

ESM. In addition to package manager support, we’re also moving to ECMAScript Modules (ESM), which facilitate bundler tree-shaking and can be efficiently and asynchronously loaded by modern browsers. Since 6.2 is a minor version update, we are shipping both ESM and CommonJS (CJS) bundles. We’re scheduled to remove CJS in Storybook 7.0.

Future of bundlers: Webpack 5, Vite, Snowpack, ...

Last but not least, the biggest area of change in today’s Javascript is bundlers. Bundlers are the foundation of the frontend toolchain, so new bundlers create new challenges and opportunities. Don’t worry, Storybook has you covered.

Webpack 5. Webpack is the most popular bundler, and v5 is Webpack’s biggest upgrade in years, with foundational performance improvements and new features like module federation for distributed publication. Experimental webpack5 support is opt-in in Storybook 6.2.

Pluggable builders. 6.2 also contains a pluggable builder abstraction which opens the door for supporting new bundlers like Vite, Snowpack, ESBuild, and more. This API is still in its early stages, but we’re actively working to future-proof Storybook against these big changes.

For more on these changes, read the Storybook for Webpack 5 feature post.

Controls addon overhaul

In addition to everything mentioned above, the rest of Storybook is also improving. The biggest area of improvement is Controls: auto-generated UI for manipulating your component examples in Storybook.

Controls now include a finely-crafted JSON editor and color control:

They also now support complex data types that are not JSON serializable, like functions, React elements, or BLOBs:

argTypes: {
  label: {
    options: ['Normal', 'Bold', 'Italic'],
    mapping: { Bold: <b>Bold</b>, Italic: <i>Italic</i> },
  },
}

And they even sync to your story URL to make it easier to share dynamic settings and integrate with end-to-end tests.

We’ve also made it possible to specify matchers that help Storybook infer controls for non-scalar data types like Date and color:

export const parameters = {
  controls: {
    matchers: { color: /(background|color)$/i, date: /Date$/ },
  },
};

In short, we’re doubling down on controls to make a best-in-class playground for exploring component states. And we plan to continue this evolution in future releases!

And much more

Storybook is continuously improving at every level. Other highlights from 6.2 include:

6.2 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching 6.2.0-* for the full list of changes.

1 minute install

Upgrade an existing Storybook project to 6.2:

npx sb upgrade

If you’re coming from 5.x or earlier, check out the Storybook 6 Migration Guide.

Alternatively, for a fresh install, bootstrap Storybook into an existing app:

npx sb init

Get involved

Professional UI developers rely on Storybook every day. When you adopt Storybook, you get the confidence that it'll work with the latest production-ready tools.

The project is maintained by 1,250+ open source contributors and guided by a steering committee of top maintainers. If you are interested in contributing, check out Storybook on GitHub, create an issue, or submit a pull request. Donate on Open Collective. Chat with us in Discord — a maintainer is usually online. Stay up to date with Storybook news on Twitter and by signing up for our mailing list.

Helpful resources from the community

Credits

Storybook 6.2 is brought to you by the following contributors.

@43081j @7rulnik @acdzh @andrefarzat @andyrichardson @arcanis @bodograumann @cmrn @commenthol @cone56 @crixx @cyberstrike @daleseo @dominictwlee @domyen @doublejosh @dschungelabenteuer @earshinov @eirslett @emclaug2 @eric-burel @etlovett @evhaus @fabiansellmann @fredx87 @gabiseabra @gaetanmaisse @geisterfurz007 @ghengeveld @gregorynative @guilhermewaess @horusgoul @hypnosphi @iamandrewluca @imgbotapp @j3rem1e @jakubriedl @jamesgeorge007 @jonniebigodes @ka2jun8 @kuschti @kylegach @leettaylor @livthomas @lwyj123 @maael @mandarini @marksy @maslade @matamatanot @matheo @micahgodbolt @murtukov @ndelangen @nishargshah @oanaom @oscard0m @pascaloliv @patricklafrance @penguinofwar @phaistonian @phated @philipbordallo @philsawicki @phunkren @pocka @profanis @qoalu @rolias @russellwpatterson @ryanml @saschwarz @scooooooooby @selrond @shilman @teimurjan @thebuilder @themightypenguin @thibaudav @thomasvaeth @tmeasday @tomastomaslol @tooppaaa @tskarhed @urish @visualfanatic @vkrol @winkervsbecks @wkich @yannbf @yngvebn @yozhezhi @yutasugimura @zraineri

Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify