LARC — Lightweight Asynchronous Relay Core

![Version](https://github.com/larcjs/core) ![License](https://github.com/larcjs/core/blob/main/LICENSE) ![Status](https://github.com/larcjs/core)

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.

🌟 Key Features

🚀 Zero Build Required — Drop-in element, no bundler needed
🔌 Framework Complement — Reduce React/Vue bundles by 60%+, keep frameworks for complex UIs
🎯 Lightweight — ~5KB 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

📦 Packages

| Package | Description | Version | Links | |---------|-------------|---------|-------| | @larcjs/core | Core PAN messaging bus | 1.1.1 | NPM · Docs | | @larcjs/ui | UI components library | 1.1.0 | NPM · Gallery | | @larcjs/devtools | Chrome DevTools extension | 1.0.0 | Chrome Store · Docs | | @larcjs/examples | Examples & demo apps | 1.0.1 | Examples · Apps | | @larcjs/site | Documentation website | 1.0.0 | Live Site |

⚡ Quick Start

CDN (No Installation)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="module" src="https://unpkg.com/@larcjs/core@3.0.1/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 Installation

npm install @larcjs/core @larcjs/ui

import '@larcjs/core';
import '@larcjs/ui/pan-data-table';

// Use in your HTML

🎯 Use Cases

Microservices & Microfrontends

Decouple independent UI components that communicate via messages instead of direct dependencies.

Real-Time Collaboration

Sync state across tabs, iframes, and WebSockets with built-in cross-context messaging.

Web Workers Integration

Offload heavy computation to workers while maintaining clean message contracts.

Progressive Enhancement

Add interactive components to existing pages without framework rewrites.

📚 Documentation

Getting Started — Quick introduction
API Reference — Complete API docs
Examples — 30+ progressive examples
Component Gallery — Visual showcase
Architecture Guide — System design

🔍 Example: Simple Todo App

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://unpkg.com/@larcjs/core/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!

🛠️ Development

Clone a Package

git clone https://github.com/larcjs/core.git
cd core
npm install
npm test

Link Packages Locally

cd core && npm link
cd ../components && npm link @larcjs/core

🌐 Architecture

┌─────────────────────────────────────────┐
│            Application                  │
├──────────┬──────────┬──────────────────┤
│ Component│ Component│    Component     │
│    A     │    B     │       C          │
└────┬─────┴────┬─────┴────┬────────────┘
     │          │          │
     └──────────┼──────────┘
                │
         ┌──────▼──────┐
         │  <pan-bus>  │  ← Message Hub
         └──────┬──────┘
                │
     ┌──────────┼──────────┐
     │          │          │
┌────▼───┐  ┌──▼───┐  ┌───▼────┐
│ Worker │  │iframe│  │ Tabs   │
└────────┘  └──────┘  └────────┘

🤝 Contributing

We welcome contributions! Please see:

📊 Status

| Package | Build | Tests | Coverage | Security | |---------|-------|-------|----------|----------| | core | ✅ | ✅ | 85%+ | ✅ | | components | ✅ | ✅ | 80%+ | ✅ | | devtools | ✅ | ✅ | - | ✅ | | examples | ✅ | - | - | ✅ |

📄 License

All packages are licensed under the MIT License. See individual repositories for details.

🆘 Support

🎉 Featured Apps

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! 🚀