Panel Custom Components
Guidance for building custom UI components that bridge Python (Panel) and JavaScript. Covers JSComponent (vanilla JS), ReactComponent (React/JSX), AnyWidget (cross-platform), and MaterialUIComponent patterns.
Features
- Decision guide to choose component type (JSComponent vs ReactComponent vs AnyWidget vs MaterialUI)
- Two-phase workflow: POC checklist and finalize steps
- Core patterns: state sync, lifecycle hooks, importmaps, external libraries, testing with Playwright
- Many code examples for common patterns and troubleshooting tips
When to use
- Wrapping JS libraries (D3, Leaflet, Chart.js) inside Panel components
- Creating interactive widgets with bidirectional Python↔JS state sync
- Integrating Material UI themed components via panel-material-ui
Notable content included
- Minimal POC template and validation checklist
- Playwright test examples and server utilities for UI testing
- Best practices and DOs/DON'Ts for production readiness
[Source repository] (https://github.com/marcskovmadsen/holoviz-mcp)
Not yet audited
This skill has not been reviewed by our automated audit pipeline yet.
