github

github / storybook-addon-performance-panel

Public

A Storybook Addon for tracking web performance

github.github.comstorybook-addon-performance-panel
197
1
100% credibility
Found Feb 21, 2026 at 133 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A Storybook addon that displays real-time performance metrics for component stories including frame timing, input responsiveness, memory usage, layout shifts, and React rendering details.

How It Works

1
đź“° Discover performance insights for UI previews

You hear about a handy tool that checks how smooth and responsive your component previews are in real-time.

2
âž• Add the tool to your setup

You simply include the performance checker in your preview configuration with a quick line.

3
🔄 Refresh your preview viewer

You restart the viewer, and everything loads up just like before but better.

4
⚡ Spot the Performance tab

A shiny new ⚡ Performance panel appears at the bottom, ready to show live stats.

5
🧪 Load and play with a story

You pick a component story, click around, scroll, and watch it in action.

6
đź“Š See instant feedback

Metrics like speed, click response, memory, and renders update live with colors showing good or bad.

🎉 Spot and fix slowdowns

You identify bottlenecks, tweak your components, and celebrate silky-smooth performance.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 133 to 197 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is storybook-addon-performance-panel?

This TypeScript Storybook addon adds a real-time performance panel to your stories, tracking FPS, frame times, INP, CLS, long tasks, memory usage, and React render profiling. It color-codes metrics against Web Vitals thresholds and lets you inspect slow interactions by highlighting elements directly in the preview. Developers get instant feedback on jank, blocking, and re-renders without leaving Storybook, perfect for React or Angular projects using storybook addon docs or essentials.

Why is it gaining traction?

Unlike basic storybook addons like a11y, actions, or themes, this delivers comprehensive perf diagnostics—including script attribution for long frames and React P95 durations—in a single tab. Real-time sparklines, reset buttons, and "Inspect" links for slowest clicks make debugging intuitive, standing out from generic storybook interactions or mock addons. It pairs well with storybook test runner for CI perf gates or github actions in storybook github examples.

Who should use this?

React frontend devs building complex UIs in Storybook who chase dropped frames or slow inputs during story development. Teams optimizing Core Web Vitals on storybook github pages deploys, or Angular shops extending storybook addon links and designs with perf checks. Skip if you're just prototyping—best for perf-sensitive apps like dashboards or lists.

Verdict

Promising early addon (94 stars, 1.0% credibility) with strong github storybook addon docs and troubleshooting guides, though low adoption signals it's unproven at scale. Try it in your storybook react workflow if perf regressions plague reviews—solid foundation, just needs community miles.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.