Component Libraries

• M3E (⭐57) - Web Components implementing Material 3 Expressive.

Component Libraries

• AgnosticUI (⭐773) - A CLI-based UI component library that copies Lit web components directly into your project. Full React and Vue wrappers for native framework experience.

Tutorials

• Building a Rich Text Editor with Lit

• Draggable DOM with Lit

• JSON to HTML Table with Lit

• Lit and Figma

• Lit and Flutter

• Lit and Monaco Editor

• Lit and VSCode Extensions

• Lit Sheet Music

Examples

• Lit 3D Piano (⭐21) - 3D Piano built with Lit, Three.js and Tone.js.

Standalone Components

• <responsive-image> - Web component for rendering responsive images.

Starter Templates

• Vite Lit + Tailwind (⭐8) - Modified Vite + Lit starter to use Tailwind v4.

Extensions

• lit-composition - Composition API for creating web components with Lit.

Starter Templates

• Gracile Starters (⭐1) - Gracile full-stack starter projects (SSR/SSG).

Meta Frameworks

• Gracile - Thin, full-stack meta-framework. Powered by Vite and Lit SSR.

Design Systems

• Calcite Design System - UI kit, icons, color schemes, and a web component library by ArcGIS.

• Vaadin web components (⭐554) - A set of high-quality web components for business web applications.

• Web Awesome (⭐874) - The open source library of web components from Font Awesome

Community

• Discord

Standalone Components

• <lit-image-cropper> - Fast and lightweight image cropper component.

Videos / Other Tools

• Lit 3.0 Launch Event

Component Libraries

• TrendChart Elements (⭐62) - Components to generate simple charts representing trends.

Standalone Components

• <editor-container> - Block based editor, designed for general-purpose collaborative applications.

Tools / IDE Plugins

• @web-types/lit - Attribute completion for HTML inside of tagged template literals.

Component Libraries

• Umbraco UI Components (⭐144) - Collection of user interface web components for Umbraco CMS.

Tutorials

• Building A Retro Draggable Web Component Using Lit

General resources

• Tutorials

Extensions

• @lit-app/state - Lean and simple global State management for Lit 2.

Design Systems

• AXA Pattern Library (⭐130) - AXA CH UI components library built with LitElement.

• Carbon Web Components (⭐474) - Carbon Design System variant on top of Web Components.

• Clarity Core Web Components (⭐185) - Suite of web components for Clarity Design System.

• Momentum UI Web Components (⭐212) - Set of UI components based on Momentum Design.

• Red Hat Design System (⭐135) - Web components for building uniform experiences with the Red Hat brand.

Component Libraries

• Dile Components (⭐98) - General use Web Components for websites and applications.

Tools / Building

• esbuild-plugin-lit - ESBuild plugin to import CSS, SVG, HTML, XLIFF files as JavaScript tagged-template literal objects.

Extensions

• @shoelace-style/localize - A micro library for localizing custom elements, providing directives for Lit.

Starter Templates

• Lit Webpack Starter (⭐9) - Starter for multipage apps with Lit and Typescript, using Webpack.

Tutorials

• Some things to know about Lit

CDN / Other Tools

• jsDelivr CDN

General resources

• Documentation

• Playground

• Blog

Community

• GitHub (⭐21k)

• GitHub Discussions (⭐21k)

• Twitter

• Stack Overflow

• YouTube

Overview

• Lit 2.0: Meet Lit, all over again!

• Announcing Lit 2 stable release

Starter Templates

• LitElement JavaScript starter (⭐207) - Sample component using LitElement with JavaScript.

• LitElement TypeScript starter (⭐532) - Sample component using LitElement with TypeScript.

• hello-web-components (⭐31) - Simple starter web component written in TypeScript using Lit.

• Lit Sass JavaScript Starter (⭐1) - Project that has a simple setup for SASS + JS + Lit, using Rollup.

