⚠️ MOVED: This addon was moved to the Storybook monorepo

Storybook Addon Measure (moved)

Storybook addon for inspecting layouts and visualizing the box model.

1. Hold down the m key:

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

1. This addon requires Storybook 6.3 or later. Install the latest with npx sb upgrade --prerelease

2. Install the addon:

npm i -D @storybook/addon-measure

3. 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