v1.1.1 ยท 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.

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/components@1/src/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.

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.

Ready to Build?

Explore 20+ progressive examples and 6 production-ready demo applications

Browse Examples Try Demo Apps Read the Docs View on GitHub