storybook-addon-profiler

A performance profiler panel addon for Storybook — real-time FPS, INP, CLS, memory, and more. Works with every Storybook framework.

Technologies

About

storybook-addon-profiler brings real-time browser performance metrics directly into your Storybook panel. The panel updates every 50ms while a story is active, giving you immediate visibility into frame rate, input responsiveness, main thread health, layout stability, and memory usage — all color-coded against Web Vitals thresholds so slow paths are immediately visible.

Key Features

• Real-time FPS, frame time, dropped frames, and paint time tracking
• Input & responsiveness metrics: INP, FID, pointer latency, and per-interaction breakdowns
• Main thread monitoring: Long Tasks, Total Blocking Time, and DOM mutation churn
• Layout & stability: CLS, forced reflows, style writes, and CSS variable mutations
• Memory & rendering: JS heap, GC pressure, DOM nodes, and compositor layers
• Per-element timing via data-profiler attribute for targeted component profiling
• Works with React, Vue, Angular, Svelte, and all other Storybook frameworks