Manipulate the Storybook Canvas with the Addon Toolbar

The Storybook Addon Toolbar provides one-click access to essential visual debugging tools.

  • Open a Button sample story.
  • And click the Shortcuts cog to ensure that the Addons Toolbar is visible.
  • When enabled, you’ll find it above the Storybook Canvas.

These addons come from the Essential Addons package. They are avaible in default installations of Storybook but can be removed if necessary.

Let’s take a quick tour, from left to right.

Zoom
Use the Zoom addon to inspect fine detail and see how a component handles scale.
Background
Use the Background addon to ensure visual versitility on a number of backdrounds.
Grid
Use the Grid addon to underlay a grid. I don’t find these useful but maybe you can tell how they should be used 😆
Viewport
Use the Viewport addon for responsive testing. No more pawing at the edge of your browser. Select different device sizes to simulate how your components handles multiple devices.
Measure
Use the Measure addon to overlay a Chrome DevTools style box model visualization. And it activates on any element you hover.

Finally,

Outline
Use the Outline addon to track down those layouts bugs where one component is quiently applying invisible layout.

Storybook essential addons, and the Addon Toolbar make it easy for developers and non-developers alike to quickly inspect and debug robust UI components.