Track Awesome Lit Updates Daily
A curated list of awesome Lit resources.
🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 web-padawan/awesome-lit · ⭐ 1.3K · 🏷️ Front-End Development
Dec 26, 2023
Videos / Other Tools
Nov 17, 2023
Component Libraries
- TrendChart Elements (⭐12) - 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.
Nov 06, 2022
Component Libraries
- Umbraco UI Components (⭐92) - Collection of user interface web components for Umbraco CMS.
Sep 20, 2022
Tutorials
Jul 29, 2022
Design Systems
- AXA Pattern Library (⭐120) - AXA CH UI components library built with LitElement.
- Carbon Web Components (⭐460) - Carbon Design System variant on top of Web Components.
- Clarity Core Web Components (⭐134) - Suite of web components for Clarity Design System.
- Momentum UI Web Components (⭐178) - Set of UI components based on Momentum Design.
- Red Hat Design System (⭐64) - Web components for building uniform experiences with the Red Hat brand.
Jul 28, 2022
Extensions
@lit-app/state- Lean and simple global State management for Lit 2.
Jul 26, 2022
General resources
Apr 29, 2022
Component Libraries
- Dile Components (⭐62) - General use Web Components for websites and applications.
Apr 18, 2022
Tools / Building
- esbuild-plugin-lit - ESBuild plugin to import CSS, SVG, HTML, XLIFF files as JavaScript tagged-template literal objects.
Oct 16, 2021
Extensions
@shoelace-style/localize- A micro library for localizing custom elements, providing directives for Lit.
Oct 06, 2021
Starter Templates
- Lit Webpack Starter (⭐9) - Starter for multipage apps with Lit and Typescript, using Webpack.
Oct 04, 2021
Tutorials
Sep 28, 2021
CDN / Other Tools
Sep 25, 2021
Starter Templates
- Vite Lit Starter (⭐62k) - Lit based template preset for Vite.
- Vite Lit TS Starter (⭐62k) - Lit and TypeScript based template preset for Vite.
Extensions
@stefanholzapfel/lit-state- Lightweight reactive state management for Lit 2.
Design Systems
- Outline Design System (⭐111) - Web component based design system starter kit.
Integrations / Other Tools
- Bridgetown Lit Renderer (⭐13) - SSR + hydration of Lit components for Bridgetown.
Sep 24, 2021
Starter Templates
- 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.
- Vite Lit Element TS SASS (⭐66) - Example Vite project using Lit 2, Typescript, and SASS.
Examples
- Polymer → Lit Migration Guide - Code examples showing migration guidance from Polymer to Lit.
Component Libraries
- Furo Webcomponents (⭐12) - Enterprise ready set of web components which work best with Eclipse Furo.
- Fusion Web Components (⭐6) - Ser of web components used by Equinor Fusion.
- Titanium Elements (⭐12) - Collection of lightweight web components used by Leavitt Group Enterprises.
Sep 23, 2021
Examples
- Lit Native (⭐35) - Reuse Lit web components on native platforms.
- Lit Node Editor (⭐18) - Node editor built with canvas API and simple graph data structure.
- Lit 3D Piano (⭐19) - 3D Piano built with Lit, Three.js and Tone.js.
- Open Web Components Examples - Code examples of common patterns using Lit.
- Vite + RxDB + Lit (⭐5) - Minimal example to get RxDB running with Vite.
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.
Integrations / Other Tools
- Fable.Lit (⭐84) - Collection of tools to embed HTML code into F# code with the power of Lit.
- Ruby2JS (⭐414) - Minimal yet extensible Ruby to JavaScript conversion.
Sep 22, 2021
Overview
Component Libraries
- ESP Web Tools (⭐299) - Allow flashing ESPHome or other ESP-based firmwares via the browser.
- Ignite UI Web Components (⭐96) - Complete library of UI components from Infragistics.
- Medblocks UI (⭐44) - Web Components for rapid development of openEHR and FHIR systems.
- Vidstack Elements (⭐1.4k) - Spec-compliant customizable, extensible, accessible and universal media elements.
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 (⭐66) - 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 Factory - CLI tool for generating, building, testing and publishing web components.
Videos / Other Tools
Sep 21, 2021
Community
Overview
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.
@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
- Kor (⭐248) - An open source Design System and lightweight UI Component Library.
- Lion (⭐1.6k) - Highly performant, accessible and flexible Web Components.
- Material Web Components (⭐7.9k) - Material Design implemented as Web Components.
- Pharos Design System (⭐93) - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
- Shoelace (⭐11k) - Collection of professionally designed UI components built on a framework-agnostic technology.
- Spectrum Web Components (⭐1.1k) - Adobe Spectrum design language implementation built with LitElement.
- UI5 Web Components (⭐1.4k) - Enterprise-flavored sugar on top of native APIs!
Component Libraries
- Apollo Elements (⭐408) - Custom elements meet Apollo GraphQL.
- Blackstone UI (⭐76) - Web components for creating interfaces built with lit-html and LitElement.
- Curvenote (⭐164) - Web components for creating interactive scientific articles.
- One Platform Components (⭐26) - Set of web components for Red Hat One Platform.
- Playground Elements (⭐437) - Serverless code experiences with web components.
- Stripe Elements (⭐75) - Custom Element Wrapper for Stripe.js v3 Elements.
- VSCode Webview Elements (⭐75) - 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.
Tools / Other Tools
- Web Component DevTools (⭐119) - Browser extension for developers working with Web Components.
Videos / Other Tools
Sep 20, 2021
General resources
Community
Starter Templates
- LitElement JavaScript starter (⭐168) - Sample component using LitElement with JavaScript.
- LitElement TypeScript starter (⭐452) - Sample component using LitElement with TypeScript.
- hello-web-components (⭐23) - Simple starter web component written in TypeScript using Lit.
- Open Web Components Generator - Starter app based on Open Web Components Recommendations.
- pwa-starter (⭐1.1k) - LitElement edition of the PWABuilder pwa-starter.
- pwa-lit-template (⭐175) - Build Progressive Web Applications following the modern web standards.
Codelabs
Tutorials
Component Libraries
- Wired Elements (⭐9.6k) - Collection of elements that appear hand drawn.
CDN / 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 08, 2020
Standalone Components
<granite-qrcode-generator>- Custom element to generate and render QR Codes, using qr.js library.
Apr 24, 2020
Component Libraries
- Wokwi Elements (⭐150) - Web Components for Arduino and various electronic parts.
Apr 23, 2020
Design Systems
- Brightspace UI core (⭐48) - Collection of web components for building Brightspace applications.
Apr 20, 2020
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 23, 2020
Component Libraries
- Mutation testing elements (⭐26) - A schema for mutation testing results with the web components to visualize it.
Jan 22, 2020
Standalone Components
<codesandbox-button>- Custom Element that shows a CodeSandbox demo when you click on it.
Dec 24, 2019
Standalone Components
<api-viewer>- API documentation and live playground for Web Components.
Nov 21, 2019
Videos / Other Tools
Oct 23, 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 20, 2019
Component Libraries
- Chartjs Web Components (⭐56) - Web components for chartjs.
- LRNWebComponents (⭐230) - ELMS:LN produced web components for any project.
Jul 18, 2019
Similar libraries / Other Tools
- htm (⭐8.4k) - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Jul 17, 2019
Component Libraries
- Microsoft Graph Toolkit (⭐858) - Collection of web components for the Microsoft Graph.
Jul 09, 2019
Component Libraries
- Clever components (⭐195) - Collection of Web Components made by Clever Cloud.
Jul 05, 2019
Videos / Other Tools
Jun 26, 2019
Archive / Other Tools
Feb 19, 2019
Podcasts / Other Tools
- ShopTalk Show 348: Getting lit-html with Justin Fagnani - Another episode with Justin Fagnani as a guest.
Feb 10, 2019
Overview
Sep 26, 2018
Archive / Other Tools
Sep 25, 2018
Archive / Other Tools
Jul 31, 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 (⭐80) - Lightweight and modern templating for SSR in Node.js, inspired by lit-html.
Jul 29, 2018
Similar libraries / Other Tools
- hybrids (⭐2.9k) - UI library for creating Web Components with simple and functional API.
May 27, 2018
Videos / Other Tools