Lit is a simple library for building fast, lightweight web components.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Justin Fagnani 1d8a38ed0b
[labs/ssr] Make FallbackRenderer not emit a shadow root (#3590)
1 day ago
.changeset [labs/ssr] Make FallbackRenderer not emit a shadow root (#3590) 1 day ago
.github [infra] Skip sauce tests on forks (#3607) 4 days ago
.husky [all] Fix Husky after upgrade to v6 (#1760) 2 years ago
.vscode [labs] Initial commit of eleventy plugin (#1755) 1 year ago
examples [examples] Add nextjs example (#3508) 2 weeks ago
packages [labs/ssr] Make FallbackRenderer not emit a shadow root (#3590) 1 day ago
scripts Implement `lit init element` (#3248) 3 months ago
.editorconfig [all] Remove Polymer references and update links (#1795) 2 years ago
.eslintignore [SSR/Core] Add @lit-labs/ssr-dom-shim package (#3522) 3 weeks ago
.eslintignore-sync [labs/analyzer] Don't export (most) helper methods, refactor onto model classes (#3254) 5 months ago
.eslintrc.json [examples] Add nextjs example (#3508) 2 weeks ago
.gitignore [infra] Use npm workspaces instead of lerna (#3112) 7 months ago
.npmignore Add .npmignore to actually publish the lib/ dir 6 years ago
.prettierignore [SSR/Core] Add @lit-labs/ssr-dom-shim package (#3522) 3 weeks ago
.prettierignore-sync Fix nuke (#1800) 2 years ago
.prettierrc.json [lit-next] Unify Prettier dependency to the root (#1292) 2 years ago
CHANGELOG.md Spelling (#3393) 5 days ago
CODE_OF_CONDUCT.md Spelling (#3393) 5 days ago
CONTRIBUTING.md Mention Discord in CONTRIBUTING.md (#3616) 2 days ago
LICENSE New copyright headers (#1630) 2 years ago
README.md Spelling (#3393) 5 days ago
lit-next.code-workspace [examples] Add nextjs example (#3508) 2 weeks ago
package-lock.json [labs/ssr] Make FallbackRenderer not emit a shadow root (#3590) 1 day ago
package.json [examples] Add nextjs example (#3508) 2 weeks ago
rollup-common.js [reactive-element] Fix Node build auto-shimming of `HTMLElement` to respect existing global shim (#3561) 3 weeks ago

README.md

Lit

Simple. Fast. Web Components.

Build Status Published on npm Join our Discord Mentioned in Awesome Lit

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 lit

Lit 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
  • 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.