Developers use Storybook because it focuses them on one thing: the user interface.

When you build UI in isolation with Storybook, you sidestep backend flakiness and unreliable data APIs. That makes UI development faster and more satisfying.

Storybook 6.3 streamlines the tasks developers do everyday: styling and testing. It includes handy new CSS tools, test utils, and revamped integrations.

  • 📐 Style: measure and outline DOM elements
  • 🔌 Test: Reuse stories in Jest, Testing Lib, Cypress, and more
  • 🚀 Frameworks: Angular 12 Ivy, Lit 2 Web Components
  • 🛠 Builders: Webpack 5 stable, Vite
  • 📦 Packaging: Modern ESM performance option
  • 💯 Hundreds more improvements

Try it today with a 1-minute install: npx sb upgrade

Read announcement: Storybook 6.3 »

❤️ Dominic, DX @ Storybook


Storybook for Svelte

Thousands of Svelte developers use Storybook. @storybook/svelte accounts for over 10% of total Svelte usage by NPM downloads.

Coming to Storybook 6.2, the Svelte integration was revamped from the bottom up. It improves every facet of your developer experience, from the way you write stories to the underlying implementation.

That’s why we’re thrilled to bet on Svelte’s continued success. Here’s what’s included in the upcoming 6.2 release (available as an RC now):

  • Zero-config setup w/ built-in TypeScript support
  • A Svelte-native story format for capturing component states
  • Auto-generated controls and documentation
  • Updated tutorials and documentation

Continue reading »

Dive deeper into Svelte & Storybook with community-created guides, articles, and books.

❤️ Dominic from Storybook


Learn how to use Storybook with Vue 3 »

Thousands of Vue developers use Storybook to build UIs faster. Ever since integrating with Vue in 2017, usage has steadily grown to over 500k npm downloads a month.

Vue 3 is the latest major installment of Vue.js that features better ergonomics, better performance, and new APIs for managing large apps.

We’re thrilled to ship official Vue 3 support that includes all of Storybook’s core features:

  1. Zero-config setup w/ built-in TypeScript support
  2. Auto-generated controls and documentation
  3. Automated snapshot and visual testing
  4. Hundreds of addons: A11y, Perf, GraphQL, Theming, etc.

❤️ Dominic from Storybook


New addon catalog, tutorials, and docs

Storybook is the industry standard for UI component development.

One of the main reasons for Storybook’s popularity is customizability. With Storybook’s addon API, developers can add new features, automate workflows, and integrate with their favorite libraries. What’s more, they can share those addons with the community as reusable packages.

The community has already created over 200 public addons. This vibrant ecosystem makes Storybook more productive for everyone.

Now, we’re excited to take the Storybook addon ecosystem to the next level. Ecosystem 2.0 includes:

  • 🧩 Centralized addon catalog
  • 📕 In-depth tutorial
  • 📐 Comprehensive documentation


Storybook has over 200 addons that enable new features and integrations. Similar to VSCode extensions, addons are a convenient way to customize Storybook to fit your UI development workflow.

Addons are made by teams at Atlassian, Intuit, and Rakuten. They power integrations with Apollo, Figma, and Sketch.

But until now, finding the right addon involved plunging the depths of NPM. We’re revamping the addon ecosystem to highlight the best addons and help you build your own.

What’s new?

  • Beta of addon catalog
  • Full API docs with code samples

Read on: Revamping Storybook’s addon ecosystem »


Addon Catalog beta with updated documentation

Storybook has over 200 addons that enable new features and integrations. Similar to VSCode extensions, addons are a convenient way to customize Storybook to fit your UI development workflow.

The addon ecosystem is one of the main reasons why teams adopt Storybook. But until now, finding the right addon for your use case involved plunging the depths of NPM. I’m excited to highlight Storybook’s best addons in the new addon catalog (beta).

Who uses addons and why?

Storybook’s addon API is one of its core innovations. Not only does it allow users to extend and configure Storybook in countless ways, but many of these addons…


Automate and extend Storybook

Addons are one of the top reasons for Storybook’s popularity. The community has over 200 addons that extend your UI development workflow. But using addons is tricky.

It’s tough to figure out how to create an addon, much less share it with others. Most addons are made by ambitious developers or professional teams like Ticketmaster, Rakuten, and eBay.

That’s why I’m thrilled to give you a sneak peak of Storybook’s new Addon Catalog app and in-depth guide. We’re making it easier to create, find, and reuse addons.

What are addons?

Before we begin, let’s recap why addons exist in the first place. Addons…


Addons are one of the top reasons for Storybook’s popularity. The community has over 200 addons made by developers at eBay, Intuit, Rakuten, and more.

But using addons is tricky.

I’m thrilled to share a sneak peak of Storybook’s new addon ecosystem. We’re simplifying how to create, find, and reuse addons. Here’s how:

  • New Addon Catalog app
  • Rewritten API docs with code samples
  • New guide for building an addon from scratch

Read full post: Addon Catalog sneak peak »


New UX for browsing components faster

I’m thrilled to share Storybook’s new component finder and sidebar (coming to 6.1). It’s designed to help you navigate large component libraries fast.

👉 Read the full announcement

The more components you have the harder it is to find what you need. Global teams like BBC and The Guardian maintain thousands of stories. This release makes it easy to browse and find components no matter how big your library.

  • Instant search UX
  • Fuzzy matching (for typos)
  • Jump between recently opened components
  • Expand and collapse all folders
  • Snappier UI with keyboard navigation

Try it now in the 6.1 beta release: npx sb upgrade --prerelease

Thanks for being with us,
Dominic


Navigate component libraries fast

The more components you have the harder it is to find what you need.

Storybook is the industry standard for organizing component libraries. But with teams moving toward component driven UIs, everything from components to full pages are now built in Storybook.

It’s unwieldy to manage hundreds of components and thousands of stories. The new component finder and sidebar (coming to 6.1) is purpose built to help developers navigate large component libraries.

  • 🔍 Find components fast with fuzzy search
  • 🔄 Jump between recently opened components
  • 🔭 Expand and collapse all nodes
  • ⚡️ Snappier UI with keyboard navigation

Why now?

Storybook was originally…

Dominic Nguyen

Design at Chroma & Storybook — prev Apollo GraphQL, Meteor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store