Skip to content

Latest commit

 

History

History
106 lines (78 loc) · 3.39 KB

getting-started.md

File metadata and controls

106 lines (78 loc) · 3.39 KB
title eleventyNavigation versionLinks
Getting Started
key parent order
Getting Started
Introduction
3
v1 v3
getting-started/
getting-started/

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

Lit Playground

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

Interactive tutorial

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

Lit starter kits

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

Install locally from npm

Lit is available as the lit package via npm.

npm i lit

Then import into JavaScript or TypeScript files:

{% switchable-sample %}

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

{% endswitchable-sample %}

Use bundles

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';

If you're using npm for client-side dependencies, you should use the lit package, not these bundles. The bundles intentionally combine most or all of Lit into a single file, which can cause your page to download more code than it needs.

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.

Add Lit to an existing project

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

Open WC project generator

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