Lit

Description #

Lit is a modern web component library built on top of standard Web Components, designed for fast, lightweight, and reusable UI components.

History #

Lit was developed by Google’s Polymer team and launched in 2019 as a rewrite of LitElement and Polymer into a single modern package. Its goal was to simplify and standardize the creation of web components using minimal dependencies and native APIs.

Hello World Code #

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

class HelloWorld extends LitElement {
  static styles = css`p { color: blue; }`;

  render() {
    return html`<p>Hello, World!</p>`;
  }
}
customElements.define('hello-world', HelloWorld);

How to Run #

Option 1: Online
https://stackblitz.com/edit/lit-hello-world

Option 2: Local

npm create @lit@latest
cd hello-world
npm run dev

Key Concepts #

• Uses standard Web Components
• Lightweight and fast runtime
• Reactive properties and state
• Shadow DOM by default
• No framework lock-in
• Declarative rendering via tagged templates
• CSS encapsulation
• Ideal for design systems
• Works across all modern browsers
• Tree-shakeable and modular

Try It Online #

https://stackblitz.com/edit/lit-hello-world

Fun Facts #

• Lit is less than 5KB gzipped — one of the smallest frontend libraries in use.
• It powers parts of Google apps and Chrome’s internal UI components.
• Because it’s built on native browser APIs, it works without any proprietary runtime.
• Lit templates are JavaScript, not JSX — you use tagged template literals with html.
• Lit supports both server-side rendering and hydration out of the box via Lit SSR.

Resources #

Official site
Docs
GitHub
Community