Simple. Fast. Web Components.
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.
For information about upgrading lit-html 1.x and lit-element 2.x code, see the Lit 2.0 Upgrade Guide.
npm
To install from npm:
npm i litLit Monorepo
This is the monorepo for upcoming Lit packages, including lit, lit-html 2.0 and lit-element 3.0.
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.
- Labs
@lit-labs/ssr- A server package for rendering Lit templates and components on the server.@lit-labs/ssr-client- A set of client-side support modules for rendering Lit components and templates on the server using@lit-labs/ssr.@lit-labs/eleventy-plugin-lit- A plugin for Eleventy that pre-renders Lit components using@lit-labs/ssrwith optional hydration.@lit-labs/react- A React component wrapper for web components.@lit-labs/router- A router for Lit.@lit-labs/task- A controller for Lit that renders asynchronous tasks.@lit-labs/motion- Lit directives for making things move@lit-labs/scoped-registry-mixin- A mixin for LitElement that integrates with the speculative Scoped CustomElementRegistry polyfill.
- Starter kits (not published to npm)
lit-starter-ts(template repo) - A starter repo for building reusable components using Lit in TypeScript.lit-starter-js(template repo) - A starter repo for building reusable components using Lit in Javascript.
- Internal packages (not published to npm)
tests- Test infrastructure for the monorepo.benchmarks- Benchmarks for testing various libraries in the monorepo.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 install
npm run bootstrapBuild all packages:
npm run buildTest all packages:
npm run testRun benchmarks for all packages:
npm run benchmarksSee individual package READMEs for details on developing for a specific package.
Exporting starter templates
Although we maintain lit-starter-ts and lit-starter-js in
the monorepo for ease of integration testing, the source is exported back out to
individual repos (ts,
js) as these are
GitHub Template Repositories
with a nice workflow for users to create their own new element repos based on
the template.
Use the following command to export new commits to the monorepo packages to a
branch on the template repos (lit-next branch shown in example):
# Export TS template
git remote add lit-element-starter-ts git@github.com:lit/lit-element-starter-ts.git
git subtree push --prefix=packages/lit-starter-ts/ lit-starter-element-ts lit-next
# Export JS template
git remote add lit-element-starter-js git@github.com:lit/lit-element-starter-js.git
git subtree push --prefix=packages/lit-starter-js/ lit-starter-element-js lit-nextNotes:
- If your version of git did not come with
git-subtree, you can add it by cloning the git source atgit@github.com:git/git.gitand symlinkinggit/contrib/subtree/git-subtreeinto your path (e.g./usr/local/bin) - If
git subtreeerrors with a segmentation fault, try increasing your stack size prior to running, e.g.ulimit -s 16384