Preset

Enable Outline for every story

Now that the decorator is out of the way, let's use a preset to wrap every story with it.

Presets allow you to combine a bunch of different Storybook configurations and apply them in one go. Some addons are purely responsible for configuring Storybook and have no UI. For example, preset-create-react-app and preset-nuxt. These are called Preset addons.

Our preset is split into two parts:

  1. manager.js for registering the addon
  2. preview.js for specifying global decorators

Update the preview to just use the withGlobals decorator, which will automatically wrap all stories.

src/preset/preview.js
import { withGlobals } from '../withGlobals';

export const decorators = [withGlobals];
Note: the withRoundTrip decorator from the Addon Kit is an example of two-way communication between the story and an addon. However, we don't require that for our addon and can delete it.

Success! You now have a fully functional addon in your local Storybook. In the final chapter, learn how to list your addon in the catalog. That way you can share with your team and the Storybook community.

toggling the tool toggles the outlines

Next Chapter
Add to catalog
Share your Storybook addon with the community