Storybook Performance Panel Addon
github.com/github/storybook-addon-performance-panel- Category
- Developer Tools
- Rank
- No. 637Tools index
- Pricing
- Open Source
- Platform
- web
- Type
- TOOL
- Builder
- @github
- GitHub
- 423 stars
- Latest release
- @github-ui/storybook-addon-performance-panel@1.1.4
- Date
About
A Storybook addon that provides real-time performance monitoring for UI components. It tracks comprehensive metrics including frame timing, input responsiveness, memory usage, and React profiling to help developers optimize component performance.
What it does
It adds a dedicated panel beneath each Storybook story and gathers measurements through preview decorators. The standard entry combines browser instrumentation with React render profiling. A separate universal entry supports HTML, Vue, Svelte, and Web Components while hiding React-specific results.
Why it's ranked here
This is a strong choice for teams already using Storybook as a component laboratory. It covers browser behavior and React rendering in one interface, supplies a React-free option, documents thresholds and interpretation, and configures browser tests across Chromium, Firefox, and WebKit.
What's good
The framework split is thoughtful. Non-React users avoid a React dependency yet retain browser measurements, while React users gain mount, update-duration, and memoization data. Automatic panel registration keeps setup small. The build also validates exports and generated types outside watch mode.
Tradeoffs
Its value is tied to Storybook stories, so it does not replace production monitoring or application-wide performance analysis. React profiling disappears in universal mode. Repository development requires Node 22 or newer, and the supplied material describes interactive diagnosis rather than automated regression enforcement.
How to use it well
Use it while developing or troubleshooting components in Storybook. Compare stories, exercise interactions, and interpret the documented thresholds before optimizing. Choose the universal entry for non-React frameworks and the default entry for React profiling. Pair it with production telemetry or regression tooling when performance must be tracked beyond isolated stories.
Technical notes+
packages/storybook-addon-performance-panel/preset.ts registers manager.js through managerEntries, while packages/storybook-addon-performance-panel/manager.tsx creates the story-only ⚡ Performance panel. packages/storybook-addon-performance-panel/preview.ts composes withPerformanceMonitor and withReactProfiler; packages/storybook-addon-performance-panel/index-universal.ts instead loads preview-universal and exports the framework-agnostic decorator and parameter type. packages/storybook-addon-performance-panel/tsdown.config.ts emits ESM browser and Node entries, externalizes Storybook and React packages, generates declarations outside watch mode, and runs publint plus API type checks. packages/storybook-addon-performance-panel/vitest.config.ts separates Node tests from Playwright-backed browser tests across Chromium, Firefox, and WebKit. The root package.json declares npm workspaces, module semantics, and Node >=22.
Observed
- License
- MIT
- Primary language
- TypeScript, including TSX for the manager interface
- Packaging
- npm workspaces monorepo with package @github-ui/storybook-addon-performance-panel
- Interface
- Storybook addon panel with default, universal, and React component package entries
- Framework support
- Default React integration plus a React-free entry for HTML, Vue, Svelte, and Web Components
- Module format
- ESM builds for browser preview, manager, and Node preset entries
- Test platforms
- Node unit tests and Playwright browser tests configured for Chromium, Firefox, and WebKit
- Development runtime
- Root workspace declares Node.js 22 or newer
Read from README.md, package.json, packages/website/vite.config.ts, packages/storybook-config/index.ts, packages/storybook-config/githubTheme.ts, packages/storybook-addon-performance-panel/index.ts, packages/storybook-addon-performance-panel/preset.js, packages/storybook-addon-performance-panel/preset.ts, packages/storybook-addon-performance-panel/preview.ts, packages/storybook-addon-performance-panel/manager.tsx, packages/storybook-addon-performance-panel/index-react.ts, packages/storybook-addon-performance-panel/tsdown.config.ts, packages/storybook-addon-performance-panel/vitest.config.ts, packages/storybook-addon-performance-panel/index-universal.ts, packages/storybook-addon-performance-panel/preset-universal.ts.
What it can do
Monitor real-time component performance
Storybook stories → Live performance metrics dashboard
Track frame timing performance
UI component interactions → Frame rate and timing data
Measure input responsiveness
User input events on components → Response time metrics
Monitor memory usage
Component lifecycle and state changes → Memory consumption reports
Profile React component performance
React components and their render cycles → React profiling data and optimization insights
Analyze non-React component performance
Vanilla JavaScript UI components → Performance metrics for non-React projects
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.