Introduction

This interactive tutorial will help you get started with Lit and see how simple it is to build fast, lightweight web components.

Each step of this tutorial introduces one or two Lit features. Use the interactive editor to add features to the starting code sample and preview the output.

If you get stuck on a step, click Solve to see the finished code, or click Reset to return to the starting code. The editor shows a basic Lit component like the ones you'll create in the subsequent steps. For now, just try out the Solve and Reset buttons.

You can do this tutorial in either TypeScript or JavaScript. Change the language by clicking any of the JS/TS toggles, which appear in the corner of the editor and in switchable code samples, like this:

// TypeScript for TypeScript lovers!
const items: Array<string> | undefined;

// JavaScript for JavaScript lovers!
const items;

The toggles are linked, so the cut and paste code samples should always match the language in the editor. You can switch whenever you want, but note that if you switch languages, you'll lose any changes you've made in the editor.

Lit components are web components, so they act like regular HTML elements. You can add them to a page with simple HTML tags, like this:

<my-element></my-element>

Take a look at index.html in the code editor to see how the sample Lit component is added to the page.

You can also review our documentation for more information as you go along.