# Awesome Lit

> A curated list of awesome Lit resources.

Lit — a simple library for building fast, lightweight web components.

At Lit’s core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that’s tiny, fast and expressive.

## Contents

- General resources
- Community
- Overview
- Starter Templates
- Codelabs
- Tutorials
- Examples
- Lit Labs
- Extensions
- Design Systems
- Component Libraries
- Standalone Components
- Tools
  - Building
  - Linting
  - IDE Plugins
  - TypeScript Plugins
  - Other Tools
- CDN
- Integrations
- Videos
- Podcasts
- Archive
- Similar libraries
- Other awesome resources

## General resources

- Documentation
- Tutorials
- Playground
- Blog

## Community

- GitHub
- GitHub Discussions
- Twitter
- Slack
- Stack Overflow
- YouTube

## Overview

- Lightning-fast templates & Web Components: lit-html & LitElement
- Lit 2.0: Meet Lit, all over again!
- Announcing Lit 2 stable release

## Starter Templates

- 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 TS Starter - 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

- 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

## Examples

- 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 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.
- `@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.
- `@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.
- `lit-vaadin-helpers` - Helpers for using Vaadin web components with Lit 2.
- `ullr` - Build Web Components with functional programming using Lit.

## Design Systems

- 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.
- 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.
- Shoelace - Collection of professionally designed UI components built on a framework-agnostic technology.
- Spectrum Web Components - Adobe Spectrum design language implementation built with LitElement.
- UI5 Web Components - Enterprise-flavored sugar on top of native APIs!

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

## Standalone Components

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

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

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

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

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

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

## CDN

The following content delivery networks provide ES module versions of Lit:

- cdn.esm.sh
- jsDelivr CDN
- JSPM CDN
- Skypack CDN
- unpkg.com

See lit.dev documentation for using bundles.

## Integrations

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

## Videos

- 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

## Podcasts

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

## Archive

The following articles refer to older versions of lit-html and LitElement.

- 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

## Similar libraries

These libraries are not related to Lit, but are built using similar concepts. They use `html` tagged template literal, and leverage the benefits of the same IDE Plugins for syntax highlighting.

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

## Other awesome resources

If you want more awesome resources, check the awesome list!

## License