v2.0.0 · PAN v1 Compliant · Production Ready

Build Loosely-Coupled
Web Applications

A production-ready messaging bus for coordinating web components, micro-frontends, and framework integrations.
Zero dependencies. Framework agnostic. 5KB core. 60+ components ready to use.

View Examples Demo Apps Read Docs

Why LARC?

⚡

Framework Integration

Use alongside React, Vue, Angular, or vanilla JS. PAN messaging enables seamless coordination without tight coupling. Reduce your framework footprint by 60%+.

🔌

Component Coordination

PAN messaging protocol enables web components to communicate effectively without prop drilling or tight coupling. Build truly reusable component libraries.

🎯

True Interoperability

Mix React, Vue, and LARC components on the same page. They all speak PAN. One design system, every framework.

🪶

Tiny Bundle Size

5KB core vs 500KB+ for React+MUI. Load components on-demand. Only pay for what you use.

🚀

Zero Build Required

Drop a script tag and start building. Works from file://, no webpack, no bundlers, no configuration.

🌐

Rich Component Library

60+ production-ready components: data tables, forms, charts, modals, authentication flows. Enterprise-grade UI elements that work anywhere.

🔐

Built-in Authentication

JWT authentication with auto-header injection. Developers never write Authorization headers. Auto-refresh tokens.

🔍

DevTools Included

Built-in Inspector component lets you watch message flow, filter topics, and debug in real-time.

Why LARC Exists

React, Angular, Vue — they solved problems that absolutely needed solving at the time. But the web has evolved since then. Many of those features now exist natively — standardized, built-in, fast, and universally available. LARC builds on what the platform provides.

The Browser Has Matured

Modern frameworks solved 2010's problems. Custom Elements, ES Modules, Shadow DOM, async/await, CSS Grid — the browser now handles what used to require heavy abstraction layers.

Web Components Need a Nervous System

Web Components give you 80% of what you need. LARC provides the missing 20% — the coordination layer. Just as a car's sensors and motors communicate over a CAN bus without knowing each other's internals, LARC components coordinate through PAN.

Builds Should Be Optional

The friction of modern toolchains — webpack configs, Babel presets, dependency hell — shouldn't be mandatory for every project. Drop a script tag, refresh your browser, see your change. That's how the web was designed to work.

Read the Full Philosophy

Get Started in Seconds

Drop a script tag and start building. No build tools required.

<!doctype html>
<!-- Drop one script tag, then use any component. That's it! -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@larcjs/core@2.0.0/pan.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.

Perfect For

Reducing Bundle Size

Replace Material-UI/Ant Design with LARC components. Save 400-500KB instantly.

Design Systems

Build once, use in React apps, Vue apps, Angular apps. One codebase, every framework.

Micro-Frontends

Different teams, different frameworks, coordinating via PAN without tight coupling.

Legacy Modernization

Incrementally upgrade jQuery/Backbone apps. Drop in LARC components, no rewrite needed.

Progressive Enhancement

Layer interactive features onto existing pages without heavy frameworks.

Rapid Prototyping

Build and iterate quickly without build tooling or configuration overhead.

True Multi-Framework Integration

This isn't theoretical. React, Vue, and vanilla JS components all coordinate through the same PAN bus on the same page. No wrapper libraries. No adapters. They just work together.

React Vue 3 Vanilla JS PAN Bus

Different teams can use different frameworks while sharing the same design system and coordinating through standardized messages. One codebase. Every framework.

See Hybrid Demo

// React component subscribes to PAN
useEffect(() => {
  pan.subscribe('cart.updated', (items) => {
    setCartItems(items);
  });
}, []);

// Vue component publishes to PAN
const addToCart = (item) => {
  pan.publish('cart.add', item);
};

// Vanilla component listens
pan.on('cart.*', (msg) => {
  this.updateBadge(msg.data.length);
});

Learn LARC In-Depth

Two comprehensive books cover everything from philosophy to production deployment. Written in the O'Reilly tradition with working code examples throughout.

Tutorial

Learning LARC

by Christopher Robison

Start here if you're new to LARC. A progressive tutorial that builds from "Hello World" to production applications. Learn the philosophy, understand the architecture, and master the patterns through hands-on examples.

📖 15 chapters 💻 50+ examples

Read Learning LARC

Reference

Building with LARC