Skip to content
An efficient, expressive, extensible HTML templating library for JavaScript.
TypeScript HTML Other
Branch: master
Clone or download
arthurevans Add community page, update slack invite link. (#1012)
Some tests are failing, but pretty sure they're not related to this doc update.
Latest commit 459fa23 Oct 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update bug report template Feb 9, 2019
.vscode Fix TypeScript compilation errors May 4, 2018
demo/clock Update demo to load polyfills and center the clock. Nov 27, 2018
docs Add community page, update slack invite link. (#1012) Oct 22, 2019
src Fix typo in trusted types (#1003) Sep 10, 2019
test Add trusted types support to lit html (#970) Sep 10, 2019
tools Add <title> tags to doc pages Jun 26, 2018
.clang-format Address review comments Aug 31, 2017
.editorconfig Setup clang-format, tslint and editorconfig Aug 27, 2017
.gitignore Better API docs (#693) Dec 18, 2018
.npmignore Add .npmignore to actually publish the lib/ dir Jul 8, 2017
.travis.yml Run tachometer as separate Travis job, and temporarily pin to Firefox… May 21, 2019
CHANGELOG.md Mention trusted types in the changelog (#1004) Oct 14, 2019
CODE_OF_CONDUCT.md G+ is shut down for consumers May 3, 2019
CONTRIBUTING.md Fix typos in contributing doc May 3, 2019
LICENSE Update LICENSE Sep 1, 2017
README.md Remove status disclaimer now 1.0.0 has shipped (#806) Feb 21, 2019
api.md Add the directive() function, don’t treat function values as directiv… Aug 12, 2017
check-version-tracker.js Add check-version-tracker script Jul 9, 2019
package-lock.json Add trusted types support to lit html (#970) Sep 10, 2019
package.json Add trusted types support to lit html (#970) Sep 10, 2019
rollup.config.js Update to Rollup v1 Aug 16, 2019
travis-bench.sh Attach tachometer checks to the right commit and distinguish with lab… Jun 6, 2019
tsconfig.json Add trusted types support to lit html (#970) Sep 10, 2019
tslint.json Remove unnecessary type assertions (#846) Mar 2, 2019
wct.conf.json Fix Chrome on Travis (#251) Jan 14, 2018

README.md

lit-html

Efficient, Expressive, Extensible HTML templates in JavaScript

Build Status Published on npm Mentioned in Awesome lit-html

Documentation

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

Docs source is in the docs folder. To build the site youself, 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.

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 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

$ npm install lit-html

Contributing

Please see CONTRIBUTING.md.

You can’t perform that action at this time.