• Lit Sass TypeScript Starter (⭐24) - Project that has a simple setup for SASS + TS + Lit, using Rollup.

• Open Web Components Generator - Starter app based on Open Web Components Recommendations.

• pwa-starter (⭐1.3k) - LitElement edition of the PWABuilder pwa-starter.

• pwa-lit-template (⭐184) - Build Progressive Web Applications following the modern web standards.

• Vite Lit Element TS SASS (⭐75) - Example Vite project using Lit 2, Typescript, and SASS.

• Vite Lit Starter (⭐78k) - Lit based template preset for Vite.

• Vite Lit TS Starter (⭐78k) - Lit and TypeScript based template preset for Vite.

Codelabs

• Build a Brick Viewer with lit-element

• Build a Story Component with lit-element

• From Web Component to Lit Element

• lit-html & lit-element: basics

• lit-html & lit-element: intermediate

• Lit for React Developers

Tutorials

• Getting started with LitElement and TypeScript

• Here's a minimalist no-frills Redux Toolkit & LitElement example

• lit-html Part 1 - A solution for DOM management in web components

• lit-html Part 2 - Working with attributes and properties

• Navigation Lifecycle using Vaadin Router, LitElement and TypeScript

• Recreating The Arduino Pushbutton Using SVG And <lit-element>

• Routing Management with LitElement and TypeScript

Examples

• Lit Native (⭐41) - Reuse Lit web components on native platforms.

• Lit Node Editor (⭐24) - Node editor built with canvas API and simple graph data structure.

• Open Web Components Examples - Code examples of common patterns using Lit.

• Polymer → Lit Migration Guide - Code examples showing migration guidance from Polymer to Lit.

• Vite + RxDB + Lit (⭐6) - Minimal example to get RxDB running with Vite.

Lit Labs

• @lit/localize - Library and command-line tool for localizing web applications built using Lit.

• @lit-labs/ssr - Package for server-side rendering Lit templates and components.

• @lit-labs/motion - Lit directives for making things move.

• @lit-labs/react - React integration for Web Components and reactive Lit controllers.

• @lit-labs/scoped-registry-mixin - Mixin for LitElement that integrates with the speculative Scoped CustomElementRegistry polyfill to evaluate the proposal and facilitate feedback.

• @lit-labs/task - Controller for Lit that renders asynchronous tasks.

• @lit-labs/virtualizer - Package that provides virtual scrolling for Lit.

Extensions

• @adobe/lit-mobx - Mixin and base class for using mobx with Lit.

• @apollo-elements/lit-apollo - LitElement integrations with Apollo GraphQL.

• @stefanholzapfel/lit-state - Lightweight reactive state management for Lit 2.

• @vaadin/form - Set of utilities for building forms with TypeScript and Lit.

• dark-theme-utils - Useful utilities for dark mode built with Web Components.

• exome - State manager for deeply nested states that supports Lit.

• pure-lit - Register your Lit elements as pure functions.

• lit-element-effect - Effect hooks for LitElement.

• lit-element-state-decoupler - Utility for state handling outside of the component for LitElement.

• lit-redux-router - Declarative way of routing for Lit powered by pwa-helpers and Redux.

• lit-svelte-stores - Lit controller to use svelte stores as state management.

• ullr - Build Web Components with functional programming using Lit.

Design Systems

• Kor (⭐287) - An open source Design System and lightweight UI Component Library.

• Lion (⭐1.9k) - Highly performant, accessible and flexible Web Components.

• Material Web Components (⭐11k) - Material Design implemented as Web Components.

• Outline Design System (⭐131) - Web component based design system starter kit.

• Pharos Design System (⭐129) - JSTOR's design system to create cohesive, supportive, and beautiful experiences.

• Spectrum Web Components (⭐1.5k) - Adobe Spectrum design language implementation built with LitElement.

• UI5 Web Components (⭐1.7k) - Enterprise-flavored sugar on top of native APIs!

Component Libraries

