lit-html is currently in development. It's on the fast track to a 1.0 release, so we encourage you to use it and give us your feedback, but there are things that haven't been finalized yet and you can expect some changes.
Efficient, Expressive, Extensible HTML templates in JavaScript
Full documentation is available at lit-html.polymer-project.org.
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.
import {html, render} from 'lit-html';
// This is a lit-html template function. It returns a lit-html template.
const helloTemplate = (name) => html`<div>Hello ${name}!</div>`;
// This renders <div>Hello Steve!</div> to the document body
render(helloTemplate('Steve'), document.body);
// This updates to <div>Hello Kevin!</div>, 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 aTemplateResult
, which is a container for a template, and the values that should populate the template.render()
: A function that renders aTemplateResult
to a DOM container, such as an element or shadow root.
$ npm install lit-html
lit-html
is under active development and has not yet had a 1.0 release. The
internal API may still change somewhat. The html
and render
API is stable.
Please see CONTRIBUTING.md.