@storybook/addon-outline

What is @storybook/addon-outline?

The @storybook/addon-outline package is a Storybook addon that allows developers to add an outline around every DOM element in the Storybook UI. This is particularly useful for visual debugging, helping to see the boundaries of each component and ensuring that layouts are behaving as expected. It can be toggled on and off within the Storybook interface.

What are @storybook/addon-outline's main functionalities?

Outline Toggle

This code sample demonstrates how to programmatically toggle the outline visibility using the addon's API. It registers the addon and uses the channel to emit an event that toggles the outline.

import { addons } from '@storybook/addons';
import { ADDON_ID, TOOL_ID } from '@storybook/addon-outline';

addons.register(ADDON_ID, (api) => {
  const channel = addons.getChannel();
  // Toggle the outline visibility
  channel.emit(TOOL_ID, true);
});

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.

README

The README file is missing

Changelog

9.0.8

• Addon Docs: Fix SyntaxHighlighter "Copy" button by avoiding potentially mocked clipboard - #31682, thanks @ghengeveld!
• Addon Themes: Define missing React dependencies - #31688, thanks @ghengeveld!
• Addon-vitest: Fix adding with --skip-install failing missing packageJson invariant - #31720, thanks @JReinhold!
• AddonDocs: Remove export of blocks - #31724, thanks @ndelangen!
• Automigration: Enhance removeEssentials to convert options - #31658, thanks @ndelangen!
• CLI: Don't install addon-onboarding during minimal installs - #31616, thanks @ghengeveld!

[!NOTE]
Version 9.0.7 was skipped because of a bad release of eslint-plugin-storybook.