awesome-lit

Web component library guide

A curated list of resources and tools for building fast, lightweight web components using Lit

A curated list of awesome Lit resources.

GitHub
2k stars
77 watching
86 forks
last commit: 4 months ago
Linked from 3 awesome lists

awesomeawesome-listlit-html

Awesome Lit / General resources
Documentation
Tutorials
Playground
Blog

Awesome Lit / Community
Discord
GitHub 18,944 about 1 month ago
GitHub Discussions 18,944 about 1 month ago
Twitter
Stack Overflow
YouTube

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

Awesome Lit / Starter Templates
LitElement JavaScript starter 192 6 months ago Sample component using LitElement with JavaScript
LitElement TypeScript starter 510 6 months ago Sample component using LitElement with TypeScript
hello-web-components 26 about 1 month ago Simple starter web component written in TypeScript using Lit
Lit Sass JavaScript Starter 1 over 2 years ago Project that has a simple setup for SASS + JS + Lit, using Rollup
Lit Sass TypeScript Starter 25 over 2 years ago Project that has a simple setup for SASS + TS + Lit, using Rollup
Lit Webpack Starter 10 5 months ago Starter for multipage apps with Lit and Typescript, using Webpack
Open Web Components Generator Starter app based on Open Web Components Recommendations
pwa-starter 1,174 2 months ago LitElement edition of the PWABuilder pwa-starter
pwa-lit-template 181 over 1 year ago Build Progressive Web Applications following the modern web standards
Vite Lit Element TS SASS 73 over 1 year ago Example Vite project using Lit 2, Typescript, and SASS
Vite Lit Starter 69,303 about 1 month ago Lit based template preset for Vite
Vite Lit TS Starter 69,303 about 1 month ago Lit and TypeScript based template preset for Vite

Awesome Lit / 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

Awesome Lit / 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

Awesome Lit / Examples
Lit Native 41 over 3 years ago Reuse Lit web components on native platforms
Lit Node Editor 21 over 3 years ago Node editor built with canvas API and simple graph data structure
Lit 3D Piano 20 over 2 years ago 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 5 over 3 years ago Minimal example to get RxDB running with Vite

Awesome Lit / 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

Awesome 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 57 6 months ago 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 26 4 months ago 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 63 about 1 month ago Build Web Components with functional programming using Lit

Awesome Lit / Design Systems
AXA Pattern Library 125 about 1 year ago AXA CH UI components library built with LitElement
Brightspace UI core 66 about 1 month ago Collection of web components for building Brightspace applications
Carbon Web Components 478 almost 2 years ago Carbon Design System variant on top of Web Components
Clarity Core Web Components 169 about 1 month ago Suite of web components for Clarity Design System
Kor 274 almost 2 years ago An open source Design System and lightweight UI Component Library
Lion 1,777 about 1 month ago Highly performant, accessible and flexible Web Components
Material Web Components 9,441 about 1 month ago Material Design implemented as Web Components
Momentum UI Web Components 201 about 1 month ago Set of UI components based on Momentum Design
Outline Design System 129 10 months ago Web component based design system starter kit
Pharos Design System 123 about 1 month ago JSTOR's design system to create cohesive, supportive, and beautiful experiences
Red Hat Design System 104 about 1 month ago Web components for building uniform experiences with the Red Hat brand
Shoelace 13,005 about 1 month ago Collection of professionally designed UI components built on a framework-agnostic technology
Spectrum Web Components 1,301 about 1 month ago Adobe Spectrum design language implementation built with LitElement
UI5 Web Components 1,582 about 1 month ago Enterprise-flavored sugar on top of native APIs!

Awesome Lit / Component Libraries
Apollo Elements 416 11 months ago Custom elements meet Apollo GraphQL
Blackstone UI 91 2 months ago Web components for creating interfaces built with lit-html and LitElement
Chartjs Web Components Web components for chartjs
Clever components 222 about 1 month ago Collection of Web Components made by Clever Cloud
Curvenote 182 almost 2 years ago Web components for creating interactive scientific articles
Dile Components 83 about 1 month ago General use Web Components for websites and applications
ESP Web Tools 458 about 1 month ago Allow flashing ESPHome or other ESP-based firmwares via the browser
Furo Webcomponents 12 about 1 month ago Enterprise ready set of web components which work best with Eclipse Furo
Fusion Web Components 12 about 1 month ago Ser of web components used by Equinor Fusion
Ignite UI Web Components 121 about 1 month ago Complete library of UI components from Infragistics
LRNWebComponents 246 about 1 month ago ELMS:LN produced web components for any project
Medblocks UI 54 about 2 months ago Web Components for rapid development of openEHR and FHIR systems
Microsoft Graph Toolkit 966 about 1 month ago Collection of web components for the Microsoft Graph
Mutation testing elements 28 about 1 month ago A schema for mutation testing results with the web components to visualize it
One Platform Components 30 3 months ago Set of web components for Red Hat One Platform
Playground Elements 552 4 months ago Serverless code experiences with web components
Stripe Elements 81 about 1 year ago Custom Element Wrapper for Stripe.js v3 Elements
Titanium Elements 18 about 1 month ago Collection of lightweight web components used by Leavitt Group Enterprises
TrendChart Elements 50 6 months ago Components to generate simple charts representing trends
Umbraco UI Components 125 about 1 month ago Collection of user interface web components for Umbraco CMS
Vidstack Elements 2,423 about 1 month ago Spec-compliant customizable, extensible, accessible and universal media elements
VSCode Webview Elements 0 about 1 year ago Components for creating VSCode extensions which use the Webview API
Web Components for TEI Publisher 18 about 1 month ago Web components used by TEI Publisher and apps generated by it
Webmarkets web components 1 about 1 month ago Set of Webmarkets' public web components
Wired Elements 10,537 over 1 year ago Collection of elements that appear hand drawn
Wokwi Elements 187 3 months ago Web Components for Arduino and various electronic parts

Awesome Lit / Standalone Components
<api-viewer> 271 about 1 month ago API documentation and live playground for Web Components
<app-datepicker> 180 7 months ago Datepicker element built with LitElement and Material Design 2
<burgton-button> 17 almost 2 years ago Simple to use, customizable and accessible burger-button element
<code-block> 30 over 1 year ago Web component that displays colorfully formatted code with Prism.js and LitElement
<codesandbox-button> 0 over 1 year ago Custom Element that shows a CodeSandbox demo when you click on it
<editor-container> 4,606 about 1 month ago Block based editor, designed for general-purpose collaborative applications
<granite-qrcode-generator> 14 almost 2 years ago Custom element to generate and render QR Codes, using qr.js library
<helium-animated-pages> 16 about 1 month ago Web component for creating CSS animations built with Lit
<json-viewer> 179 3 months ago Web Component to visualize JSON data in a tree view
<light-gallery> 6,578 about 2 months ago Full featured JavaScript image and video gallery for Lit
<lit-datatable> 57 about 2 years ago Material Design implementation of a data table, powered by LitElement
<lit-image-cropper> 9 4 months ago Fast and lightweight image cropper component
<lottie-player> 1,572 about 1 month ago Web Component for easily embedding and playing Lottie animations
<model-viewer> 7,060 about 2 months ago A web component for rendering interactive 3D models
<rapi-doc> 1,724 about 1 month ago Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec
<round-slider> 85 4 months ago Simple round slider web component built with Lit
<stl-part-viewer> 20 over 1 year ago LitElement web component that utilizes Three.js to display an STL model file

Awesome Lit / Tools / Building
babel-plugin-lit-property-types-from-ts Babel plugin for setting 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

Awesome Lit / 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

Awesome Lit / 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 73 4 months ago Syntax highlighting and indentation for HTML inside of tagged template literals
@web-types/lit Attribute completion for HTML inside of tagged template literals

Awesome Lit / 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

Awesome Lit / 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 137 4 months ago Browser extension for developers working with Web Components
Web Component Factory CLI tool for generating, building, testing and publishing web components

Awesome Lit / CDN
cdn.esm.sh
jsDelivr CDN
JSPM CDN
Skypack CDN
unpkg.com

Awesome Lit / Integrations
Bridgetown Lit Renderer 13 about 1 month ago SSR + hydration of Lit components for Bridgetown
Fable.Lit 93 almost 2 years ago Collection of tools to embed HTML code into F# code with the power of Lit
Ruby2JS 431 6 months ago Minimal yet extensible Ruby to JavaScript conversion

Awesome Lit / 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

Awesome Lit / 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

Awesome Lit / Archive
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

Awesome Lit / Similar libraries
haunted React's Hooks API but for standard web components and hyperHTML or lit-html
htm 8,748 12 months ago Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support
hybrids 3,061 3 months ago UI library for creating Web Components with simple and functional API
lit-ntml 82 over 1 year ago Lightweight and modern templating for SSR in Node.js, inspired by lit-html

Backlinks from these awesome lists:

More related projects: