Skip to main content

​
Lit

Lit is a simple library for building fast, lightweight web components. At its core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that’s tiny, fast, and expressive.

Quickstart

Build your first Lit component in minutes

Installation

Install Lit and set up your project

Core Concepts

Learn the fundamentals of Lit components

API Reference

Browse the full API documentation

​
Why Lit?

Standards-Based

Built on web standards: Custom Elements, Shadow DOM, and HTML templates. Works everywhere the web does.

Tiny & Fast

Lit adds only about 5KB (minified + compressed) on top of the browser’s built-in web component APIs.

Reactive

Declared reactive properties automatically trigger efficient re-renders when their values change.

Interoperable

Web components built with Lit work anywhere HTML works — in any framework or with no framework at all.

​
Quick example

my-element.ts
import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('my-element')
export class MyElement extends LitElement {
  static styles = css`
    :host {
      display: block;
      padding: 16px;
    }
    h1 { color: #344cfc; }
  `;

  @property()
  name = 'World';

  render() {
    return html`<h1>Hello, ${this.name}!</h1>`;
  }
}
Use it in HTML just like any built-in element: 
<my-element name="Lit"></my-element>

​
Explore the docs

Components

Understand the LitElement component model

Templates

Learn Lit’s expressive html tagged templates

Reactive Properties

Manage component state with reactive properties

Styles

Apply scoped styles with Shadow DOM

Reactive Controllers

Compose reusable stateful logic

Server-Side Rendering

Render Lit components on the server

Build docs developers (and LLMs) love

Get started for freeTalk to us