Web Vitals

See how your component fairs according to web vitals

View on Github

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

Made by
  • daniellersaul
    daniellersaul
  • bantupallik
    bantupallik
  • unconstruct
    unconstruct
  • stevefuenteswp
    stevefuenteswp
  • bokanm
    bokanm
  • rekha26
    rekha26
Work with
    Angular
    Ember
    HTML
    Marko
    Mithril
    Preact
    Rax
    React
    Riot
    Svelte
    Vue
    Web Components
Tags