mirror of
https://github.com/github/storybook-addon-performance-panel
synced 2026-07-21 15:53:47 +00:00
No description
- TypeScript 83.8%
- MDX 10.3%
- CSS 5.9%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
|
|
||
| .changeset | ||
| .devcontainer | ||
| .github | ||
| packages | ||
| .gitignore | ||
| .npmrc | ||
| .nvmrc | ||
| .prettierrc.json | ||
| CODE_OF_CONDUCT.md | ||
| CODEOWNERS | ||
| CONTRIBUTING.md | ||
| eslint.config.ts | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| PUBLISHING.md | ||
| README.md | ||
| SECURITY.md | ||
| SUPPORT.md | ||
| tsconfig.json | ||
@github-ui/storybook-addon-performance-panel
A Storybook addon that provides real-time performance monitoring for stories. It displays comprehensive metrics including frame timing, input responsiveness, memory usage, React profiling, and more.
Quick Start
React projects
Add the addon to your Storybook configuration:
// .storybook/main.ts
const config = {
addons: [
'@github-ui/storybook-addon-performance-panel',
],
}
// .storybook/preview.ts
import addonPerformancePanel from '@github-ui/storybook-addon-performance-panel'
import {definePreview} from '@storybook/react-vite'
export default definePreview({
addons: [addonPerformancePanel()],
})
Non-React projects (HTML, Vue, Svelte, Web Components, etc.)
Use the ./universal subpath — no React dependency:
// .storybook/main.ts
const config = {
addons: [
'@github-ui/storybook-addon-performance-panel/universal',
],
}
// .storybook/preview.ts
import addonPerformancePanel from '@github-ui/storybook-addon-performance-panel/universal'
import {definePreview} from '@storybook/html-vite' // or vue-vite, svelte-vite, etc.
export default definePreview({
addons: [addonPerformancePanel()],
})
The universal entry collects all browser-level metrics (frame timing, CLS, INP, etc.) but omits React Profiler metrics. The React Performance section is automatically hidden in the panel.
The performance panel appears as a "⚡ Performance" tab at the bottom of Storybook.
Project Structure
This is an npm workspaces monorepo:
| Package | Description |
|---|---|
| packages/storybook-addon-performance-panel | The addon — collectors, panel UI, and types |
| packages/examples-react | React docs storybook (@storybook/react-vite) |
| packages/examples-html | HTML docs storybook (@storybook/html-vite) |
| packages/storybook-config | Shared storybook config (theming, features, Vite helpers) |
| packages/website | Documentation site (TanStack Start + MDX) |
Documentation
See the addon README for full documentation including:
- Architecture and how the addon works
- All metrics collected (frame timing, input, main thread, LoAF, CLS, React, memory)
- Metric thresholds and color coding
- Browser compatibility
- Interpreting metrics and troubleshooting guide
Development
npm install # Install dependencies
npm run build # Build the addon
npm test # Run tests
npm run lint # Lint
npm run tsc # Type check
npm run dev # Build + start storybooks and site with portless
# → http://examples-react.localhost:1355 (React)
# → http://examples-html.localhost:1355 (HTML)
# → http://site.localhost:1355 (Docs site)
npm run docs # Start just the React docs storybook
npm run docs:html # Start just the HTML docs storybook
Contributing
See CONTRIBUTING.md for development setup and pull request guidelines.