There are many ways to get started using Lit, from our Playground and interactive tutorial to installing into an existing project.
Lit PlaygroundPermalink to “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 tutorialPermalink to “Interactive tutorial”
Take our step-by-step tutorial to learn how to build a Lit component in minutes.
Lit starter kitsPermalink to “Lit starter kits”
Install locally from npmPermalink to “Install locally from npm”
Lit is available as the
lit package via npm.
Use bundlesPermalink to “Use bundles”
<script type="module"> like this:
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:
coreexports the same items as the main module of the
allexports everything in
coreplus most other modules in
lit/static-html.jsare aliased to
staticSvg, respectively, to avoid collision.
Add Lit to an existing projectPermalink to “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 generatorPermalink to “Open WC project generator”
The Open WC project has a project generator that can scaffold out an application project using Lit.