Back to blog

Zero-config Storybook

Simple setup, instant productivity

loading
Michael Shilman
@mshilman
Last updated:

Storybook’s greatest strength is also its weakness.

Thousands of leading teams from Airbnb to BBC choose Storybook because it works with diverse frameworks and tech stacks. Unfortunately, the abundance of configuration options can make Storybook tough to set up.

As maintainers, our goal is to get you setup quickly while preserving robust config options for advanced teams. That’s why I’m excited to share new 6.0 features that are a giant leap forward towards zero config Storybook.

  • 🧰 Built-in TypeScript support: Out of the box TS compatibility.
  • 💎 Storybook Essentials: Best practice addons for every project.
  • 🔌 Project Integrations: Presets for popular application frameworks.

🗡 Flexibility is a double-edged sword

Storybook can be configured to match any build setup. It has an expansive API and rich addon ecosystem to accommodate countless use cases.

Flexibility enables Storybook to adapt to varying needs of giant companies and ambitious startups alike. But Storybook’s initial setup can be daunting for new users.

Ideally, Storybook setup is zero-config yet fully adjustable for larger projects. Over the past year the team made huge strides toward zero-config.

Now in 6.0, it’s even easier to integrate Storybook.

🧰 Built-in TypeScript

Storybook 6.0’s supports TypeScript using Babel transpilation with optional asynchronous type checking using fork-ts-checker-webpack-plugin. It’s similar to what Create React App uses.

TypeScript continues to be adopted by popular tools including NextJS, React Native CLI, Expo, Yarn, Jest, Apollo, and Storybook itself. Creating a seamless TS experience is crucial to Storybook’s future success.

Now when you add Storybook to your TS project, it just works. See the documentation for more info and advanced options.

💎 Storybook Essentials

Storybook is fully customizable thanks to hundreds of third party addons that do everything from accessibility checks to design handoff.

Storybook Essentials is a curated collection of addons by the core team that are considered core to the out-of-the-box Storybook experience. They are tightly integrated and ship by default with new Storybook installations.

Essentials currently includes the following:

  • Docs: Best practice auto-generated documentation using your stories
  • Controls: Tinker with component properties to explore different states
  • Actions: Log UI actions to verify your components’ interaction behavior
  • Viewport: See responsive behavior against different device viewports
  • Backgrounds: See your component against different colors and styles
  • Toolbars: Custom toolbar UI for theming, i18n, and more

We’ll prioritize their maintenance, support, documentation, and interoperability for Essentials. We’ll also do our best to ensure they work smoothly with the hundreds of other Storybook addons and in hosted Storybook services like Chromatic.

Learn more about essentials in the documentation.

🔌 Project Integrations

A final way in which Storybook setup is getting easier is through integrations that preconfigure Storybook to work seamlessly with popular app frameworks.

We’re excited to see a wave of new third-party integrations (🔥) which are being developed, published, and maintained by the app framework communities themselves.

Here’s a list of integrations by framework:

If you want to partner on a new integration, please DM me on Twitter!

⚡ 1 minute install

Try out Built-in Typescript and Essentials today in Storybook 6.0.

You can bootstrap Storybook into an existing app:

npx sb init

If it’s a Typescript app, it should work straight away with no extra configuration needed. Essentials also comes pre-installed.

Alternatively, to upgrade an existing Storybook:

npx sb upgrade

Typescript is built in, so if you’ve configured your Storybook for typescript, you should remove that configuration.

Once you’ve upgraded, you can install Essentials with npm or yarn and update your .storybook/main.js

$ yarn add @storybook/addon-essentials --dev

// main.js
module.exports = {
  addons: ['@storybook/addon-essentials'],
};

Get involved

Typescript support was added by Brody McKee and Michael Shilman (me!). Essentials was developed by Michael Shilman, Zoltan Olah, Tom Coleman, and Clément Dungler.

Storybook is maintained by 1000+ open source contributors and guided by a steering committee of top maintainers. If you are interested in contributing, check out Storybook on GitHub, create an issue, or submit a pull request. Donate on Open Collective. Chat with us in Discord — a maintainer is usually online.

Join the Storybook mailing list

Get the latest news, updates and releases

6,613 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 6 Migration Guide

Level up your component development platform
loading
Michael Shilman

Storybook 6.0

Production-grade component development
loading
Michael Shilman

Storybook Controls

Live edit UI components with no code
loading
Michael Shilman
Join the community
6,613 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