lit-html

Efficient, Expressive, Extensible HTML templates in JavaScript


Documentation

Full documentation is available at lit-html.polymer-project.org.

Docs source is in the docs folder. To build the site yourself, see the instructions in docs/README.md.

Overview

lit-html lets you write HTML templates in JavaScript with template literals.

lit-html templates are plain JavaScript and combine the familiarity of writing HTML with the power of JavaScript. lit-html takes care of efficiently rendering templates to DOM, including efficiently updating the DOM with new values.

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

// This is a lit-html template function. It returns a lit-html template.
const helloTemplate = (name) => html

;

// This renders

Hello Steve!

to the document body
render(helloTemplate('Steve'), document.body);

// This updates to

Hello Kevin!

, but only updates the ${name} part
render(helloTemplate('Kevin'), document.body);
`

lit-html provides two main exports:

* html: A JavaScript template tag used to produce a TemplateResult, which is a container for a template, and the values that should populate the template.
* render(): A function that renders a TemplateResult to a DOM container, such as an element or shadow root.

Installation

`bash
$ npm install lit-html
``

Contributing

Please see CONTRIBUTING.md.