Comprehensive examples and demo applications for the LARC/PAN messaging system
This repository contains a complete collection of examples, tutorials, and full-featured demo applications demonstrating the capabilities of the LARC (Lightweight Asynchronous Relay Core) framework.
30+ progressive examples from basic concepts to advanced patterns:
- 00-intro.html - Introduction to PAN concepts
- 01-hello.html - Hello World with PAN
- 02-todos-and-inspector.html - Simple todo app with debugging
- 03-broadcastchannel.html - Cross-tab communication
- 04-react-wrapper.html - Integration with React
- 05-lit-wrapper.html - Integration with Lit
- 06-crud.html - Basic CRUD operations
- 07-rest-connector.html - REST API integration
- 08-workers.html - Web Workers with PAN
- 09-schema-form.html - JSON Schema forms
- 10-sse-store.html - Server-Sent Events
- 11-graphql-connector.html - GraphQL integration
- 12-php-connector.html - PHP backend integration
- 13-sse-pan.html - SSE with PAN messaging
- 14-forwarder.html - Message forwarding patterns
- 15-router.html - Client-side routing
- 16-websocket.html - WebSocket integration
- 17-enhanced-security.html - Security features
- 17-indexeddb.html - IndexedDB integration
- 18-jwt-auth.html - JWT authentication
- 18-typescript-usage.ts - TypeScript examples
...and more!
Full-featured applications showcasing real-world usage:
Complete contact management system with CRUD operations.
Features:
- Add, edit, delete contacts
- Search and filtering
- Persistent storage
- Responsive UI
Professional invoice creation and management application.
Features:
- Create and edit invoices
- Line item management
- PDF export
- Client database
- Invoice templates
Generic data browsing and editing interface.
Features:
- Connect to any data source
- Grid view with sorting/filtering
- Inline editing
- Export capabilities
Simple note-taking app with Markdown support.
Features:
- Real-time Markdown preview
- Note organization
- Local storage
- Export to HTML/PDF
Streamlined invoice creation tool.
Features:
- Quick invoice generation
- Client management
- Product catalog
- Payment tracking
-
Clone the repository:
git clone https://github.com/larcjs/examples.git cd examples -
Install dependencies (optional):
npm install
-
Start a local server:
npm run dev # or use any static server # python3 -m http.server 8000 # npx serve
-
Open in browser:
http://localhost:8000/examples/ http://localhost:8000/apps/
Most examples work directly with CDN links:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="module" src="https://unpkg.com/@larcjs/core/src/pan.js"></script>
</head>
<body>
<!-- Your PAN components here -->
</body>
</html>- 00-intro.html - Understand PAN concepts
- 01-hello.html - First PAN app
- 02-todos-and-inspector.html - Learn debugging
- 06-crud.html - Basic data operations
- 07-rest-connector.html - Connect to APIs
- 09-schema-form.html - Dynamic forms
- 15-router.html - Add routing
- Contact Manager - Real app example
- 08-workers.html - Offload work to workers
- 11-graphql-connector.html - GraphQL
- 17-enhanced-security.html - Security patterns
- 18-jwt-auth.html - Authentication
- Invoice Studio - Complex application
Some examples require backend services:
-
Requirements:
- PHP 7.4+
- SQLite or MySQL
-
Setup:
cd apps php -S localhost:8080 -
Database:
# Initialize demo database sqlite3 pan_demo.db < setup-demo-db.sqlite.sql
Node/Express alternatives for PHP examples.
examples/
├── examples/ # Progressive examples (00-18)
│ ├── 00-intro.html
│ ├── 01-hello.html
│ ├── ...
│ ├── index.html # Examples index page
│ └── assets/ # Shared assets
│
├── apps/ # Full demo applications
│ ├── contact-manager/
│ ├── invoice-studio/
│ ├── data-browser/
│ ├── markdown-notes/
│ ├── invoice/
│ ├── api.php # Shared backend API
│ └── README.md # Apps documentation
│
├── test-*.html # Manual test pages
├── auth.php # Authentication backend
├── sse.php # Server-Sent Events endpoint
└── api-legacy.php # Legacy API (for reference)
Core Concepts:
- 00-intro, 01-hello, 02-todos-and-inspector
Data Management:
- 06-crud, 07-rest-connector, 09-schema-form, 17-indexeddb
Real-Time Communication:
- 10-sse-store, 13-sse-pan, 16-websocket
Framework Integration:
- 04-react-wrapper, 05-lit-wrapper
Advanced Patterns:
- 08-workers, 14-forwarder, 15-router
Security & Auth:
- 17-enhanced-security, 18-jwt-auth
Easy: 00-03, 06 Medium: 04-05, 07, 09-10, 15 Advanced: 08, 11-14, 16-18
Each example is self-contained and can serve as a template:
- Copy the example file
- Modify for your use case
- Update topic names and data structures
- Add your business logic
Example:
# Start from CRUD example
cp examples/06-crud.html my-app.html
# Customize for your data model
# Edit topic names: "items.*" → "products.*"
# Update schema to match your dataRun tests for examples:
npm testIndividual example tests:
npm run test:example -- 06-crud- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- PHP 7.4+ (for PHP examples)
- SQLite or MySQL (for database examples)
- Node.js 16+ (for build tools)
- @larcjs/core — Core PAN messaging bus
- @larcjs/components — UI components library
- @larcjs/devtools — Chrome DevTools extension
- @larcjs/site — Documentation website
Have a great example to share?
- Fork the repository
- Add your example to
examples/orapps/ - Follow naming convention:
XX-descriptive-name.html - Include comments explaining key concepts
- Submit a pull request
See CONTRIBUTING.md for guidelines.
MIT © Chris Robison
Start with examples/00-intro.html and work your way up!
Each example builds on previous concepts, providing a comprehensive learning path for mastering LARC/PAN development.
Happy coding! 🚀