Introduction to Addons

Addons in Widgetbook provide a flexible and customizable way to enhance your development environment. They allow you to wrap all your stories with configurable widgets that can be controlled via Widgetbook's UI.

For example, if you want to center all your stories using the Align widget, you can use the AlignmentAddon instead of manually wrapping each story.

final config = Config(
  // ...
  addons: [
    AlignmentAddon(), 
  ],
);

The order of addons matters and it will have effect on how the story is rendered. The first addon in the list will be the outermost widget, and the last addon will be the innermost widget.

For example, if you are using both AlignmentAddon and ViewportAddon, then the ViewportAddon should always come first, otherwise the AlignmentAddon will be aligning the "viewport" widget itself, and not the story inside of it.

final config = Config(
  // ...
  addons: [
    ViewportAddon(Viewports.all), 
    AlignmentAddon() 
  ],
);

RootWidget
└── ViewportAddon // [!code highlight]
  └── AlignmentAddon // [!code highlight]
    └── Story