Manipulate the Storybook Canvas with the Addon Toolbar
The Storybook Addon Toolbar provides one-click access to essential visual debugging tools.
- Open a
Buttonsample 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.