Getting Started

There are many ways to get started using Lit, from our Playground and interactive tutorial to installing into an existing project.

Get started right away with the interactive playground and examples. Start with "Hello World", then customize it or move on to more examples.

Take our step-by-step tutorial to learn how to build a Lit component in minutes.

We provide TypeScript and JavaScript component starter kits for creating standalone reusable components. See Starter Kits.

Lit is available as the lit package via npm.

npm i lit

Then import into JavaScript or TypeScript files:

import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

import {LitElement, html} from 'lit';

Lit is also available as pre-built, single-file bundles. These are provided for more flexibility around development workflows: for example, if you would prefer to download a single file rather than use npm and build tools. The bundles are standard JavaScript modules with no dependencies - any modern browser should be able to import and run the bundles from within a <script type="module"> like this:

import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';

To browse the bundles, go to https://cdn.jsdelivr.net/gh/lit/dist/ and use the dropdown menu to go to the page for a particular version. On that page, there will be a directory for each type of bundle available for that version. There are two types of bundles:

core

https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js
core exports the same items as the main module of the lit package.

all

https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js
all exports everything in core plus most other modules in lit.
Note that html and svg exports from lit/static-html.js are aliased to staticHtml and staticSvg, respectively, to avoid collision.

See Adding Lit to an existing project for instructions on adding Lit to an existing project or application.

The Open WC project has a project generator that can scaffold out an application project using Lit.

Edit this page