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.
- General resources
- Community
- Overview
- Starter Templates
- Codelabs
- Tutorials
- Lit Labs
- Extensions
- Design Systems
- Component Libraries
- Standalone Components
- IDE Plugins
- TypeScript Plugins
- Tools
- CDN
- Videos
- Podcasts
- Archive
- Similar libraries
- Other awesome resources
- 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.
- 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.
- 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 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
- Open Web Components Examples
- Recreating The Arduino Pushbutton Using SVG And <lit-element>
- Routing Management with LitElement and TypeScript
@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.@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.
- AXA Pattern Library - AXA CH UI components library built with LitElement.
- Brightspace UI core - Collection of web components for building Brightspace applications.
- Carbon Custom Elements - 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.
- Pharos Design System - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
- 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!
- 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.
- LRNWebComponents - ELMS:LN produced web components for any project.
- 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.
- 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.<dile-modal>
- Web Component to implement a modal box, based on LitElement.<erd-editor>
- ERD Editor element database modeling tool built with LitElement<granite-qrcode-generator>
- Custom element to generate and render QR Codes, using qr.js library.<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.<stl-part-viewer>
- LitElement web component that utilizes Three.js to display an STL model file.
- 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 lit-html.
- ts-lit-plugin - Plugin that adds type checking and code completion for lit-html. Used by
vscode-lit-plugin
. - typescript-lit-html-plugin - TypeScript server plugin that adds IntelliSense for lit-html. Used by
vscode-lit-html
.
- babel-plugin-lit-property-types-from-ts - Babel plugin for automatically setting a property's
type
based on its TypeScript type. - babel-plugin-template-html-minifier - Babel plugin for minifying HTML in tagged template strings.
- eslint-plugin-lit - ESLint plugin for lit-html template strings.
- eslint-plugin-lit-a11y - Accessibility linting plugin for lit-html
- lit-analyzer - CLI that type checks bindings in lit-html templates.
- rollup-plugin-minify-html-literals - Rollup plugin to minify HTML in tagged template strings.
- rollup-plugin-inline-lit-element - Rollup plugin to inline external styles in LitElement and transpile decorators.
- rollup-plugin-lit-css - Rollup plugin to import CSS files as LitElement tagged
css
template strings. - rollup-plugin-postcss-lit - Rollup plugin to load PostCSS-processed stylesheets in LitElement components.
- web-components-codemods - Codemods for Web Components compatible with lit-html template literals.
- Web Component DevTools - Browser extension for developers working with Web Components.
The following content delivery networks provide ES module versions of Lit:
See this issue where the static build for CDN distribution is discussed.
- Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)
- lit-HTML (Chrome Dev Summit 2017)
- Lit Beta Launch Event (2021)
- 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.
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
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.
If you want more awesome resources, check the awesome list!