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.
@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.
@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.
<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.
<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.
typefor reactive properties declared in Lit components based on TypeScript type annotations.
The following content delivery networks provide ES module versions of Lit:
See lit.dev documentation for using bundles.
The following articles refer to older versions of lit-html and LitElement.
These libraries are not related to Lit, but are built using similar concepts. They use
template literal, and leverage the benefits of the same IDE Plugins for syntax highlighting.
If you want more awesome resources, check the awesome list!