HTML templates literals in JavaScript
npm install lit-htmlEfficient, Expressive, Extensible HTML templates in JavaScript
lit-html is the template system that powers the Lit library for building fast web components.
When using lit-html to develop web components, most users should import lit-html via the lit package rather than installing and importing from lit-html directly.
Full documentation is available at lit.dev/docs/templates/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);
` 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
`Or use from
:`bash
$ npm install lit
``Please see CONTRIBUTING.md.