Storybook 5.3 Released, Targets Design Systems, Supports Web Components

Michael Shilman, a key Storybook contributor, recently announced the release of Storybook 5.3. The new version of Storybook strives to allow developers to build production design systems faster. Storybook users can now document their components with MDX, have a documentation site automatically generated, and integrate with popular design tools like Sketch, Figma, Adobe XD and more. Storybook 5.3 also now officially supports web components.

Shilman explained in Storybook 5.3’s release note the motivation behind the recent evolution of Storybook:

Storybook began with a simple goal: help developers build UI components and their key states.
(…)
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.

Users of the new Storybook can now write stories and docs in MDX. Towards that goal, Storybook 5.2 included the DocsPage tool to auto-generate documentation from existing stories. Storybook 5.3 goes a step further and allows developers to write fully customized documentation. Shilman explained:

MDX enables you to customize Storybook’s auto-generated documentation with your own components, mix & match DocBlocks, and loop in non-technical teammates.

The recently open-sourced ING design system is an example of a design system whose documentation relies on Storybook’s documentation features. The displayed documentation for the Tabs component originates from a 20-lea-tabs.stories.mdx .mdx file whose first lines are as follows:

import '../lea-tabs.js';
import '../lea-tab.js';
import '../lea-tab-panel.js';

<Meta title="Intro/Tabs Example" parameters={{ component: 'lea-tabs' }} />

# lea Tabs

> This is not a real implementation!
>
> It is an example of how you can reuse the functionality of Lion to create your own Style System

`lea-tabs` implements tabs view to allow users to quickly move between a small number of equally important views.

<Preview>
  <Story name="default">
    {html`
      <lea-tabs>
        <lea-tab slot="tab">Info</lea-tab>
        <lea-tab-panel slot="panel">
          Info page with lots of information about us.
        </lea-tab-panel>
        <lea-tab slot="tab">Work</lea-tab>
        <lea-tab-panel slot="panel">
          Work page that showcases our work.
        </lea-tab-panel>
      </lea-tabs>
    `}
  </Story>
</Preview>

## How to use

### Installation

(...)

Storybook 5.3’s Storybook Docs currently covers Vue, Angular, Ember, and Web components, with more frameworks planned in the future, as Storybook Docs strives to be a universal tool for UI docs.

Storybook 5.3 also shipped with new ways to connect Storybook with external design tools through an ecosystem of addons. Shilman praised the extension of the current ecosystem of addons:

First, InVision built Storybook support into Design System Manager. Now, there’s an addon for every major design tool, including Sketch, Figma, Abstract, and Adobe XD.

Storybook 5.3 now officially supports web components through the new @storybook/web-components package. The latter package strives to provide isolated component development and documentation for all web components projects, and follows the Open-WC recommendations.

The learnstorybook.com website serves as extensive documentation for the design-system-related features of Storybook. The site includes specific parts dealing with design systems workflow, documentation and distribution, in addition to the traditional section on isolated component testing. Documentation for the new @storybook/web-components package is available in the GitHub repository.

Storybook is used by front-end development teams at Airbnb, Lyft, Slack, Twitter, and more companies. It is used to build design systems like Shopify Polaris, IBM Carbon, Salesforce Lightning and more. Storybook supports popular frameworks like React, Vue, Svelte, Ember, Angular, React Native and more. Storybook also supports web components and vanilla HTML. Storybook is localized in five languages.

Storybook is available under the MIT open-source license. Contributions are welcome via the Storybook GitHub project and should follow Storybook’s contribution guidelines and code of conduct.