A lightweight DOM-native message bus for framework-agnostic components.
Zero build. Zero dependencies. Just pure web standards.
Drop a script tag and start building. Works from file://, no webpack, no bundlers, no configuration.
Works seamlessly with React, Vue, Lit, Svelte, or vanilla JS. Mix and match frameworks in the same page.
Components communicate via topics, not imports. Build truly independent, composable UI components.
Core library is under 200 lines. All 21 components together are just 128KB. Zero runtime dependencies.
Built-in Inspector component lets you watch message flow, filter topics, and debug in real-time.
REST, GraphQL, PHP connectors. Web Worker support. SSE bridges. Schema-driven forms. CRUD components.
JWT authentication with auto-header injection. Developers never write Authorization headers. Auto-refresh tokens. Works everywhere.
Custom lightweight test runner. CLI and browser-based testing. No TypeScript, no build step. Pure JavaScript tests.
Copy this into an HTML file and open it. That's it.
<!doctype html>
<!-- Drop one script tag, then use any component. That's it! -->
<script type="module" src="https://chrisrobison.github.io/pan/src/components/pan-autoload.mjs"></script>
<!-- Components load automatically (including pan-bus!) -->
<x-counter></x-counter>
<pan-inspector></pan-inspector>
✨ All components load automatically when they appear in the DOM.
The <pan-bus> is automatically created for you.
No imports, no customElements.define(), no bundler.
Build independent teams' components that communicate without tight coupling.
Create reusable UI components that work in any framework or vanilla JS.
Layer interactive features onto existing pages without heavy frameworks.
Build and iterate quickly without build tooling or configuration overhead.
Gradually migrate between frameworks while maintaining interoperability.
Teach modern web patterns without the complexity of build systems.
Explore 18+ progressive examples and 5 production-ready demo applications