Archive

Other Tools

• Render HTML with Vanilla JavaScript and lit-html
• A gentle introduction to lit-html
• lit-html templates from zero to hero
• 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

CDN

Other Tools

• jsDelivr CDN
• JSPM CDN
• lit.dev documentation
• Skypack CDN
• cdn.esm.sh
• unpkg.com

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

Community

• GitHub Discussions
• Discord
• Stack Overflow
• GitHub

Component Libraries

• Apollo Elements - Custom elements meet Apollo GraphQL.
• Blackstone UI - Web components for creating interfaces built with lit-html and LitElement.
• 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.
• Fusion Web Components - Ser of web components used by Equinor Fusion.
• Ignite UI Web Components - Complete library of UI components from Infragistics.
• 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.
• 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.
• 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.
• Playground Elements - Serverless code experiences with web components.
• Vidstack Elements - Spec-compliant customizable, extensible, accessible and universal media elements.
• 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.
• Furo Webcomponents - Enterprise ready set of web components which work best with Eclipse Furo.
• M3E - Web Components implementing Material 3 Expressive.
• Burnish Components - Web components for rendering MCP tool-call output as UI.
• PatternFly Elements - Lightweight web components based on the PatternFly design system.

Design Systems

• Clarity Core Web Components - Suite of web components for Clarity Design System.
• AXA Pattern Library - AXA CH UI components library built with LitElement.
• Brightspace UI core - Collection of web components for building Brightspace applications.
• Carbon Web Components - Carbon Design System variant on top of Web Components.
• Lion - Highly performant, accessible and flexible Web Components.
• Material Web Components - Material Design implemented as Web Components.
• 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!
• Calcite Design System - UI kit, icons, color schemes, and a web component library by ArcGIS.
• 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
• Kor - An open source Design System and lightweight UI Component Library.
• Momentum UI Web Components - Set of UI components based on Momentum Design.

Examples

• Open Web Components Examples - Code examples of common patterns using 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.
• Vite + RxDB + Lit - Minimal example to get RxDB running with Vite.

Extensions

• `@adobe/lit-mobx` - Mixin and base class for using mobx with Lit.
• `@apollo-elements/lit-apollo` - LitElement integrations with Apollo GraphQL.
• `@lit-app/state` - Lean and simple global State management for Lit 2.
• `@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.
• `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.
• `@shoelace-style/localize` - A micro library for localizing custom elements, providing directives for Lit.
• `pure-lit` - Register your Lit elements as pure functions.
• `ullr` - Build Web Components with functional programming using Lit.
• `lit-composition` - Composition API for creating web components with Lit.
• `@tanstack/lit-table` - Headless UI for building powerful tables & datagrids with Lit.
• `lit-intlayer` - Making a lit application multilingual using Intlayer.
• `@gyeonghokim/lucide-lit` - Lucide icons as tree-shakeable Lit custom elements.

General resources

• Documentation
• Playground
• Blog

Integrations

Other Tools

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

Meta Frameworks

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

Other awesome resources

Other Tools

• awesome

Overview

• Announcing Lit 2 stable release

Podcasts

Other Tools

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

Similar libraries

Other Tools

• 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.
• pion - React Hooks API for web components using lit-html.

Standalone Components

• `<light-gallery>` - Full featured JavaScript image and video gallery for Lit.
• `<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.
• `<lit-datatable>` - Material Design implementation of a data table, powered by LitElement.
• `<lottie-player>` - Web Component for easily embedding and playing Lottie animations.
• `<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.
• `<lit-image-cropper>` - Fast and lightweight image cropper component.
• `<api-viewer>` - API documentation and live playground for Web Components.
• `<responsive-image>` - Web component for rendering responsive images.
• `<model-viewer>` - A web component for rendering interactive 3D models.
• `<rapi-doc>` - Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec.
• `<phantom-ui>` - Structure-aware shimmer skeleton loader that measures the real DOM to generate overlay blocks automatically.

Starter Templates

• Open Web Components Generator - Starter app based on Open Web Components Recommendations.
• Vite Lit Starter - Lit based template preset for Vite.
• Vite Lit TS Starter - Lit and TypeScript based template preset for Vite.
• 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.
• 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.
• Gracile Starters - Gracile full-stack starter projects (SSR/SSG).
• Vite Lit + Tailwind - Modified Vite + Lit starter to use Tailwind v4.
• Vite Lit + Intlayer - Per-component i18n solution for app and design-systems.

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 - 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.
• 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.
• Mappa - Fast import map generator for ES modules, resolving bare specifiers from package.json dependencies.
• vite-plugin-lit - Vite plugin for Lit adding HMR support, shadow root CSS helpers and a DevTools panel.

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.
• @web-types/lit - Attribute completion for HTML inside of tagged template literals.
• vim-html-template-literals - Syntax highlighting and indentation for HTML inside of tagged template literals.

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.

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 Factory - CLI tool for generating, building, testing and publishing web components.
• Web Component DevTools - Browser extension for developers working with 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.

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.

Tutorials

• 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 &lt;lit-element&gt;
• Routing Management with LitElement and TypeScript
• Some things to know about Lit

Videos

Other Tools

• Lit 3.0 Launch Event
• Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)
• lit-HTML (Chrome Dev Summit 2017)