Storybook 6.2
By: Michael Shilman
Tags: Svelte, Releases, Webpack, Storybook, Vue

Storybook 6.2

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: