<img src="https://user-images.githubusercontent.com/347490/104764662-b5358980-5735-11eb-8ef8-7058b6be43da.png" width="89" height="32">

# 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](https://github.com/GoogleChrome/web-vitals).

We report on INP, CLS, and LCP.

![React Storybook Screenshot](https://user-images.githubusercontent.com/347490/104764861-f9288e80-5735-11eb-9198-14de8a066a40.png)

## Getting Started

Requires Storybook 8

First, install the addon

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

Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):

```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


See how your component fairs according to web vitals. 

@washingtonpost/storybook-addon-web-vitals

See how your component fairs according to web vitals

maddoxnelson

kevin.schaul

stevethedev

luciovilla

uncompiled

rekha26

andrew.frye

subs-npm-builder

shruthagandla

jakekara

adityajain15

linorabolini

benjaki

calcantara

1313davidlee

aaronsteckelberg

adrianblanco

alexisbarnes

allisonnmann

alyssa.fowers

alyssabartuch

anthonyjpesce

apbest

aramzs

artmsilva

arturgalocha

ashlynstill

ashtol

bdgross

betchavarria

braforda

briannaschroer

cashack

cecepascual

chiquiesteban

chloemeister

chrisrukan

courtney-kan

dankeating

davisshaver

dmoriarty6

dpham5

dsantamarina

ealvarez79

eewright

essiekim

floresa

fontc

gregoryauld2014

hdormido

hermionewy

iuraizee

jakecrump

jasonvuong

jbrown4

jjalcantara

jkoo87

jmuyskens

joemfox

joemoore-post

julia.ledur

kankelcr

kastningj

kate.rabinowitz

kevinuhrmacher

khan.salauddin

klimenkovd

lennybronner

leslie-s

luke.connors

macallah

madisonwalls

mcdoh

meganwalter

mokhtar.ali

nader_heidari

naema

nealhumphreywapo

nickkirkpatrick

nwalker_wp

ptnielsen

rowhawn

ruxk

sberhanu

scarothers

sergio.pecanha

shellytan

shikha-sub

solomonsscott

stephanie.clark

taliatrackim

thompsond3

timmeko

tmac0201

tobefrankhj

trann_wapo

tylerremmel

vsingarayar

wrneff

yutaochen

storybook-addon-web-vitals

(Experimental) An ambiguous license classifier was found.

What is an ambiguous license classifier?

Ambiguous License Classifier

Source files are encoded using a non-standard text encoding.

What is bad text encoding?

Bad text encoding

Package version is not a valid semantic version (semver).

What is bad semver?

Bad semver

Package has dependencies with an invalid semantic version. This could be a sign of beta, low quality, or unmaintained dependencies.

What is bad dependency semver?

Bad dependency semver

Source files contain bidirectional unicode control characters. This could indicate a Trojan source supply chain attack. See: trojansource.codes for more information.

What are bidirectional unicode control characters?

Bidirectional unicode control characters

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack.

What is bin script confusion?

Bin script confusion

This Chrome extension includes a content script '{scriptFile}' that runs on websites matching '{matches}'.

What are Chrome extension content scripts?

Chrome Extension Content Script

This Chrome extension requests access to '{host}'.

What are Chrome extension host permissions?

Chrome Extension Host Permission

This Chrome extension uses the '{permission}' permission.

What are Chrome extension permissions?

Chrome Extension Permission

This Chrome extension requests broad access to websites with the pattern '{host}'.

What are Chrome extension wildcard host permissions?

Chrome Extension Wildcard Host Permission

Semantic versions published out of chronological order.

What is a chronological version anomaly?

Chronological version anomaly

Project maintainer's SSH key has been compromised.

What is a compromised SSH key?

Compromised SSH key

(Experimental) Copyleft license information was found.

What do I need to know about license files?

Copyleft License

Contains a Critical Common Vulnerability and Exposure (CVE).

What is a critical CVE?

Title

Critical CVE

Contains a high severity Common Vulnerability and Exposure (CVE).

What is a CVE?

High CVE

Uses debug, reflection and dynamic code execution features.

What is debug access?

Debug access

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

What is a deprecated package?

Deprecated

(Experimental) Contains a known deprecated SPDX license exception.

What is a deprecated SPDX exception?

Deprecated SPDX exception

(Experimental) License is deprecated which may have legal implications regarding the package's use.

What is a deprecated license?

Deprecated license

Package name is similar to other popular packages and may not be the package you want.

What is a typosquat?

Possible typosquat attack

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

What is dynamic require?

Dynamic require

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

What is an empty package?

Empty package

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

What is environment variable access?

Environment variable access

(Experimental) Something was found which is explicitly marked as unlicensed.

Explicitly Unlicensed Item

Package optionally loads a dependency which is not specified within any of the package.json dependency fields. It may inadvertently be importing dependencies specified by other packages.

What are extraneous dependencies?

Name

Extraneous dependency

Contains a dependency which resolves to a file. This can obfuscate analysis and serves no useful purpose.

What are file dependencies?

File dependency

Accesses the file system, and could potentially read sensitive data.

What is filesystem access?

Filesystem access

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

What are wildcard dependencies?

Wildcard dependency

Contains a dependency which resolves to a remote git URL. Dependencies fetched from git URLs are not immutable and can be used to inject untrusted code or reduce the likelihood of a reproducible install.

What are git dependencies?

Git dependency

Contains a dependency which resolves to a GitHub URL. Dependencies fetched from GitHub specifiers are not immutable can be used to inject untrusted code or reduce the likelihood of a reproducible install.

What are GitHub dependencies?

GitHub dependency

AI has identified unusual behaviors that may pose a security risk.

What is an AI-detected potential code anomaly?

AI-detected potential code anomaly

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

What is AI-detected potential typosquatting?

AI-detected possible typosquat

@washingtonpost/storybook-addon-web-vitals

Storybook Addon Web Vitals

Getting Started

Usage

Keywords

Related posts

@washingtonpost/storybook-addon-web-vitals

Storybook Addon Web Vitals

Getting Started

Usage

Keywords

Related posts

Nx npm Packages Compromised in Supply Chain Attack Weaponizing AI CLI Tools

CISA’s 2025 SBOM Guidance Adds Hashes, Licenses, Tool Metadata, and Context