Socket
Socket
Sign inDemoInstall

@storybook/addon-outline

Package Overview
Dependencies
2
Maintainers
26
Versions
759
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-outline

Outline all elements with CSS to help with layout placement and alignment


Version published
Maintainers
26
Weekly downloads
4,213,324
decreased by-7.96%

Weekly downloads

Package description

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

Changelog

Source

8.0.5

  • Addon-docs: Fix react-dom/server imports breaking stories and docs - #26557, thanks @JReinhold!
  • Automigrations: Fix missing support for mts vite config - #26441, thanks @drik98!
  • CLI: Improve Yarn berry error parsing - #26616, thanks @yannbf!
  • React-Docgen: Make sure to be able to handle empty unions - #26639, thanks @kasperpeulen!
  • Viewport: Fix missing style - #26530, thanks @jpzwarte!

Readme

Source

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.

React Storybook Screenshot

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.

Keywords

FAQs

Last updated on 27 Mar 2024

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc