Lit Examples

A comprehensive collection of modular Lit web components, prototypes, and full-stack integration examples.

⚡ Lit Showcase

Explore all components natively in the interactive Lit Showcase Hub or view the Live Demo.

📦 Project Structure

Modular Components (/lit-components)

• lit-3d-piano: 3D interactive musical instrument.
• lit-calculator: Fully functional mathematical engine.
• lit-code-editor: Monaco Editor integration.
• lit-draggable-dom: Canvas-based layout manager with panning and infinite grid.
• lit-file-based-routing: Dynamic application router.
• lit-force-graph: 2D/3D/AR/VR force-directed graph engine.
• lit-html-editor: Native rich-text and markdown editor.
• lit-html-table: Modern spreadsheet grid view with editable cells.
• lit-modules: Harness for testing NPM modules.
• lit-node-editor: Visual shader and node-based logic graph.
• lit-sheet-music: OSMD-powered sheet music renderer.
• lit-starter-ts: Minimal TypeScript starter template.
• lit-vscode-extension: Webview-based VS Code extension bridge.
• lit-wmr: Bundled prototype using WMR.
• vite-rxdb-lit: Offline-first database integration with RxDB.

Full Applications & Integrations

• figma-to-lit: Tools for converting Figma designs to Lit components.
• lit-native: Native mobile app shells for Android and iOS.
• vite-lit-capacitor: Hybrid mobile/desktop apps using Capacitor.
• vite-lit-element-starter: standard Vite + Lit boilerplate.

🛠️ Getting Started

Prerequisites

• Node.js (v18+)
• pnpm (recommended)

Installation

npm install

Development

Start the interactive showcase:

npm run dev

Testing

Run the comprehensive test suite (Vitest + Happy DOM):

npm test

Building

Build all examples as a unified Multi-Page Application (MPA):

npm run build

✨ Recent Improvements

• Performance: Implemented dynamic imports for heavy dependencies (A-Frame, Three.js) to optimize load times and test execution.
• Instance Reuse: Refactored complex components (Force Graph, Draggable DOM) to reuse instances and prevent memory leaks.
• UI/UX: Overhauled lit-html-table with modern accessibility-focused styling and improved lit-draggable-dom coordinate mapping for perfect panning.
• Consistency: Unified all subprojects into a single Vite-powered monorepo structure with shared testing and build configurations.