@storybook/addon-outline
Advanced tools
Outline all elements with CSS to help with layout placement and alignment
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.
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);
});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.
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.
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.
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.
FAQs
Outline all elements with CSS to help with layout placement and alignment
The npm package @storybook/addon-outline receives a total of 3,140,671 weekly downloads. As such, @storybook/addon-outline popularity was classified as popular.
We found that @storybook/addon-outline demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.