Storybook 5.3

Build production design systems faster

Storybook began with a simple goal: help developers build UI components and their key states. This is the easiest, most efficient way to think through component hierarchies.

We nailed this workflow and, as a result, Storybook is now the tool of choice for teams across the industry at places like Airbnb, Lyft, Slack, Twitter, and thousands more.

However, the bar on UI development has also been raised. In 2020, it’s not enough to provide great tooling for building and testing components. Today’s modern frontend teams also need to document and package their components into reusable design systems.

Storybook has been rapidly evolving to meet this challenge. Now I’m excited to announce our latest release — Storybook 5.3 supercharges building and documenting production design systems:

This is all fully compatible with Component Story Format (CSF) and the entire Storybook ecosystem of tools and workflows.

One of the biggest features of Storybook 5.3 is a whole new way to write Markdown documentation and stories (component examples) side-by-side in the same file. The new story format, MDX, is a graceful combination of flexibility and ergonomics.

On one hand, it simplifies the process of creating fully custom docs for developers because you can define stories and docs all at once in the same place.

On the other hand, Markdown is natural and familiar for non-technical teammates. Designers and product managers can edit UI documentation themselves in Storybook (without needing your help).

MDX is a significant developer experience upgrade whose positive impacts are already beginning to surface via Storybook’s alpha/beta users. In a nutshell, MDX makes it easier for multi-functional teams to create a single source of truth for UI engineering.

Read the Storybook MDX announcement »

Our vision with Storybook Docs is to help developers automatically generate best practice UI docs with zero configuration. Initially, we launched with React. Now, Docs has first-class support for Vue, Angular, Ember, and Web Components.

We designed Storybook Docs to be cross-framework from the ground up (like the rest of Storybook), but there are features like Props Table generation that are inherently framework-specific.

In Storybook 5.3, we’ve optimized Storybook Docs for Vue, Angular, Ember, and Web components. We’re committed to helping community members optimize SB Docs for their favorite framework with an implementation checklist.

Learn about the new frameworks Storybook Docs supports »

Storybook configuration also gets a major upgrade in Storybook 5.3. You can now perform most common-case configurations in a single file, main.js.

It’s a huge win for developer ergonomics because you can declaratively configure your stories, configure addons, and even configure webpack (!) in a single file. The new config is backwards-compatible with the old format.

Viewed through the lens of the Storybook open source platform, declarative config sets the stage for a new wave of performance and integration opportunities that weren’t possible before.

Learn more about main.js declarative configuration »

In addition to improvements to the core Storybook product, there’s also a whole flurry of new ways to connect Storybook with your favorite design tools, thanks to our huge addon ecosystem.

Storybook has always been known for rich addons support. In 2019 the project hit a tipping point, with Storybook becoming the standard integration point for design tools.

Read about all the ways to integrate design tools and Storybook »

In addition to basic Storybook support, Lars and Thomas are also pioneering an alternative packaging of Storybook that contains a static build of Storybook’s “manager UI.” This makes it easier to embed Storybook into the development server of your choice, since Storybook’s default serving mode relies on Webpack.

For a deep dive on this effort, please read Thomas’ post:

✅ Standalone CSF. Now it’s easy to implement Storybook’s Component Story Format (CSF) in other design and dev tools using the @storybook/csf library. The broader ecosystem has already started to adopt it:

Storybook 5.3 is packed with new features, but doesn’t contain any breaking changes as far as we know. We’ve got a 5.0 upgrade guide if you’re coming from 3.x/4.x. If you’re already on 5.x, you can upgrade like this:

Once you’re on 5.3, adding Docs to your project is a snap:

Then add it to the addons field of your .storybook/main.js config:

Sign up to the Storybook mailing list to get updates in your inbox.

Related posts:

Some thoughts on Christmas from a coffee shop. A lot of these are problems I’ve been thinking about or directly encountered. If you’re building any of these, let’s chat me@varadhja.in. I’d love to…

Water is one of the most essential resources on our planet, and its treatment is critical to ensure the health and well-being of our communities. Water treatment facilities clean water so that it is…

Liberum Wallet 1.0 version launch in advance because we would like to fulfill the high demanding of mining on Liberum before its main net come out on 31st Jan. The beta version may not so perfect as…