packages/lit-dev-content/site/docs/v2/index.md
<lazy-svg class="logo" width="425" height="200" href="{{ site.baseurl }}/images/logo.svg#full" loading="eager"></lazy-svg>
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:
{% playground-ide "v2-docs/what-is-lit/" %}
Some things to note:
LitElement base class, a convenient and versatile extension of the native HTMLElement. You extend from it to define your own components.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:
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.