Get started with Lit and UNPKG

Matias Forbord


Get started with Lit and UNPKG


  • Create an account on NPM.
  • Install npm and node.
  • Run npm login to connect npm with your NPM account.

1 - Make something in Lit

The starter kits for Lit with JS and Lit with TS are great. It looks like there's a lot of stuff going on, but you only have to look at my-element.js (or my-element.ts for TypeScript).

If you want to follow along by copy and pasting, you can do these steps:

git clone
cd lit-element-starter-js
npm i
npm run build && npm run serve -- --open

The last command will build the element, serve it, and open your browser to http://localhost:8000/.

Click the link on that page that says Component Demo and you'll go to the dev/index.html which has your <my-element> Lit element ready to go!

Time to make the element neat!

  • Modify element

2 - Publish it as a package to NPM

With your Lit element working, the next step is to publish it to NPM.

Publish your cool new neat-lit-element to NPM.

First, let's double check what the name and version of your package is:

  "name": "neat-lit-element",
  "version": "1.0.0",

Then run

npm publish

Go through the steps and you are ready to look up your package on UNPKG.

3 - Find your package on UNPKG

UNPKG is a service that takes content on NPM and makes it accessible as a CDN.

Now that your Lit element has been published to NPM, it can be served as minified JavaScript and used in the browser <head>.

First we'll look up the package by using the /browse/ URL of UNPKG.

For a package called neat-lit-element, and version "1.0.0", that would be

If you've released the package with your username in front, it must be included in the URL. For example for the username google and the package model-viewer:

Click through the folder structure shown on UNPKG and click the my-element.min.js file to see what it looks like all minified. Copy the URL to that file, so we can use it in the next step.

4 - Add it to your website

Now we can take a plain old website (or a blog post on WordPress, Ghost, Wix, or anywhere else that lets you customize the HTML a little) and make it neat!

Add your UNPKG link to the <head> of the website:

<!-- Probably lots of other stuff here you can ignore -->

<script src=""></script>


And then add the element itself to the <body> of your website, whereever you like:

<!-- Lots of other stuff here you can ignore -->



All done!