You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@storybook/addon-outline

Package Overview
Dependencies
Maintainers
11
Versions
932
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
11
Created

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

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

Package last updated on 24 Jul 2024

Did you know?

Socket

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
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc