Storybook Docs sneak peek

Turning stories into living documentation

Michael Shilman
Apr 16 · 5 min read

Wait, but why?

Storybook provides the story construct that captures key component states. With low effort you get basic component documentation, so they are fantastic for nimble teams.

Storybook makes it dead simple to create design systems

How to scale UI libraries

What if you could press a button and export a beautiful standalone design system ready for your team/users to consume?

How it works

  • 📦 Doc Blocks: A set of documentation components that serve as the building blocks for your docs, available in Storybook and embeddable in any documentation system.
  • 📕 Component Story Format: A new format for authoring stories that is more user-friendly and makes it easier to embed Stories in other contexts.
  • 📄 MDX support: Expressive doc authoring, integrated with Storybook’s UI and tooling.
  • 📤 Templates & Static Export: Best practice design systems implemented in Storybook, and templates that make it easy for anybody to document using their component libraries effectively.
Canvas, Props, Type, Preview, Colors, Icons

Doc Blocks

The first phase of Storybook Docs is building a core set of components for documenting components and stories. Specifically:

  • Props. Document component inputs in a table
  • Type. Show typography scaling and usage
  • Preview. Embed arbitrary stories
  • Colors. Show your color palette
  • Icons. Document your icon set

Component Story Format

Storybook’s current story format exposes Storybook’s data structure (the “story store”) as part of the authoring experience. This makes the authoring experience more cumbersome than it needs to be. It also makes it harder to embed stories in other documentation systems.

MDX Support

The third aspect of Storybook Docs is MDX support. MDX is Markdown for the component era. MDX embeds JSX in Markdown, allowing you to use Markdown’s terse syntax (such as # heading) and JSX for more advanced components. And Storybook’s MDX is compatible with all the view layers we support, including Vue, Angular, and many others.

Screencast of SB Docs proof-of-concept

Templates & Static Export

Doc Blocks, Component Story Format, and MDX support give developers versatile tools to solve any number of documentation-related use cases.

  1. Template-ize: Build those features into an off-the-shelf template that encodes best practices for everybody to use.
  2. Export: Make it easy to statically export a standalone documentation site, build-docs that mirrors build-storybook usage. Specifics still TBD.

Get involved

Storybook is maintained by amazing open source contributors and guided by a steering committee of top maintainers.

Storybook

The UI development environment you'll ♥️ to use.

Michael Shilman

Written by

energetic engineer 👷 frequent flyer 🚀 eternal optimist ❤️

Storybook

Storybook

The UI development environment you'll ♥️ to use.