@washingtonpost/storybook-addon-web-vitals

See how your component fairs according to web vitals

Usage no npm install needed!

<script type="module">
  import washingtonpostStorybookAddonWebVitals from 'https://cdn.skypack.dev/@washingtonpost/storybook-addon-web-vitals';
</script>

README

Storybook Addon Web Vitals

Storybook Addon Web Vitals can be used for instant feedback on loading, interactivity, and layout shift metric for each story. We use the web-vitals.

We report on FID, CLS, and LCP.

React Storybook Screenshot

Getting Started

Requires Storybook 6.1 or later

First, install the addon

npm i -D @washingtonpost/storybook-addon-web-vitals

Then, add following content to .storybook/main.js:

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

Usage

See toolbar for feedback