Back to blog

Storybook 6.2

Future-proof component development

loading
Michael Shilman
โ€” @mshilman
Last updated:

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

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

How to actually test UIs

Testing techniques used by leading engineering teams
loading
Varun Vachhar

Storybook addons for CSS

Better workflows for styling components
loading
Varun Vachhar

Storybook for Svelte

The workshop for cybernetically enhanced components
loading
Michael Shilman
Join the community
6,615 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI