Build loosely-coupled, event-driven web applications with zero build tooling
LARC implements the PAN (Page Area Network) messaging protocol — a framework-agnostic message bus that enables seamless communication between components, iframes, workers, and browser tabs.
- 🚀 Zero Build Required — Drop-in
<pan-bus>element, no bundler needed - 🔌 Framework Agnostic — Works with vanilla JS, React, Vue, Lit, Angular
- 🎯 Lightweight — ~12KB core, components load on demand
- ⚡ High Performance — 300k+ messages/second, zero memory leaks
- 🔒 Security Audited — Production-ready with comprehensive security review
- 🛠️ DevTools — Chrome extension for debugging message flows
| Package | Description | Version | Links |
|---|---|---|---|
| @larcjs/core | Core PAN messaging bus | 1.0.0 | NPM · Docs |
| @larcjs/components | UI components library | 1.0.0 | NPM · Gallery |
| @larcjs/devtools | Chrome DevTools extension | 1.0.0 | Chrome Store · Docs |
| @larcjs/examples | Examples & demo apps | 1.0.0 | Examples · Apps |
| @larcjs/site | Documentation website | 1.0.0 | Live Site |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="module" src="https://unpkg.com/@larcjs/core/src/pan.js"></script>
</head>
<body>
<!-- Components load automatically -->
<pan-data-table resource="users" columns='["id","name","email"]'></pan-data-table>
<pan-inspector></pan-inspector>
</body>
</html>npm install @larcjs/core @larcjs/componentsimport '@larcjs/core';
import '@larcjs/components/pan-data-table';
// Use in your HTMLDecouple independent UI components that communicate via messages instead of direct dependencies.
Sync state across tabs, iframes, and WebSockets with built-in cross-context messaging.
Offload heavy computation to workers while maintaining clean message contracts.
Add interactive components to existing pages without framework rewrites.
- Getting Started — Quick introduction
- API Reference — Complete API docs
- Examples — 30+ progressive examples
- Component Gallery — Visual showcase
- Architecture Guide — System design
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://unpkg.com/@larcjs/core/src/pan.js"></script>
</head>
<body>
<h1>Todos</h1>
<todo-list></todo-list>
<todo-provider></todo-provider>
<pan-inspector></pan-inspector>
<script>
// Components communicate via PAN messages
// No direct coupling between todo-list and todo-provider
</script>
</body>
</html>The todo list publishes todo.add messages. The provider listens and updates state. Zero coupling!
git clone https://github.com/larcjs/core.git
cd core
npm install
npm testcd larc-core && npm link
cd ../larc-components && npm link @larcjs/core┌─────────────────────────────────────────┐
│ Application │
├──────────┬──────────┬──────────────────┤
│ Component│ Component│ Component │
│ A │ B │ C │
└────┬─────┴────┬─────┴────┬────────────┘
│ │ │
└──────────┼──────────┘
│
┌──────▼──────┐
│ <pan-bus> │ ← Message Hub
└──────┬──────┘
│
┌──────────┼──────────┐
│ │ │
┌────▼───┐ ┌──▼───┐ ┌───▼────┐
│ Worker │ │iframe│ │ Tabs │
└────────┘ └──────┘ └────────┘
We welcome contributions! Please see:
| Package | Build | Tests | Coverage | Security |
|---|---|---|---|---|
| core | ✅ | ✅ | 85%+ | ✅ |
| components | ✅ | ✅ | 80%+ | ✅ |
| devtools | ✅ | ✅ | - | ✅ |
| examples | ✅ | - | - | ✅ |
MIT © Chris Robison
All packages are licensed under the MIT License. See individual repositories for details.
- 📖 Documentation
- 💬 Discussions
- 🐛 Issue Tracker
Check out full-featured applications built with LARC:
- Invoice Studio — Professional invoice creation
- Contact Manager — CRUD with data grid
- Data Browser — Generic data exploration
- Markdown Notes — Note-taking with live preview
Build better web apps with LARC! 🚀