Sign inSign up

Introducing Learn Storybook

A tutorial that teaches you Storybook by building a working UI

loading
Dominic Nguyen
โ€” @domyen
Last updated:

TLDR: Weโ€™re launching Learn Storybookโ€Šโ€”โ€Ša fast, approachable, and free tutorial to get started with Storybook. Walk through essential UI component techniques as you build a UI from scratch. Stay in sync with real code commits.

If you work on the frontend like me you may have heard of Storybook (originally called React Storybook). At first you probably dismissed it. Another day, another dev tool.

Yet an increasing number of developers and savvy designers use Storybook to build UIs. Teams at Airbnb, Dropbox, IBM, Lonely Planet, and Mozilla rely on it everyday. And Storybook has grown beyond React to support nearly every major view layer. By now, you might be wondering what the hype is all about?

A tool for the future of UI development

To make sense of Storybook letโ€™s take a brief detour to the frontend landscape. UI development is undergoing a renaissance inspired by new view layers like React, Vue, and Angular.

Folks no longer think in pages but in components. Components still output the familiar HTML, CSS, and JavaScript triumvirate, but the means of generating that output has evolved.

Throw attributes at a component and watch it render different permutations.

With React, developers have new tools like props, context, and state to render UI. The core innovation shared by these โ€œmodernโ€ view layers is the component construct which makes it easy to break down complex UIs into simple modules.

Component-oriented development requires new tooling to help developers concentrate on building UI components. Storybook is the most popular and fully featured UI component tool. Itโ€™s also the only tool that supports most view layers.

OK, but what does Storybook do?

Storybook helps you build durable UIs faster. It runs alongside your app in development mode and provides a โ€œsandboxโ€ to build UI components in isolation of business logic or context from your app. This allows you to focus on clearly defining the component API โ€“the set of inputs a component takes.

Developers create โ€œstoriesโ€ by passing a unique set of inputs to a component to yield different variations (similar to specs in unit testing). These stories are indexed and documented in Storybook so you can visually check on them during development or revisit later during testing.

Learn Storybookโ€Šโ€”โ€Ša hands-onย tutorial

More frontend teams than ever rely on Storybook. But there arenโ€™t many resources on how to use Storybook from first principles.

Tom Coleman and I created Learn Storybook, a free 9 chapter tutorial, to teach tried-and-true patterns for component development using Storybook.

Youโ€™ll walk through essential UI component techniques while building a UI from the ground up in Storybook (great for project-based learners).

Build Taskbox, a task management UI

What youโ€™llย learn

Youโ€™ll learn best practices sourced from professional teams, core maintainers, and the fantastic Storybook community. In addition, get the wider context to understand why those best practices exist. Each chapter walks through different aspects of using Storybook and is synced to a real commit in a working demo app.

  • ๐Ÿ— Setup the development environment
  • ๐Ÿ”จ Build a simple component in isolation
  • ๐Ÿ›  Assemble a composite component out of simple components
  • ๐Ÿ’ก Wire in data with containers
  • ๐Ÿ’ป Construct a screen
  • ๐Ÿšฆ Test a UI component library
  • ๐Ÿš€ Deploy Storybook

Who this is greatย for

Storybook should be approachable to everyone whether youโ€™re senior, junior, developer, or designer. If you follow along, youโ€™ll grasp the core concepts of isolated UI component development and build a full UI in Storybook without a problem. Itโ€™s great for:

  • ๐Ÿ‘ฉโ€๐Ÿ’ป Experienced developers who have heard of Storybook and want an efficient tutorial that highlights key features and workflow
  • ๐Ÿ‘ฉโ€๐ŸŽ“ New developers who want to learn a tool used by professional teams at Github, Artsy, and Priceline.
  • ๐Ÿ‘ฉโ€๐ŸŽจ Product designers interested in UI components and the nuts & bolts of building component libraries.

I hope Learn Storybook helps you, well, learn Storybook!

Contributors welcome

Learn Storybook is open source. Our goal is to introduce Storybook to the world. Weโ€™re looking for Vue and Angular contributors (the example code is currently React) and help translating the tutorial to other languages.

Did this article help you?

Get free UI development guides and tutorials like this emailed to you.

4,482 developers and counting

Weโ€™re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

Access control and integrations

Chromatic update
loading
Dominic Nguyen

The Delightful Storybook Workflow

How productive teams get the most out of Storybook
loading
Dominic Nguyen

Live View & email notifications

Chromatic update: Simplify reproductions and get notified of changes via email
loading
Dominic Nguyen
Product
PricingAboutJobsTerms of ServicePrivacyStatusSecurity โ€ข SOC 2Contact Sales
Chromatic
ยฉ Chroma Software Inc. Made by the maintainers of Storybook.