Courses & Tutorials Programming

Awesome Lit HTML – Massive Collection of Resources

admin December 27, 2020

0 31 7 minutes read

Spread the love

A curated list of awesome lit-html resources.

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

General resources
Community
Overview
Implementations
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

Community

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

lit-html directives might not work with LitElement when using Pika CDN.
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

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

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

Contents