Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Polymer/lit-html
Lit is a simple library for building fast, lightweight web components.
https://github.com/Polymer/lit-html
html-templates lit lit-element lit-html
Last synced: 3 months ago
JSON representation
Lit is a simple library for building fast, lightweight web components.
- Host: GitHub
- URL: https://github.com/Polymer/lit-html
- Owner: lit
- License: bsd-3-clause
- Created: 2017-06-29T16:27:16.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-07-04T14:26:11.000Z (4 months ago)
- Last Synced: 2024-07-07T09:06:15.652Z (4 months ago)
- Topics: html-templates, lit, lit-element, lit-html
- Language: TypeScript
- Homepage: https://lit.dev
- Size: 51.6 MB
- Stars: 17,947
- Watchers: 208
- Forks: 887
- Open Issues: 499
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-star-libs - Polymer / lit-html
- awesome - lit-html - An efficient, expressive, extensible HTML templating library for JavaScript. (TypeScript)
README
### Simple. Fast. Web Components.
[](https://github.com/lit/lit/actions/workflows/tests.yml)
[](https://www.npmjs.com/package/lit)
[](https://lit.dev/discord/)
[](https://github.com/web-padawan/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](https://lit.dev).
Additional documentation for developers looking to contribute or understand more about the project can be found in [`dev-docs`](./dev-docs).
### npm
To install from npm:
```sh
npm i lit
```
## Lit Monorepo
This is the monorepo for Lit packages.
lit 2.x source is available on the [`2.x`](https://github.com/lit/lit/tree/2.x) branch.
lit-html 1.x source is available on the [`lit-html-1.x`](https://github.com/lit/lit/tree/lit-html-1.x) branch.
### Packages
- Core packages
- [`lit`](./packages/lit) - The primary user-facing package of Lit which includes everything from lit-html and lit-element.
- [`lit-element`](./packages/lit-element) - The web component base class used in Lit.
- [`lit-html`](./packages/lit-html) - The rendering library used by LitElement.
- [`@lit/reactive-element`](./packages/reactive-element) - A low level base class that provides a reactive lifecycle based on attribute/property changes.
- Additional libraries
- [`@lit/localize`](./packages/localize) - A library and command-line tool for localizing web applications built using Lit.
- [`@lit/localize-tools`](./packages/localize-tools) - Localization tooling for use with `@lit/localize`.
- [`@lit/react`](./packages/react) - A React component wrapper for web components.
- [`@lit/task`](./packages/task) - A controller for Lit that renders asynchronous tasks.
- [`@lit/context`](./packages/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](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md).
- Labs
- [`@lit-labs/ssr`](./packages/labs/ssr) - A server package for rendering Lit templates and components on the server.
- [`@lit-labs/ssr-client`](./packages/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`](./packages/labs/eleventy-plugin-lit) - A plugin for Eleventy that pre-renders
Lit components using `@lit-labs/ssr` with optional hydration.
- [`@lit-labs/ssr-react`](./packages/labs/ssr-react) - A package for integrating Lit SSR with React and React frameworks.
- [`@lit-labs/nextjs`](./packages/labs/nextjs) - A plugin for [Next.js](https://nextjs.org/) that enables deep server rendering of Lit components with Lit SSR.
- [`@lit-labs/router`](./packages/labs/router) - A router for Lit.
- [`@lit-labs/motion`](./packages/labs/motion) - Lit directives for making things move
- [`@lit-labs/scoped-registry-mixin`](./packages/labs/scoped-registry-mixin) - A mixin for LitElement that integrates with the speculative Scoped CustomElementRegistry polyfill.
- [`@lit-labs/observers`](./packages/labs/observers) - A set of reactive controllers that facilitate using the platform observer objects.
- [`@lit-labs/preact-signals`](./packages/labs/preact-signals) - [Preact Signals](https://preactjs.com/guide/v10/signals/) integration for Lit.
- [`@lit-labs/testing`](./packages/labs/testing) - Utilities for testing Lit components.
- [`@lit-labs/virtualizer`](./packages/labs/virtualizer) - Viewport-based virtualization (including virtual scrolling).
- [`@lit-labs/compiler`](./packages/labs/compiler) - A compiler for optimizing Lit templates.
- Starter kits (not published to npm)
- [`lit-starter-ts`](./packages/lit-starter-ts) ([template
repo](https://github.com/lit/lit-element-starter-ts)) - A starter repo for building reusable components using Lit in TypeScript.
- [`lit-starter-js`](./packages/lit-starter-js) ([template
repo](https://github.com/lit/lit-element-starter-js)) - A starter repo for building reusable components using Lit in JavaScript.
- Internal packages (not published to npm)
- [`tests`](./packages/tests) - Test infrastructure for the monorepo.
- [`benchmarks`](./packages/benchmarks) - Benchmarks for testing various libraries in the monorepo.
- [`@lit-internal/scripts`](./packages/@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](./CONTRIBUTING.md) for more information.
### Setting up the lit monorepo for development
Initialize repo:
```sh
git clone https://github.com/lit/lit.git
cd lit
npm ci
```
Build all packages:
```sh
npm run build
```
Test all packages:
```sh
npm run test
```
Run benchmarks for all packages:
```sh
npm run benchmarks
```
See individual package READMEs for details on developing for a specific package.