• Apollo Elements (⭐423) - Custom elements meet Apollo GraphQL.

• Blackstone UI (⭐108) - Web components for creating interfaces built with lit-html and LitElement.

• Curvenote (⭐193) - Web components for creating interactive scientific articles.

• ESP Web Tools (⭐621) - Allow flashing ESPHome or other ESP-based firmwares via the browser.

• Furo Webcomponents (⭐12) - Enterprise ready set of web components which work best with Eclipse Furo.

• Fusion Web Components (⭐13) - Ser of web components used by Equinor Fusion.

• Ignite UI Web Components (⭐168) - Complete library of UI components from Infragistics.

• Medblocks UI (⭐68) - Web Components for rapid development of openEHR and FHIR systems.

• One Platform Components (⭐31) - Set of web components for Red Hat One Platform.

• Playground Elements (⭐640) - Serverless code experiences with web components.

• Stripe Elements (⭐84) - Custom Element Wrapper for Stripe.js v3 Elements.

• Titanium Elements (⭐19) - Collection of lightweight web components used by Leavitt Group Enterprises.

• Vidstack Elements (⭐3.4k) - Spec-compliant customizable, extensible, accessible and universal media elements.

• VSCode Webview Elements (⭐0) - Components for creating VSCode extensions which use the Webview API.

• Web Components for TEI Publisher (⭐18) - Web components used by TEI Publisher and apps generated by it.

• Webmarkets web components (⭐1) - Set of Webmarkets' public web components.

• Wired Elements (⭐11k) - Collection of elements that appear hand drawn.

Standalone Components

• <helium-animated-pages> - Web component for creating CSS animations built with Lit.

• <json-viewer> - Web Component to visualize JSON data in a tree view.

• <light-gallery> - Full featured JavaScript image and video gallery for Lit.

• <round-slider> - Simple round slider web component built with Lit.

Tools / Building

• babel-plugin-lit-property-types-from-ts - Babel plugin for setting type for reactive properties declared in Lit components based on TypeScript type annotations.

• babel-plugin-template-html-minifier - Babel plugin for minifying HTML in tagged template strings.

• esbuild-plugin-lit-css - ESBuild plugin to import css files as JavaScript tagged-template literal objects.

• lit-css-loader - Webpack loader to import css files as JavaScript tagged-template literal objects.

• lit-scss-loader - Webpack loader to import the CSS/SCSS into Lit components.

• rollup-plugin-lit-css - Rollup plugin to import css files as JavaScript tagged-template literal objects.

• rollup-plugin-minify-html-literals - Rollup plugin to minify HTML in tagged template strings.

• rollup-plugin-postcss-lit - Rollup plugin to load PostCSS-processed stylesheets in Lit components.

Tools / Linting

• eslint-plugin-lit - ESLint plugin for Lit template strings.

• eslint-plugin-lit-a11y - Accessibility linting plugin for Lit templates.

• lit-analyzer - CLI that type checks bindings in Lit templates.

Tools / IDE Plugins

• vscode-lit-html - Syntax highlighting and IntelliSense for lit-html template strings.

• vscode-lit-plugin - Syntax highlighting, type checking and code completion for lit-html.

• es6-string-html - VSCode extension which provides syntax highlighting for HTML in ES6 multiline strings.

• vim-html-template-literals (⭐77) - Syntax highlighting and indentation for HTML inside of tagged template literals.

Tools / TypeScript Plugins

• ts-lit-plugin - Plugin that adds type checking and code completion for Lit templates.

• typescript-lit-html-plugin - TypeScript server plugin that adds IntelliSense for Lit templates.

Tools / Other Tools

• @custom-elements-manifest/analyzer - CLI tool to generate API documentation for web components.

• Storybook for web-components - UI development environment for plain web-component snippets.

• web-components-codemods - Codemods for Web Components compatible with lit-html template literals.

• Web Component DevTools (⭐150) - Browser extension for developers working with Web Components.

