Track Awesome Lit Updates Weekly
A curated list of awesome Lit resources.
🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 web-padawan/awesome-lit · ⭐ 1.7K · 🏷️ Front-End Development
Nov 03 - Nov 09, 2025
Tutorials
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.
Oct 27 - Nov 02, 2025
Starter Templates
- Vite Lit + Tailwind (⭐6) - Modified Vite + Lit starter to use Tailwind v4.
Extensions
lit-composition- Composition API for creating web components with Lit.
Aug 25 - Aug 31, 2025
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.
Aug 11 - Aug 17, 2025
Design Systems
- Calcite Design System - UI kit, icons, color schemes, and a web component library by ArcGIS.
- Vaadin web components (⭐537) - A set of high-quality web components for business web applications.
- Web Awesome (⭐523) - The open source library of web components from Font Awesome
Apr 07 - Apr 13, 2025
Community
Sep 09 - Sep 15, 2024
Standalone Components
<lit-image-cropper>- Fast and lightweight image cropper component.
Dec 25 - Dec 31, 2023
Videos / Other Tools
Nov 13 - Nov 19, 2023
Component Libraries
- TrendChart Elements (⭐61) - 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.
Oct 31 - Nov 06, 2022
Component Libraries
- Umbraco UI Components (⭐141) - Collection of user interface web components for Umbraco CMS.
Sep 19 - Sep 25, 2022
Tutorials
Jul 25 - Jul 31, 2022
General resources
Extensions
@lit-app/state- Lean and simple global State management for Lit 2.
Design Systems
- AXA Pattern Library (⭐129) - AXA CH UI components library built with LitElement.
- Carbon Web Components (⭐477) - Carbon Design System variant on top of Web Components.
- Clarity Core Web Components (⭐182) - Suite of web components for Clarity Design System.
- Momentum UI Web Components (⭐211) - Set of UI components based on Momentum Design.
- Red Hat Design System (⭐127) - Web components for building uniform experiences with the Red Hat brand.
Apr 25 - May 01, 2022
Component Libraries
- Dile Components (⭐94) - General use Web Components for websites and applications.
Apr 18 - Apr 24, 2022
Tools / Building
- esbuild-plugin-lit - ESBuild plugin to import CSS, SVG, HTML, XLIFF files as JavaScript tagged-template literal objects.
Oct 11 - Oct 17, 2021
Extensions
@shoelace-style/localize- A micro library for localizing custom elements, providing directives for Lit.
Oct 04 - Oct 10, 2021
Starter Templates
- Lit Webpack Starter (⭐10) - Starter for multipage apps with Lit and Typescript, using Webpack.
Tutorials
Sep 27 - Oct 03, 2021
CDN / Other Tools
Sep 20 - Sep 26, 2021
General resources
Community
Overview
Starter Templates
- LitElement JavaScript starter (⭐205) - Sample component using LitElement with JavaScript.
- LitElement TypeScript starter (⭐526) - Sample component using LitElement with TypeScript.
- hello-web-components (⭐30) - 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 (⭐25) - 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 (⭐76k) - Lit based template preset for Vite.
- Vite Lit TS Starter (⭐76k) - Lit and TypeScript based template preset for Vite.
Codelabs
Tutorials
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 (⭐5) - 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 (⭐283) - An open source Design System and lightweight UI Component Library.
- Lion (⭐1.9k) - Highly performant, accessible and flexible Web Components.
- Material Web Components (⭐10k) - Material Design implemented as Web Components.
- Outline Design System (⭐130) - Web component based design system starter kit.
- Pharos Design System (⭐127) - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
- Spectrum Web Components (⭐1.4k) - 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 (⭐422) - Custom elements meet Apollo GraphQL.
- Blackstone UI (⭐106) - Web components for creating interfaces built with lit-html and LitElement.
- Curvenote (⭐184) - Web components for creating interactive scientific articles.
- ESP Web Tools (⭐555) - 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 (⭐134) - Complete library of UI components from Infragistics.
- Medblocks UI (⭐64) - 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 (⭐618) - Serverless code experiences with web components.
- Stripe Elements (⭐81) - Custom Element Wrapper for Stripe.js v3 Elements.
- Titanium Elements (⭐19) - Collection of lightweight web components used by Leavitt Group Enterprises.
- Vidstack Elements (⭐3.2k) - 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
typefor 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 (⭐143) - Browser extension for developers working with Web Components.
- Web Component Factory - CLI tool for generating, building, testing and publishing web components.
CDN / Other Tools
Integrations / Other Tools
- Bridgetown Lit Renderer (⭐13) - 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 (⭐440) - Minimal yet extensible Ruby to JavaScript conversion.
Videos / Other Tools
Archive / Other Tools
Similar libraries / Other Tools
- haunted - React's Hooks API but for standard web components and hyperHTML or lit-html.
May 11 - May 17, 2020
Standalone Components
<granite-qrcode-generator>- Custom element to generate and render QR Codes, using qr.js library.
Apr 27 - May 03, 2020
Design Systems
- Brightspace UI core (⭐75) - Collection of web components for building Brightspace applications.
Component Libraries
- Wokwi Elements (⭐210) - 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.
Mar 30 - Apr 05, 2020
Component Libraries
- Mutation testing elements (⭐28) - A schema for mutation testing results with the web components to visualize it.
Jan 27 - Feb 02, 2020
Standalone Components
<codesandbox-button>- Custom Element that shows a CodeSandbox demo when you click on it.
Dec 30 - Jan 05, 2019
Standalone Components
<api-viewer>- API documentation and live playground for Web Components.
Nov 25 - Dec 01, 2019
Videos / Other Tools
Oct 28 - Nov 03, 2019
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.
Jul 22 - Jul 28, 2019
Component Libraries
- Chartjs Web Components - Web components for chartjs.
- LRNWebComponents (⭐267) - 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.
Jul 15 - Jul 21, 2019
Component Libraries
- Clever components (⭐233) - Collection of Web Components made by Clever Cloud.
Jul 08 - Jul 14, 2019
Videos / Other Tools
Jul 01 - Jul 07, 2019
Archive / Other Tools
Feb 25 - Mar 03, 2019
Podcasts / Other Tools
- ShopTalk Show 348: Getting lit-html with Justin Fagnani - Another episode with Justin Fagnani as a guest.
Feb 11 - Feb 17, 2019
Overview
Sep 24 - Sep 30, 2018
Archive / Other Tools
Jul 30 - Aug 05, 2018
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 (⭐82) - Lightweight and modern templating for SSR in Node.js, inspired by lit-html.
Jul 23 - Jul 29, 2018
Similar libraries / Other Tools
- hybrids (⭐3.1k) - UI library for creating Web Components with simple and functional API.
May 21 - May 27, 2018
Videos / Other Tools