Courses & TutorialsProgramming

Awesome Lit HTML – Massive Collection of Resources

A curated list of awesome lit-html resources.

lit-html — an efficient, expressive, extensible HTML templating library for JavaScript.

Contents

General resources

Community

Overview

Implementations

Sorted by creation date (oldest first).

  • lit-element – Simple base class for creating fast, lightweight Web Components.
  • @gluon/gluon – Lightweight library for building Web Components and applications.
  • @lit-any/core – Partials library, which uses lit-html to compose views and forms from smaller templates.
  • lit-html-element – Base class for creating Web Components using lit-html.
  • fit-html – Combination of lit-html, Web Components and Redux.
  • lit-html-brackets – A lit-html extension that uses a bracket syntax similar to Angular’s template syntax.
  • @littleq/element-lite – A take on using lit-html and Polymer’s property mixin.
  • @popeindustries/lit-html-server – Render lit-html templates on the server as Node.js streams.
  • ullr – Building Web Components with Functional Programming Using lit-html.
  • ce-decorators – TypeScript library for building Web Components based on decorators proposal and lit-html.
  • @appnest/lit-translate – Lightweight i18n library providing a lit-html directive.
  • haunted – React’s Hooks API but for standard web components and hyperHTML or lit-html.
  • fuco – Functional component like React, but for Web Components.
  • lit-up – Minimal yet scalable state pattern for reactive web apps with lit-html templates
  • lit-app – Isomorphic lit-html based context for front-end apps, server-side rendering and static sites
  • perlite – Declarative way to create rich client-side widgets designed with server-side apps in mind.

Renderers

The following libraries allow using lit-html as a renderer, while also providing alternatives such as HyperHTML or JSX.

LitElement Extensions

These are not implementations of lit-html itself but rather community extensions of the official LitElement base class.

Other

Components

Component Libraries

  • Amber Components – Web Components implementation of the Amber Design System.
  • AXA Pattern Library – AXA CH UI components library built with LitElement.
  • Belle UI – High quality UI library based on LitElement.
  • Blackstone UI – Web components for creating interfaces built with lit-html and LitElement.
  • Brightspace UI core – Collection of web components for building Brightspace applications.
  • Bronconents – Modern Web Components built with Lit-Element.
  • Carbon Custom Elements – Experimental variant of Carbon Design System built with Web Components.
  • Chameleon Web Components – Collection of framework-agnostic elements based on the Chameleon Design System.
  • Chartjs Web Components – Web components for chartjs.
  • Clever components – Collection of Web Components made by Clever Cloud.
  • Iooxa – Web components for interactive scientific writing, reactive documents and explorable explanations.
  • Kor – User Interface Component Library based on LitElement.
  • Lion – Highly performant, accessible and flexible Web Components.
  • Lithium UI – Lightweight UI Components that work everywhere.
  • LRNWebComponents – ELMS:LN produced web components for any project.
  • Material Web Components – Material Design implemented as Web Components.
  • 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.
  • Spectrum Web Components – Adobe Spectrum design language implementation built with LitElement.
  • UI5 Web Components – Enterprise-flavored sugar on top of native APIs!
  • VSCode-Webview-Elements – Components for creating VSCode extensions which use the Webview API.
  • Weightless – High quality web components with a small footprint.
  • Wired Elements – Collection of elements that appear hand drawn.
  • Wokwi Elements – Web Components for Arduino and various electronic parts.

Individual 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.
  • <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.

Starter Templates

IDE Plugins

TypeScript Plugins

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

Tools

CDN

The following content delivery networks provide ES module versions of lit-html and LitElement:

Note on using CDN

  1. lit-html directives might not work with LitElement when using Pika CDN.
  2. See this issue where the static build for CDN distribution is discussed.

Static Site Generators

  • Greenwood – Modern and performant static site generator supporting Web Components based development.
  • Hydrogen – Static-site generator built with TypeScript, which uses templating inspired by lit-html.

Examples

Videos

Podcasts

Blogs

Projects

Name URL Source
Create Social Images https://createsocialimages.com Source
DevWeb Content Firehose https://devwebfeed.appspot.com Source
rx-metronome https://rx-metronome.web.app Source
Scandisk https://manzdev.github.io/scandisk-2.0/ Source
Web Skills https://andreasbm.github.io/web-skills/ Source

Inspired Solutions

These libraries do not depend on lit-html, but are inspired by some of its concepts. They use html tagged
template literal, and leverage the benefits of the same IDE Plugins for syntax highlighting.

  • 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.
  • lite-html – A modern replacement for VirtualDOM rendering engines.
  • modulor-html – Missing template engine for Web Components.
  • nanohtml – HTML template strings for the browser with support for Server Side Rendering in Node.
  • picohtml – Powerfully ~2kB (gzip) HTML template strings.
  • tiny-lit – Library for building user interfaces using template literals.

Other awesome resources

Awesome HTML 5 – Massive Collection of Resources

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button