Storybook Addon Measure

Storybook addon for inspecting layouts and visualizing the box model.

Hold down the modifier key:

MacOS: ⌥ Option
Windows: Alt

Hover over a DOM node
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. Install the latest with npx sb upgrade --prerelease
Install the addon:

npm i -D @storybook/addon-measure

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

module.exports = {
  addons: ["@storybook/addon-measure"],
};

Inspiration

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

Contributing

Development scripts

Clone the repository and install dependencies.

yarn

yarn start runs babel in watch mode and starts Storybook
yarn build build and package your addon code

Release Management

Setup

This project is configured to use auto for release management. It generates a changelog and pushes it to both GitHub and npm. Therefore, you need to configure access to both:

NPM_TOKEN Create a token with both Read and Publish permissions.
GH_TOKEN Create a token with the repo scope.

Add them to the .env file at the root of your project:

GH_TOKEN=<value you just got from GitHub>
NPM_TOKEN=<value you just got from npm>

Creating a releasing

To create a release locally you can run the following command, otherwise the GitHub action will make the release for you.

yarn release

That will:

Build and package the addon code
Bump the version
Push a release to GitHub and npm
Push a changelog to GitHub

edoardocavazza/addon-measure