lit-html

An efficient, expressive, extensible HTML templating library for JavaScript

Get Started

Next-generation HTML Templates in JavaScript

lit-html lets you write HTML templates in JavaScript, then efficiently render and re-render those templates together with data to create and update DOM:

import {html, render} from 'lit-html';

// A lit-html template uses the `html` template tag:
let sayHello = (name) => html`<h1>Hello ${name}</h1>`;

// It's rendered with the `render()` function:
render(sayHello('World'), document.body);

// And re-renders only update the data that changed, without
// VDOM diffing!
render(sayHello('Everyone'), document.body);

Why use lit-html?

Efficient

lit-html is extremely fast. It uses fast platform features like HTML <template> elements with native cloning.

Unlike VDOM libraries, lit-html only ever updates the parts of templates that actually change - it doesn’t re-render the entire view.

Expressive

lit-html gives you the full power of JavaScript and functional programming patterns.

Templates are values that can be computed, passed to and from functions and nested. Expressions are real JavaScript and can include anything you need.

lit-html support many kind of values natively: strings, DOM nodes, heterogeneous lists, nested templates and more.

Extensible

lit-html is extremely customizable and extensible.

Directives customize how values are handled, allowing for asynchronous values, efficient keyed-repeats, error boundaries, and more. lit-html is like your very own a template construction kit.

lit-html is not a framework, nor does it include a component model. It focuses on one thing and one thing only: efficiently creating and updating DOM. It can be used standalone for simple tasks, or combined with a framework or component model, like Web Components, for a full-featured UI development platform.

Browser Compatibility

lit-html works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera).

chrome logo firefox logo internet explorer logo edge logo safari logo opera logo

Announcement at Polymer Summit 2017