Documentation

Tutorials

Playground

Blog

Discord

GitHub

Twitter

Stack Overflow

YouTube

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

Lit 2.0: Meet Lit, all over again!

Announcing Lit 2 stable release

Gracile Starters

Gracile full-stack starter projects (SSR/SSG).

LitElement JavaScript starter

Sample component using LitElement with JavaScript.

LitElement TypeScript starter

Sample component using LitElement with TypeScript.

hello-web-components

Simple starter web component written in TypeScript using Lit.

Lit Sass JavaScript Starter

Project that has a simple setup for SASS + JS + Lit, using Rollup.

Lit Sass TypeScript Starter

Project that has a simple setup for SASS + TS + Lit, using Rollup.

Lit Webpack Starter

Starter for multipage apps with Lit and Typescript, using Webpack.

Open Web Components Generator

Starter app based on Open Web Components Recommendations.

pwa-starter

LitElement edition of the PWABuilder pwa-starter.

pwa-lit-template

Build Progressive Web Applications following the modern web standards.

Vite Lit Element TS SASS

Example Vite project using Lit 2, Typescript, and SASS.

Vite Lit Starter

Lit based template preset for Vite.

Vite Lit + Intlayer

Per-component i18n solution for app and design-systems.

Vite Lit + Tailwind

Modified Vite + Lit starter to use Tailwind v4.

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

Building A Retro Draggable Web Component Using Lit

Building a Rich Text Editor with Lit

Draggable DOM with Lit

Getting started with LitElement and TypeScript

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

JSON to HTML Table with Lit

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

lit-html Part 2 - Working with attributes and properties

Lit and Figma

Lit and Flutter

Lit and Monaco Editor

Lit and VSCode Extensions

Lit Sheet Music

Navigation Lifecycle using Vaadin Router, LitElement and TypeScript

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

Routing Management with LitElement and TypeScript

Some things to know about Lit

Lit Native

Reuse Lit web components on native platforms.

Lit Node Editor

Node editor built with canvas API and simple graph data structure.

Lit 3D Piano

3D Piano built with Lit, Three.js and Tone.js.

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

Minimal example to get RxDB running with Vite.

@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.

@adobe/lit-mobx

Mixin and base class for using mobx with Lit.

@apollo-elements/lit-apollo

LitElement integrations with Apollo GraphQL.

@gyeonghokim/lucide-lit

Lucide icons as tree-shakeable Lit custom elements.

@lit-app/state

Lean and simple global State management for Lit 2.

@shoelace-style/localize

A micro library for localizing custom elements, providing directives for Lit.

@stefanholzapfel/lit-state

Lightweight reactive state management for Lit 2.

@tanstack/lit-table

Headless UI for building powerful tables & datagrids with Lit.

@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-composition

Composition API for creating web components with Lit.

lit-element-effect

Effect hooks for LitElement.

lit-element-state-decoupler

Utility for state handling outside of the component for LitElement.

lit-intlayer

Making a lit application multilingual using Intlayer.

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.

AXA Pattern Library

AXA CH UI components library built with LitElement.

Brightspace UI core

Collection of web components for building Brightspace applications.

Calcite Design System

UI kit, icons, color schemes, and a web component library by ArcGIS.

Carbon Web Components

Carbon Design System variant on top of Web Components.

Clarity Core Web Components

Suite of web components for Clarity Design System.

Kor

An open source Design System and lightweight UI Component Library.

Lion

Highly performant, accessible and flexible Web Components.

Material Web Components

Material Design implemented as Web Components.

Momentum UI Web Components

Set of UI components based on Momentum Design.

Outline Design System

Web component based design system starter kit.

Pharos Design System

JSTOR's design system to create cohesive, supportive, and beautiful experiences.

Red Hat Design System

Web components for building uniform experiences with the Red Hat brand.

Spectrum Web Components

Adobe Spectrum design language implementation built with LitElement.

UI5 Web Components

Enterprise-flavored sugar on top of native APIs!

Vaadin web components

A set of high-quality web components for business web applications.

Web Awesome

The open source library of web components from Font Awesome

AgnosticUI

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

Apollo Elements

Custom elements meet Apollo GraphQL.

Blackstone UI

Web components for creating interfaces built with lit-html and LitElement.

Burnish Components

Web components for rendering MCP tool-call output as UI.

Chartjs Web Components

Web components for chartjs.

Clever components

Collection of Web Components made by Clever Cloud.

Curvenote

Web components for creating interactive scientific articles.

Dile Components

General use Web Components for websites and applications.

ESP Web Tools

Allow flashing ESPHome or other ESP-based firmwares via the browser.

Furo Webcomponents

Enterprise ready set of web components which work best with Eclipse Furo.

Fusion Web Components

Ser of web components used by Equinor Fusion.

Ignite UI Web Components

Complete library of UI components from Infragistics.

LRNWebComponents

ELMS:LN produced web components for any project.

M3E

Web Components implementing Material 3 Expressive.

Medblocks UI

Web Components for rapid development of openEHR and FHIR systems.

Microsoft Graph Toolkit

Collection of web components for the Microsoft Graph.

Mutation testing elements

A schema for mutation testing results with the web components to visualize it.

One Platform Components

Set of web components for Red Hat One Platform.

PatternFly Elements

Lightweight web components based on the PatternFly design system.

Playground Elements

Serverless code experiences with web components.

Stripe Elements

Custom Element Wrapper for Stripe.js v3 Elements.

Titanium Elements

Collection of lightweight web components used by Leavitt Group Enterprises.

TrendChart Elements

Components to generate simple charts representing trends.

Umbraco UI Components

Collection of user interface web components for Umbraco CMS.

Vidstack Elements

Spec-compliant customizable, extensible, accessible and universal media elements.

VSCode Webview Elements

Components for creating VSCode extensions which use the Webview API.

Web Components for TEI Publisher

Web components used by TEI Publisher and apps generated by it.

Webmarkets web components

Set of Webmarkets' public web components.

Wired Elements

Collection of elements that appear hand drawn.

Wokwi Elements

Web Components for Arduino and various electronic parts.

<api-viewer>

API documentation and live playground for Web Components.

<app-datepicker>

Datepicker element built with LitElement and Material Design 2.

<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.

<codesandbox-button>

Custom Element that shows a CodeSandbox demo when you click on it.

<editor-container>

Block based editor, designed for general-purpose collaborative applications.

<granite-qrcode-generator>

Custom element to generate and render QR Codes, using qr.js library.

<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.

<lit-datatable>

Material Design implementation of a data table, powered by LitElement.

<lit-image-cropper>

Fast and lightweight image cropper component.

<lottie-player>

Web Component for easily embedding and playing Lottie animations.

<model-viewer>

A web component for rendering interactive 3D models.

<phantom-ui>

Structure-aware shimmer skeleton loader that measures the real DOM to generate overlay blocks automatically.

<rapi-doc>

Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec.

<responsive-image>

Web component for rendering responsive images.

<round-slider>

Simple round slider web component built with Lit.

<stl-part-viewer>

LitElement web component that utilizes Three.js to display an STL model file.

Gracile

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

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

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

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.

Mappa

Fast import map generator for ES modules, resolving bare specifiers from package.json dependencies.

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.

vite-plugin-lit

Vite plugin for Lit adding HMR support, shadow root CSS helpers and a DevTools panel.

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.

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

Syntax highlighting and indentation for HTML inside of tagged template literals.

@web-types/lit

Attribute completion for HTML inside of tagged template literals.

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.

@custom-elements-manifest/analyzer

CLI tool to generate API documentation for web components.

Asimonim

Design tokens parser, validator, and language server for the W3C DTCG specification.

cem

CLI multitool for generating, validating, and querying Custom Elements Manifests, with built-in LSP and MCP servers.

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

Browser extension for developers working with Web Components.

Web Component Factory

CLI tool for generating, building, testing and publishing web components.

cdn.esm.sh

jsDelivr CDN

JSPM CDN

Skypack CDN

unpkg.com

Bridgetown Lit Renderer

SSR + hydration of Lit components for Bridgetown.

Fable.Lit

Collection of tools to embed HTML code into F# code with the power of Lit.

Ruby2JS

Minimal yet extensible Ruby to JavaScript conversion.

Lit 3.0 Launch Event

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

lit-HTML (Chrome Dev Summit 2017)

Lit Beta Launch Event (2021)

Lit 2.0 Release Livestream

VDOM vs lit-html - HTTP203

Declarative Reactive Web Components with Justin Fagnani

Building a Complex Application with Web Components and LitElement

The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals

An episode with the lit-html creator Justin Fagnani.

ShopTalk Show 348: Getting lit-html with Justin Fagnani

Another episode with Justin Fagnani as a guest.

Render HTML with Vanilla JavaScript and lit-html

A gentle introduction to lit-html

lit-html templates from zero to hero

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

Let's Build Web Components! Part 5: LitElement

LitElement To Do App

LitElement with Rollup, Babel & Karma

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

haunted

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

htm

Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.

hybrids

UI library for creating Web Components with simple and functional API.

lit-ntml

Lightweight and modern templating for SSR in Node.js, inspired by lit-html.