Need help with lit-html?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Polymer
6.8K Stars 406 Forks BSD 3-Clause "New" or "Revised" License 658 Commits 173 Opened issues

Description

An efficient, expressive, extensible HTML templating library for JavaScript.

Services available

!
?

Need anything else?

Contributors list

No Data

lit-html

Efficient, Expressive, Extensible HTML templates in JavaScript

Build Status Published on npm Join our Slack 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 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.

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

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

$ npm install lit-html

Contributing

Please see CONTRIBUTING.md.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.