A comprehensive collection of modular Lit web components, prototypes, and full-stack integration examples.
Explore all components natively in the interactive Lit Showcase Hub or view the Live Demo.
- 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.
- 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.
npm installStart the interactive showcase:
npm run devRun the comprehensive test suite (Vitest + Happy DOM):
npm testBuild all examples as a unified Multi-Page Application (MPA):
npm run build- 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-tablewith modern accessibility-focused styling and improvedlit-draggable-domcoordinate mapping for perfect panning. - Consistency: Unified all subprojects into a single Vite-powered monorepo structure with shared testing and build configurations.