Storybook Addon Measure

Storybook addon for inspecting layouts and visualizing the box model.

1. Press the m key to enable the addon:

2. Hover over a DOM node

3. Storybook will display the dimensions of the selected element—margin, padding, border, width and height—in pixels.

Usage

This addon requires Storybook 6.3 or later. Measure 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-measure

Add "@storybook/addon-measure" to the addons array in your .storybook/main.js:

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

Inspiration

• Inspx by Rauno Freiberg
• Aaron Westbrook's script
• Visbug from the Chrome team