https://lit.dev/

#

 1. Documentation[v2]
 2. Tutorials
 3. Playground
 4. Blog
 5. Search
    [                    ]
    Cancel
 6.  

Lit Home

 1. Documentation[v2]
 2. Tutorials
 3. Playground
 4. Blog
 5. Search
    [                    ]
    Cancel
 6.  

 Have a question, or looking to chat? Join our Discord server!

[logo]

Simple. Fast. Web Components.

> npm i lit Get Started
[standards]

Simple

Skip the boilerplate

Building on top of the Web Components standards, Lit adds just what
you need to be happy and productive: reactivity, declarative
templates and a handful of thoughtful features to reduce boilerplate
and make your job easier. Every Lit feature is carefully designed
with web platform evolution in mind.

[lightning]

Fast

Tiny footprint, instant updates

Weighing in at around 5 KB (minified and compressed), Lit helps keep
your bundle size small and your loading time short. And rendering is
blazing fast, because Lit touches only the dynamic parts of your UI
when updating -- no need to rebuild a virtual tree and diff it with
the DOM.

[future]

Web Components

Interoperable & future-ready

Every Lit component is a native web component, with the superpower of
interoperability. Web components work anywhere you use HTML, with any
framework or none at all. This makes Lit ideal for building shareable
components, design systems, or maintainable, future-ready sites and
apps.

import {html, css, LitElement} from 'lit';

import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')

export class SimpleGreeting extends LitElement {

  static styles = css`p { color: blue }`;

  @property()

  name = 'Somebody';

  render() {

    return html`<p>Hello, ${this.name}!</p>`;

  }

}

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {

  static styles = css`p { color: blue }`;

  static properties = {

    name: {type: String},

  };

  constructor() {

    super();

    this.name = 'Somebody';

  }

  render() {

    return html`<p>Hello, ${this.name}!</p>`;

  }

}

customElements.define('simple-greeting', SimpleGreeting);

<simple-greeting name="World"></simple-greeting>

Edit this example in the Lit Playground

Custom Elements

Lit components are standard custom elements, so the browser treats
them exactly like built-in elements. Use them in hand-written HTML or
framework code, output them from your CMS or static site builder,
even create instances in JavaScript -- they just work!

Scoped styles

Lit scopes your styles by default, using Shadow DOM. This keeps your
CSS selectors simple and ensures that your component's styles don't
affect -- and aren't affected by -- any other styles on the page.

Reactive properties

Declare reactive properties to model your component's API and
internal state. A Lit component efficiently re-renders whenever a
reactive property (or corresponding HTML attribute) changes.

Declarative templates

Lit templates, based on tagged template literals, are simple,
expressive and fast, featuring HTML markup with native JavaScript
expressions inline. No custom syntax to learn, no compilation
required.

Build anything with Lit

Shareable Components

Need to deliver interactive content or features that drop into any
site, built on any stack? Because they're natively supported by
browsers, web components are the perfect solution -- and Lit makes
them easy to build.

Design Systems

A design system helps you create experiences that are consistently
excellent and on brand. But what if your organization uses multiple
frameworks? With Lit, you can build one set of components that works
for every team.

Sites and Apps

Use Lit components to progressively enhance a static site, or build
an entire app. By embracing Web Components, Lit minimizes lock-in and
promotes maintainability: update or migrate one component at a time,
without disrupting product development.

Many of the world's most forward-looking organizations are building
with Lit

 
Spectrum Web Components
 
Auro Design System
 
Momentum UI
Many projects
 
Frontend UI
 
Carbon Web Components
 
Lion Web Components
 
PWA Starter
 
One Platform Components
 
UI5 Web Components
 
Components
 
Hilla Framework
 
Clarity Core
 
Wired Elements
 
Pharos Design System

Explore Lit

Try our live tutorials -- no installation needed

Tutorials

Tinker with our interactive examples

Playground

Dive deep with our extensive docs

Documentation

Check out all the options for jumping in

Get started

Connect with Lit and the web components community

Stay up to date with new releases, learn more about how to use web
components and share projects and feedback with our team. All
community participation is subject to Lit's Code of Conduct -- be
excellent to each other!

 1. Lit Discord Chat about Lit with the Lit community and dev team
 2. Twitter Stay up to date with the latest news
 3. GitHub File issues, read the code, and make contributions
 4. Stack Overflow Ask and answer questions about Lit

[logo] [logo]
      

Copyright Google LLC. Code licensed under BSD-3-Clause. Documentation
licensed under CC-BY-3.0.