Awesome lit-html

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
  • Renderers
  • LitElement Extensions
  • Other
• Components
  • Component Libraries
  • Individual Components
• Starter Templates
• IDE Plugins
• TypeScript Plugins
• Tools
• CDN
• Static Site Generators
• Examples
• Videos
• Podcasts
• Blogs
• Projects
• Inspired Solutions
• Other awesome resources

General resources

• Documentation
• GitHub repository

Community

• lit-html Twitter
• Slack Channel

Overview

• Lightning-fast templates & Web Components: lit-html & LitElement

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.

• @corpuscule/lit-html-renderer - lit-html based renderer for Corpuscule.
• @helikopter/render-lit-html - lit-html based renderer for Helicopter.
• @moleculejs/molecule-lit - lit-html based renderer for Molecule.
• @skatejs/element-lit-html - lit-html based renderer for SkateJS.
• icomponent-lit - lit-html based renderer for icomponent.

LitElement Extensions

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

• @adobe/lit-mobx - Mixin and base class for using mobx with LitElement.
• @apollo-elements/lit-apollo - LitElement integrations with Apollo GraphQL.
• @collaborne/lit-flexbox-literals - Provides LitElement CSS literals & classes ported from @polymer/iron-flex-layout.
• @morbidick/lit-element-notify - Small mixin for LitElement to get easy change events via the properties getter.
• fluent-localize-mixin - LitElement extension that provides easy l10n out of the box.
• haunted-lit-element - A missing connection between Haunted and LitElement.
• lit-robot - LitElement integration with Robot.
• lit-element-state - Simple shared app state management for LitElement.
• nextbone - Backbone re-imagined with ES classes and decorators for using with LitElement.
• wc-context - A context implementation for web components with LitElement integration.
• lit-element-state-decoupler - Utility for state handling outside of the component for LitElement.

Other

• @feature-hub/dom - Library for building a Feature Hub integrator using Web Components.

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

• open-wc-starter-app - Starter app based on Open Web Components Recommendations.
• generator-lit-element-next - Generator for developing your next custom element with latest LitElement in TypeScript.
• pwa-starter - LitElement edition of the PWABuilder pwa-starter.
• @rxdi/starter-client-lit-html - Client side application build with @rxdi, lit-html, GraphQL, dependency injection.

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 lit-html.
• lit-web-components-vscode-extension-pack - A set of VS Code extensions useful for developing LitElement Web Components.

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

• 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.
• lit-loader - LitElement Single File Component loader for Webpack.
• Nutmeg - CLI tool to build, test, and publish vanilla Web Components with a little spice.
• open-wc - Set of recommendations to help you generate, test, lint, demo, and publish Web Components.
• web-components-codemods - Codemods for Web Components compatible with lit-html template literals.

CDN

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

• unpkg.com
  • lit-html
  • lit-element
• Pika CDN
  • lit-html
  • lit-element

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

• lit-demos - Examples for using the lit-html library and LitElement base class.
• lit-html workshop

Videos

• Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)
• lit-HTML (Chrome Dev Summit 2017)
• VDOM vs lit-html - HTTP203
• Declarative Reactive Web Components with Justin Fagnani
• Building a Complex Application with Web Components and LitElement

Podcasts

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

Blogs

• A gentle introduction to lit-html
• lit-html templates from zero to hero
• lit-html Part 1 - A solution for DOM management in web components
• lit-html Part 2 - Working with attributes and properties
• Getting started with LitElement and TypeScript
• Routing Management with LitElement and TypeScript
• Navigation Lifecycle using Vaadin Router, LitElement and TypeScript
• Recreating The Arduino Pushbutton Using SVG And <lit-element>
• Building a chat with Twilio, lit-html, Parcel and TypeScript
• Making a fullstack CRUD app with LitHTML, Redux, Express, and Webpack
• The future of Polymer & lit-html
• A night experimenting with Lit-HTML
• LitElement To Do App
• A new, lean way of creating web apps
• LitElement with Rollup, Babel & Karma
• Let's Build Web Components! Part 5: LitElement
• Render HTML with Vanilla JavaScript and lit-html
• Updating blog-pwa from Polymer to LitElement, Workbox, and Rollup
• Here's a minimalist no-frills Redux Toolkit & LitElement example

Projects

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

If you want more awesome resources, check the awesome list!

License