Introduction

lit-html is a simple, modern, safe, small and fast HTML templating library for JavaScript.

lit-html lets you write HTML templates in JavaScript using template literals with embedded JavaScript expressions. lit-html identifies the static and dynamic parts of your templates so it can efficiently update just the changed portions.

Building components? lit-html is not tied to any component model, it focuses only on creating and updating DOM. If you want to build components, check out LitElement, a library for building web components using lit-html templates.

lit-html templates are tagged template literals - they look like JavaScript strings but are enclosed in backticks (`) instead of quotes - and tagged with lit-html's html tag:

html`<h1>Hello ${name}</h1>`

Since lit-html templates almost always need to merge in data from JavaScript values, and be able to update DOM when that data changes, they'll most often be written within functions that take some data and return a lit-html template, so that the function can be called multiple times:

let myTemplate = (data) => html`
  <h1>${data.title}</h1>
  <p>${data.body}</p>`;

lit-html is lazily rendered. Calling this function will evaluate the template literal using lit-html html tag, and return a TemplateResult - a record of the template to render and data to render it with. TemplateResults are very cheap to produce and no real work actually happens until they are rendered to the DOM.

To render a TemplateResult, call the render() function with a result and DOM container to render to:

const result = myTemplate({title: 'Hello', body: 'lit-html is cool'});
render(result, document.body);

Ready to try it yourself? Head over to Getting Started.

Edit this page