lit-html
Advanced tools
Package description
The lit-html npm package is a simple, modern, and efficient library for creating and managing HTML templates with JavaScript. It uses JavaScript template literals with embedded HTML markup to render dynamic content in web applications. The library is designed to be lightweight and fast, with a focus on minimizing the amount of work needed to update the DOM when the application state changes.
Dynamic Template Binding
lit-html allows you to bind data dynamically to your HTML templates using JavaScript expressions within template literals. The example code shows how you can insert a variable 'name' into a paragraph element.
`<p>Hello, ${name}!</p>`Conditional Rendering
You can use JavaScript ternary operators to conditionally render parts of your template. This example demonstrates rendering a different paragraph element based on the truthiness of a 'condition' variable.
`${condition ? html`<p>True</p>` : html`<p>False</p>`}`Repeating Templates
lit-html provides a straightforward way to render lists or repeat templates by using standard JavaScript array methods like 'map'. In this code, 'items' is an array that is being mapped to a list of 'li' elements.
`${items.map(item => html`<li>${item}</li>`)}`Event Handling
Event handling in lit-html is done by prefixing the event name with an '@' symbol and assigning a handler function. The example shows a button element that calls the 'handleClick' function when clicked.
`<button @click=${handleClick}>Click me</button>`Composability
lit-html templates can be composed together to build complex UIs. This example demonstrates how you can combine different template parts, like 'headerTemplate' and 'footerTemplate', to create a complete layout.
`${headerTemplate} ${footerTemplate}`React is a popular library for building user interfaces. It also uses a component-based model and JSX for templating, which is similar to lit-html's use of template literals. However, React has a larger ecosystem and provides more features out of the box, such as state management and lifecycle methods.
Vue is another popular framework that offers a reactive and composable data model. It uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component state. Vue's approach is more similar to traditional HTML and less JavaScript-centric compared to lit-html.
Svelte is a compiler-based framework that shifts much of the work to compile time, resulting in smaller runtime size and potentially better performance. Like lit-html, Svelte uses a templating syntax that is close to standard HTML but with additional features for reactivity and state management.
hyperHTML is a lightweight library for creating hyper textual content. It shares a similar philosophy with lit-html, focusing on tagged template literals as a means to render and update the DOM efficiently. Both libraries aim to be minimalistic and performant.
Readme
Efficient, 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.
This is a pre-release of Lit 3.0, the next major version of Lit.
Lit 3.0 has very few breaking changes from Lit 2.0:
Lit 3.0 should require no changes to upgrade from Lit 2.0 for the vast majority of users. Once the full release is published, most apps and libraries will be able to extend their npm version ranges to include both 2.x and 3.x, like "^2.7.0 || ^3.0.0".
Lit 2.x and 3.0 are interoperable: templates, base classes, directives, decorators, etc., from one version of Lit will work with those from another.
Please file any issues you find on our issue tracker.
Full documentation is available at lit.dev.
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.$ npm install lit-html
Or use from lit:
$ npm install lit
Please see CONTRIBUTING.md.
FAQs
HTML templates literals in JavaScript
The npm package lit-html receives a total of 1,737,887 weekly downloads. As such, lit-html popularity was classified as popular.
We found that lit-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 14 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.