Unlocking the Power of Storybook: Introducing the Framework API
As a frontend development tool, Storybook has become an industry standard for developing isolated UI components and pages. With its ability to enable better, faster, and future-proof frontend development, it’s no wonder thousands of teams rely on it every day. However, this popularity also brings certain challenges, particularly when it comes to supporting other libraries and frameworks in the JavaScript landscape.
The Need for the Framework API
For Storybook to achieve its goals, it’s crucial that components render and behave exactly as they do in your production environment. If this isn’t the case, all of Storybook’s benefits related to isolation, reusability, and quality are lost. One of Storybook’s significant challenges is supporting other libraries and frameworks, which is where the Framework API comes in.
What the Framework API Does
The Framework API, introduced in Storybook 7, addresses the configuration issue by providing a set of configurations for Storybook, targeting particular combinations of builders and renderers. At its core, the Framework API helps Storybook mimic your project’s build and rendering configurations, making it easier to set up and use.
How the Framework API Works
Installing the new frameworks is extremely straightforward. To enable the desired framework in your project’s Storybook configuration, you need to adjust the .storybook/main.js file. This tells Storybook to reference the correct framework and automatically picks up on the included settings. In some cases, you may need to extend the framework configuration using the webpackFinal function.
Inside a Storybook Framework
A Storybook Framework consists of three main files: preset.js, preview.js, and types.ts. The preset.js file sets up all the relevant configurations for your builder and renderer, while the preview.js file configures how your stories render. The types.ts file provides TypeScript types for your framework.
Frameworks You Can Use with the Storybook Framework API
At the time of writing, Storybook offers a list of official frameworks that you can use, targeting various combinations of builders and renderers, or off-the-shelf frontend frameworks. These include HTML + Vite or webpack 5, Preact + Vite or webpack 5, React + Vite or webpack 5, Server-side-rendered HTML + webpack 5, Svelte + Vite or webpack 5, Vue 2 or 3 + Vite or webpack 5, Web Components + Vite or webpack 5, Angular, Ember, Next.js, and SvelteKit.
Using the Framework API with Popular Stacks
Let’s take a closer look at how the Framework API works with popular stacks. We’ll explore three examples: React with webpack, Vue 3 with Vite, and Next.js. Each of these examples demonstrates how the Framework API simplifies the setup process and provides sensible defaults for your Storybook project.
React with Webpack
The React with webpack framework consists of only two files: types.ts and preset.ts. The types.ts file includes all the necessary TypeScript types, while the preset.ts file sets up the core export, specifying which builder and renderer to use.
Vue 3 with Vite
The Vue 3 with Vite framework is similar to the React with webpack framework, with only two files: types.ts and preset.ts. The main difference is that it uses Vite as the builder instead of webpack.
Next.js
The Next.js framework is more elaborate, given the number of Next.js-specific features that exist. It uses React and webpack under the hood, which becomes apparent when comparing the setups. The framework also includes a preview.tsx file, which configures the general Storybook project and adds decorators to match Next.js’s setup.
Summary
In this article, we’ve taken a deep dive into the Storybook Framework API, exploring why we need it, what it does, and how it works. We’ve also examined three Storybook Frameworks for popular stacks, highlighting their similarities and differences. With this knowledge, you’re ready to get started with the Framework API and create your own custom frameworks.