https://github.com/github/storybook-addon-performance-panel
A Storybook Addon for tracking web performance
https://github.com/github/storybook-addon-performance-panel
Last synced: 12 days ago
JSON representation
A Storybook Addon for tracking web performance
- Host: GitHub
- URL: https://github.com/github/storybook-addon-performance-panel
- Owner: github
- License: mit
- Created: 2026-02-19T12:30:50.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2026-02-22T04:38:58.000Z (16 days ago)
- Last Synced: 2026-02-22T10:54:02.063Z (16 days ago)
- Language: TypeScript
- Homepage: http://github.github.com/storybook-addon-performance-panel/
- Size: 1.01 MB
- Stars: 147
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: CODEOWNERS
- Security: SECURITY.md
- Support: SUPPORT.md
Awesome Lists containing this project
README
# @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
Add the addon to your Storybook configuration:
```ts
// .storybook/main.ts
const config = {
addons: [
'@github-ui/storybook-addon-performance-panel/preset',
],
}
```
```ts
// .storybook/preview.ts
import {definePreview} from 'storybook/preview-api'
import addonPerformancePanel from '@github-ui/storybook-addon-performance-panel'
export default definePreview({
addons: [addonPerformancePanel()],
})
```
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](./packages/storybook-addon-performance-panel) | The addon — collectors, panel UI, and types |
| [packages/docs](./packages/docs) | Documentation site built with Storybook |
## Documentation
See the [addon README](./packages/storybook-addon-performance-panel/README.md) 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
```bash
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 docs # Start the docs site locally
```
## Contributing
See [CONTRIBUTING.md](./CONTRIBUTING.md) for development setup and pull request guidelines.
## License
[MIT](./LICENSE)