@storybook/addon-outline

Storybook Addon Outline

Storybook Addon Outline can be used for visually debugging CSS layout and alignment inside the preview in Storybook. Based on Pesticide, it draws outlines around every single element in the preview pane.

Usage

Requires Storybook 6.1 or later. Outline is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:

npm i -D @storybook/addon-outline

Then, add following content to .storybook/main.js:

export default {
  addons: ['@storybook/addon-outline'],
};

You can now click on the outline button or press the o key in the toolbar to toggle the outlines.

Similar packages

Other packages similar to @storybook/addon-outline

@storybook/addon-backgrounds

Similar to @storybook/addon-outline, the @storybook/addon-backgrounds addon enhances the visual testing capabilities of Storybook by allowing developers to change the background color or image of the preview pane. While @storybook/addon-outline focuses on outlining elements for layout debugging, @storybook/addon-backgrounds focuses on testing components against different backgrounds.

@storybook/addon-measure

The @storybook/addon-measure provides functionality somewhat similar to @storybook/addon-outline by allowing developers to measure and inspect the spacing and alignment of elements in their stories. While @storybook/addon-outline outlines elements to visually debug layouts, @storybook/addon-measure provides tools for precise measurement, complementing the visual debugging process.