2. Getting set up & exploring the Playground

Accessing the code

Throughout the codelab there will be links to the Lit playground like this:

Code Checkpoint

The playground is a code sandbox that runs completely in your browser. It can compile and run TypeScript and JavaScript files, and it can also automatically resolve imports to node modules. e.g.

// before

import './my-file.js';

import 'lit';

// after

import './my-file.js';

import 'https://unpkg.com/lit?module';

You can do the entire tutorial in the Lit playground, using these checkpoints as starting points. If you're using VS Code, you can use these checkpoints to download the starting code for any step, as well as using them to check your work.

Exploring the lit playground UI

The Lit playground UI screenshot highlights sections that you'll use in this codelab.

1. File selector. Note the plus button...

2. File editor.

3. Code preview.

4. Reload button.

5. Download button.

VS Code setup (Advanced)

Here are the benefits to using this VS Code setup:

• Template type checking

• Template intellisense & autocompletion

If you have NPM, VS Code (with the lit-plugin plugin) installed already and know how to use that environment, you may simply download and start these projects by doing the following:

• Press the download button

• Extract the tar file's contents into a directory

• Install a dev server that can resolve bare module specifiers (the Lit team recommends @web/dev-server)

• Here is an example package.json

• Run the dev server and open your browser (if you are using @web/dev-server you can use npx web-dev-server --node-resolve --watch --open)

• If you are using the example package.json use npm run server