Back to blog

In-app tour for new users

Write your first story in just 3 minutes

loading
Joe Vaughan
โ€” @joevaugh4n
Last updated:

When you start learning a new skill, thereโ€™s nothing better to have than a great teacher. That's also true for Storybook. The world's leading frontend teams use Storybook to build their UIs, but it can feel tricky to understand the basics if you're learning by yourself.

Today, I'm excited to share a sneak peek of the in-app tour developer experience in Storybook 7.1. It teaches new users how to get started with Storybook from within Storybook! Thatโ€™s helpful for all devs, whether theyโ€™re new to frontend or just new to Storybook.

  • ๐Ÿง‘โ€๐Ÿซ Guided tour of Storybook
  • ๐Ÿ“ Write your first story
  • โœ… Try it in alpha (React only for now)

Wait, but why?

New users often mention that itโ€™s tough to take the leap from first installing Storybook to actually using it in their apps. Our docs show you how to write stories, but you shouldnโ€™t have to tab between sites to learn how Storybook works.

Weโ€™re building onboarding into the new Storybook experience to show how easy it is to write stories for all the variations of your app.

Guided Storybook tour

The guided tour is designed to give new folks a sense of what it's like to actually use Storybook. It launches when Storybook initializes in a new React project to show you how the different parts of Storybook's UI work together.

The sidebar shows the contents of your Storybook project.

The Storybook sidebar, explained in our new guided tour. The caption reads: 'Storybook is built from stories. Storybook uses stories to represent the key states supported by each of your components. For example: this Button component has four stories.'

Preview canvas is the isolated iframe where your components render. And controls let you interactively change props and data given to a component to see how it responds, without touching the underlying component code.

How to write a story tutorial

Stories are the key concept of Storybook. Each story represents a different state of your UI. For example, a Button with multiple props could be rendered in several different ways. Storybook's superpower is letting you see all these variations in one place, without you having to load up your app and manually click around to reproduce a state.

The new onboarding teaches you how to write your first story inside the app. It starts with a tour of the essential metadata that underpins the story format.

Next youโ€™ll adapt code snippets to generate your own story.

Try it today

Try the new onboarding tutorial now in the latest 7.1 prerelease version. Run this in a new React project without stories:

npx storybook@next init

Weโ€™d love to hear what you think, so please share your feedback with us.

Have an issue setting it up? Open up a GitHub Issue or head to the #prerelease support forum in our community Discord.

What's next?

Our goal to help you learn Storybook starting with an in-app tour. Next, weโ€™ll add more tutorial content about Storybook testing and documentation. If you're looking to learn more about these topics, check out our guides and the YouTube channel.

If you're an experienced user and you'd like to help us develop this tour further (or add compatibility for other frameworks), we'd love for you to join our open-source team and contribute. Find out more about getting started or chat with our maintainers in Discord.

Will you support other frameworks?

Yup, weโ€™re incrementally rolling it out to Storybookโ€™s core frameworks Vue, Angular, and Web Components in the future.

Join the Storybook mailing list

Get the latest news, updates and releases

6,615 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

Storybook 7.1

Storybook 7.1 is here! Featuring in-app onboarding, zero-config styling support, TypeScript code snippets, and more.
loading
Michael Shilman

Two new Storybook versions and faster release cycle

July 2023 Storybook update
loading
Joe Vaughan

Zero-config support for Tailwind, MUI, styled-components, and Emotion

New zero-config support for JavaScript's most popular styling libraries
loading
Shaun Evening
Join the community
6,615 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI