Join live session: Thu, 11am EDT, Storybook 9 release & AMA

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 INP, CLS, and LCP.

React Storybook Screenshot

Getting Started

Requires Storybook 8

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 on INP, CLS and LCP

CLS changes will highlight offending elements based on results from web-vitals

New results are logged to the console as they come in to provide the full data object from web-vitals

Made by
  • luke.connors
    luke.connors
  • wrneff
    wrneff
  • mcdoh
    mcdoh
  • floresa
    floresa
  • lavanderoi
    lavanderoi
  • taliatrackim
    taliatrackim
Work with
    Angular
    Ember
    HTML
    Marko
    Mithril
    Preact
    Rax
    React
    Riot
    Svelte
    Vue
    Web Components
Tags