Production-ready UI web components built on the PAN messaging bus
A comprehensive library of framework-agnostic UI components that communicate via the PAN (Page Area Network) messaging system. Build complex UIs with zero coupling between components.
- 🎨 57+ Production Components — Tables, forms, grids, charts, modals, and more
- 🔌 Zero Coupling — Components communicate only through PAN messages
- 🎯 Framework Complement — Use with React/Vue/Angular to reduce bundle size by 60%+
- 🚀 Advanced State Management — Cross-tab sync, offline-first, persistence, undo/redo
- 🔒 Security Audited — 0 critical vulnerabilities (full audit)
- 🎨 Themeable — CSS custom properties for complete styling control
- ♿ Accessible — ARIA attributes and keyboard navigation
- 📦 No Build Required — Load components on demand via CDN
Typical React Dashboard:
React + ReactDOM: 172 KB
Material-UI or Ant Design: 300-500 KB
State Management: 20-50 KB
Router: 20 KB
────────────────────────────────────
Total (before your code): 512-742 KB
LARC Approach:
PAN Core Bus: 5 KB
Components (on-demand): 2-10 KB each
Only load what you use: 30-100 KB typical
────────────────────────────────────
Savings: 60-85% smaller
Real Example: A dashboard with sidebar, header, data table, charts, and modals:
- React + MUI: ~650 KB
- LARC Components: ~80 KB
- Result: 87% smaller bundle
npm install @larcjs/components @larcjs/core<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Load LARC Core autoloader -->
<script type="module" src="https://unpkg.com/@larcjs/core@1.1.1/src/pan.js"></script>
</head>
<body>
<!-- Components load automatically on demand -->
<pan-data-table
resource="users"
columns='["id", "name", "email"]'>
</pan-data-table>
<!-- Inspector for debugging -->
<pan-inspector></pan-inspector>
</body>
</html>import '@larcjs/core';
import '@larcjs/components/pan-data-table';
import '@larcjs/components/pan-form';
// Components are now registered and ready to useEnterprise-grade data grid with sorting, filtering, pagination, and inline editing.
<pan-data-table
resource="products"
columns='["id", "name", "price", "stock"]'
sortable="true"
filterable="true"
editable="true">
</pan-data-table>Features:
- Virtual scrolling for large datasets
- Inline editing with validation
- Multi-column sorting
- Advanced filtering
- Export to CSV/Excel
- Responsive design
Flexible data grid with drag-and-drop reordering and customizable layouts.
<pan-grid
resource="cards"
layout="masonry"
columns="3">
</pan-grid>Interactive charts powered by Chart.js integration.
<pan-chart
type="line"
topic="analytics.data"
x-axis="date"
y-axis="sales">
</pan-chart>Schema-driven form generator with validation and error handling.
<pan-form
resource="user"
schema-topic="user.schema"
submit-topic="user.save">
</pan-form>Features:
- JSON Schema validation
- Auto-generated fields from schema
- Real-time validation
- File upload support
- Custom field templates
Searchable dropdown with keyboard navigation.
<pan-dropdown
topic="country.select"
options-topic="countries.list.state"
placeholder="Select country">
</pan-dropdown>Accessible date/time picker with localization.
<pan-date-picker
topic="booking.date"
min="2024-01-01"
format="YYYY-MM-DD">
</pan-date-picker>Connects to REST APIs and manages data state.
<pan-data-provider
resource="users"
endpoint="/api/users"
auto-load="true">
</pan-data-provider>Features:
- Automatic CRUD operations
- Request caching
- Optimistic updates
- Error handling
- Retry logic
Generic connector for any data source.
<pan-data-connector
resource="products"
adapter="graphql"
endpoint="https://api.example.com/graphql">
</pan-data-connector>Accessible modal dialogs with backdrop.
<pan-modal id="confirmDialog" title="Confirm Action">
<p>Are you sure you want to proceed?</p>
<button slot="footer">Confirm</button>
</pan-modal>Tab navigation with lazy loading.
<pan-tabs>
<pan-tab label="Overview" active>Content 1</pan-tab>
<pan-tab label="Details">Content 2</pan-tab>
<pan-tab label="Settings">Content 3</pan-tab>
</pan-tabs>Action toolbar with responsive overflow menu.
<pan-toolbar>
<button data-action="save">Save</button>
<button data-action="delete">Delete</button>
<button data-action="export">Export</button>
</pan-toolbar>NEW: Advanced state management components for building offline-first, cross-tab synchronized applications with persistent state.
Cross-tab state synchronization using BroadcastChannel API.
<pan-state-sync
channel="myapp-sync"
topics="users.*,todos.*"
strategy="last-write-wins"
leader="auto">
</pan-state-sync>Features:
- Leader election for conflict prevention
- Automatic state sync across tabs
- Conflict resolution strategies
- Tab visibility handling
Derived/computed state with automatic dependency tracking.
<pan-computed-state
sources="cart.items,user.discount"
output="cart.total"
debounce="100"
retain>
<script>
(items, discount) => {
return items.reduce((sum, item) => sum + item.price, 0) - (discount || 0);
}
</script>
</pan-computed-state>Features:
- Multi-source dependencies
- Async computation support
- Memoization strategies
- Debouncing for performance
Offline-first support with automatic queue management and sync.
<pan-offline-sync
storage="offline-queue"
retry-max="3"
topics="todos.*,notes.*"
endpoints='{"todos.*": "/api/todos"}'>
</pan-offline-sync>Features:
- IndexedDB-based mutation queue
- Automatic retry with exponential backoff
- Network status monitoring
- Conflict resolution
Declarative persistence routing to different storage backends.
<pan-persistence-strategy auto-hydrate>
<strategy topics="session.*" storage="memory" ttl="1800000"></strategy>
<strategy topics="user.preferences.*" storage="localStorage"></strategy>
<strategy topics="*.list.*" storage="indexedDB" database="app-data"></strategy>
</pan-persistence-strategy>Features:
- Multiple storage backends (memory, localStorage, sessionStorage, IndexedDB)
- TTL support for cache expiration
- Automatic hydration on page load
- Size limits per topic
Runtime JSON Schema validation without build tools.
<pan-schema-validator topic="users.item.*" strict>
<script type="application/json">
{
"type": "object",
"properties": {
"email": { "type": "string", "format": "email" },
"age": { "type": "number", "minimum": 0 }
},
"required": ["email"]
}
</script>
</pan-schema-validator>Features:
- Subset of JSON Schema Draft-07
- Strict and warning modes
- Built-in format validators
- Detailed error messages
Time-travel debugging with undo/redo support.
<pan-undo-redo
topics="editor.*"
max-history="50"
channel="history"
auto-snapshot>
</pan-undo-redo>Features:
- Configurable history stack
- Automatic change batching
- Jump to timestamp
- Auto-snapshot support
See State Management Patterns Guide for complete documentation and examples.
Enhanced real-time message inspector with state tree, metrics, and debugging tools.
<pan-inspector></pan-inspector>Features:
- State Tree View — Visualize all retained state
- Metrics Dashboard — Message rates, top topics, performance
- Advanced Filtering — Filter by topic patterns and type
- Message Details — Inspect full payloads and metadata
- Export/Import — Save and restore state snapshots
- Performance Tracking — Handler duration and message sizes
Components communicate via standardized topic patterns:
// Request list
bus.publish('users.list.get', {});
// Receive list state
bus.subscribe('users.list.state', (msg) => {
console.log('Users:', msg.payload.items);
});// Select an item
bus.publish('users.item.select', { id: 123 });
// Request item details
await bus.request('users.item.get', { id: 123 });
// Save item
await bus.request('users.item.save', {
item: { id: 123, name: 'Alice' }
});
// Delete item
await bus.request('users.item.delete', { id: 123 });Customize appearance using CSS custom properties:
:root {
/* Colors */
--pan-primary-color: #007bff;
--pan-secondary-color: #6c757d;
--pan-success-color: #28a745;
--pan-danger-color: #dc3545;
/* Typography */
--pan-font-family: system-ui, sans-serif;
--pan-font-size: 14px;
/* Spacing */
--pan-spacing-sm: 8px;
--pan-spacing-md: 16px;
--pan-spacing-lg: 24px;
/* Borders */
--pan-border-radius: 4px;
--pan-border-color: #dee2e6;
}See Theme System Documentation for complete customization guide.
All components have been security audited:
- ✅ 0 critical vulnerabilities
- ✅ XSS protection — Input sanitization on all user-editable fields
- ✅ CSP compliant — No inline scripts or styles
- ✅ Safe defaults — Secure configuration out of the box
See Security Audit Report for details.
- ✅ Chrome/Edge 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Opera 76+
View all components with live examples:
- ✅ Cards, modals, dropdowns, tabs
- ✅ Data tables with sorting/filtering
- ✅ Forms (unless extremely complex)
- ✅ Navigation, breadcrumbs, pagination
- ✅ Theme switching, toasts, tooltips
- ✅ Authentication UI
- 🔧 Complex multi-step wizards
- 🔧 Rich text editors with live preview
- 🔧 Real-time collaborative features
- 🔧 Heavy client-side business logic
Best practice: Mix them! Use LARC for 80% of your UI, React/Vue for the 20% that needs framework power.
- @larcjs/core — Core PAN messaging bus
- @larcjs/react-adapter — React hooks for PAN
- @larcjs/vue-adapter — Vue composables for PAN
- @larcjs/devtools — Chrome DevTools extension
- @larcjs/examples — Demo applications including hybrid examples
Contributions are welcome! Please see our Contributing Guide.
MIT © Chris Robison