Awesome Lit Awesome

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

  • @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

Design Systems

Component Libraries

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.
  • <lit-image-cropper> - Fast and lightweight image cropper component.
  • <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

Linting

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

Other Tools

CDN

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

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

Podcasts

Archive

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

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

CC0