What is 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.

You can build just about any kind of web UI with Lit!

The first thing to know about Lit is that every Lit component is a standard web component. Web components have the superpower of interoperability: natively supported by browsers, web components can be used in any HTML environment, with any framework or none at all.

This makes Lit an ideal choice for developing shareable components or design systems. Lit components can be used across multiple apps and sites, even if those apps and sites are built on a variety of front-end stacks. Site developers using Lit components don’t need to write or even see any Lit code; they can just use the components the same way they do built-in HTML elements.

Lit is also perfect for progressively enhancing basic HTML sites. Browsers will recognize Lit components in your markup and initialize them automatically–whether your site is handcrafted, managed via a CMS, built with a server-side framework, or generated by a tool like Jekyll or eleventy.

Of course, you can also build highly interactive, feature-rich apps out of Lit components, just as you would with a framework like React or Vue. Lit’s capabilities and developer experience are comparable to these popular alternatives, but Lit minimizes lock-in, maximizes flexibility and promotes maintainability by embracing the browser’s native component model.

When you build an app with Lit, it’s easy to sprinkle in “vanilla” web components, or web components built with other libraries. You can even update to a major new version of Lit–or migrate to another library–one component at a time, without disrupting product development.

If you’ve done any modern, component-based web development, you should feel right at home with Lit. Even if you haven’t developed with components before, we think you’ll find Lit to be very approachable.

Each Lit component is a self-contained unit of UI, assembled from smaller building blocks: standard HTML elements and other web components. In turn, each Lit component is itself a building block that can be used–within an HTML document, another web component, or a framework component–to build larger and more complex interfaces.

Here’s a small but non-trivial component (a countdown timer) that illustrates what Lit code looks like and highlights several key features:

Some things to note:

• Lit's main feature is the LitElement base class, a convenient and versatile extension of the native HTMLElement. You extend from it to define your own components.
• Lit’s expressive, declarative templates (utilizing JavaScript tagged template literals) make it easy to describe how a component should be rendered.
• Reactive properties represent a component’s public API and/or internal state; your component automatically re-renders whenever a reactive property changes.
• Styles are scoped by default, keeping your CSS selectors simple and ensuring that your component’s styling won’t pollute (or be polluted by) the surrounding context.
• Lit works great in vanilla JavaScript, or you can use TypeScript for even better ergonomics by using decorators and type declarations.

Lit doesn’t require compilation or building during development, so it can be used virtually tool-free if you prefer. First-class IDE support (code-completion, linting, etc.) and tooling for production (localization, template minification, etc.) are readily available.

As we’ve already noted, Lit is a great choice for building all sorts of web UI, pairing the interop-based advantages of web components with a modern, ergonomic developer experience.

Lit is also:

• Simple. Building on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier.
• Fast. Updates are fast, because Lit keeps track of your UI’s dynamic parts and updates only those when the underlying state changes–no need to rebuild a whole virtual tree and diff it with the current state of the DOM.
• Lightweight. Weighing in at around 5 KB (minified and compressed), Lit helps keep bundle sizes small and loading times short.

The team behind Lit has been involved with Web Components from day one. We help Google maintain tens of thousands of components, offer a comprehensive set of web components polyfills, and engage deeply in standards and community work.

Every Lit feature is carefully designed with web platform evolution in mind; we aim to help you take full advantage of what the platform provides today while writing code that is ready to benefit from future enhancements.

• Getting started: Get set up to start developing with Lit.
• Components: Learn about the Lit component model.
• Templates: Write templates with lit-html syntax.
• Code organization: Write reusable, maintainable code.

Edit this page