• Web Component Factory - CLI tool for generating, building, testing and publishing web components.

CDN / Other Tools

• cdn.esm.sh

• JSPM CDN

• Skypack CDN

• unpkg.com

Integrations / Other Tools

• Bridgetown Lit Renderer (⭐14) - SSR + hydration of Lit components for Bridgetown.

• Fable.Lit (⭐93) - Collection of tools to embed HTML code into F# code with the power of Lit.

• Ruby2JS (⭐478) - Minimal yet extensible Ruby to JavaScript conversion.

Videos / Other Tools

• Lit Beta Launch Event (2021)

• Lit 2.0 Release Livestream

Archive / Other Tools

• Render HTML with Vanilla JavaScript and lit-html

• Updating blog-pwa from Polymer to LitElement, Workbox, and Rollup

• Let's Build Web Components! Part 5: LitElement

• A new, lean way of creating web apps

• The future of Polymer & lit-html

• A night experimenting with Lit-HTML

• Making a fullstack CRUD app with LitHTML, Redux, Express, and Webpack

• Building a chat with Twilio, lit-html, Parcel and TypeScript

Similar libraries / Other Tools

• haunted - React's Hooks API but for standard web components and hyperHTML or lit-html.

Standalone Components

• <granite-qrcode-generator> - Custom element to generate and render QR Codes, using qr.js library.

Design Systems

• Brightspace UI core (⭐77) - Collection of web components for building Brightspace applications.

Component Libraries

• Wokwi Elements (⭐224) - Web Components for Arduino and various electronic parts.

Standalone Components

• <burgton-button> - Simple to use, customizable and accessible burger-button element.

• <code-block> - Web component that displays colorfully formatted code with Prism.js and LitElement.

• <stl-part-viewer> - LitElement web component that utilizes Three.js to display an STL model file.

Component Libraries

• Mutation testing elements (⭐27) - A schema for mutation testing results with the web components to visualize it.

Standalone Components

• <codesandbox-button> - Custom Element that shows a CodeSandbox demo when you click on it.

Standalone Components

• <api-viewer> - API documentation and live playground for Web Components.

Videos / Other Tools

• Building a Complex Application with Web Components and LitElement

Standalone Components

• <app-datepicker> - Datepicker element built with LitElement and Material Design 2.

• <lit-datatable> - Material Design implementation of a data table, powered by LitElement.

• <lottie-player> - Web Component for easily embedding and playing Lottie animations.

• <model-viewer> - A web component for rendering interactive 3D models.

• <rapi-doc> - Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec.

Component Libraries

• Chartjs Web Components - Web components for chartjs.

• LRNWebComponents (⭐269) - ELMS:LN produced web components for any project.

• Microsoft Graph Toolkit (⭐1k) - Collection of web components for the Microsoft Graph.

Similar libraries / Other Tools

• htm (⭐9k) - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.

Component Libraries

• Clever components (⭐238) - Collection of Web Components made by Clever Cloud.

Videos / Other Tools

• Declarative Reactive Web Components with Justin Fagnani

Archive / Other Tools

• A gentle introduction to lit-html

• lit-html templates from zero to hero

Podcasts / Other Tools

• ShopTalk Show 348: Getting lit-html with Justin Fagnani - Another episode with Justin Fagnani as a guest.

Overview

• Lightning-fast templates & Web Components: lit-html & LitElement

Archive / Other Tools

• LitElement To Do App

• LitElement with Rollup, Babel & Karma

Podcasts / Other Tools

• The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals - An episode with the lit-html creator Justin Fagnani.

Similar libraries / Other Tools

• lit-ntml (⭐83) - Lightweight and modern templating for SSR in Node.js, inspired by lit-html.

Similar libraries / Other Tools

• hybrids (⭐3.2k) - UI library for creating Web Components with simple and functional API.

Videos / Other Tools

• Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)

• lit-HTML (Chrome Dev Summit 2017)

• VDOM vs lit-html - HTTP203