Get started with Lit and UNPKG

Matias Forbord

2022-08-29

Get started with Lit and UNPKG

Prerequisites

  • 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 git@github.com:lit/lit-element-starter-js.git
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 https://unpkg.com/browse/my-neat-element@1.0.0

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: https://unpkg.com/browse/@google/model-viewer@1.12.0

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:

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

<script src="https://unpkg.com/browse/neat-lit-element@1.0.0/my-element.min.js"></script>

</head>

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

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

<my-element></my-element>

<body>

All done!