Lit is a simple library for building fast, lightweight web components.
At Lit's 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.
Documentation
See the full documentation for Lit at lit.dev.
Additional documentation for developers looking to contribute or understand more about the project can be found in dev-docs
.
npm
To install from npm:
npm i lit
Lit Monorepo
This is the monorepo for Lit packages.
lit 2.x source is available on the 2.x
branch.
lit-html 1.x source is available on the lit-html-1.x
branch.
Packages
- Core packages
lit
- The primary user-facing package of Lit which includes everything from lit-html and lit-element.
lit-element
- The web component base class used in Lit.
lit-html
- The rendering library used by LitElement.
@lit/reactive-element
- A low level base class that provides a reactive lifecycle based on attribute/property changes.
- Additional libraries
@lit/localize
- A library and command-line tool for localizing web applications built using Lit.
@lit/localize-tools
- Localization tooling for use with @lit/localize
.
@lit/react
- A React component wrapper for web components.
@lit/task
- A controller for Lit that renders asynchronous tasks.
@lit/context
- A system for passing data through a tree of elements using browser events, avoiding the need to pass properties down every layer of the tree using a community defined protocol.
- Labs
- Starter kits (not published to npm)
- Internal packages (not published to npm)
tests
- Test infrastructure for the monorepo.
benchmarks
- Benchmarks for testing various libraries in the monorepo.
@lit-internal/scripts
- Utility scripts used within the monorepo.
Contributing to Lit
Lit is open source and we appreciate issue reports and pull requests. See CONTRIBUTING.md for more information.
Setting up the lit monorepo for development
Initialize repo:
git clone https://github.com/lit/lit.git
cd lit
npm ci
Build all packages:
npm run build
Test all packages:
npm run test
Run benchmarks for all packages:
npm run benchmarks
See individual package READMEs for details on developing for a specific package.