Learn
Explore a curated list of videos, articles, and tutorials tailored for all experience levels. Unlock the full potential of Lit.
The Lit Cheat Sheet
A quick reference for the basics of Lit
Lit 3.0 Launch Event
Join the Lit team to hear all about the Lit 3.0 release and what's new in the Lit ecosystem!
Intro to Lit
New to Lit? Start here to learn the ropes and make your first LitElement.
Lit Labs: Task (graduated)
This video covers @lit-labs/task, a package under development in Lit Labs. Watch for an overview, demos, package status and more!
Lit Labs: Context (graduated)
In this video, we cover @lit-labs/context, a package under development in Lit Labs. Watch for an overview, an explanation of the underlying Web Components Context Protocol, use cases, demos, package status and more!
Lit Labs: Observers
This video covers @lit-labs/observers, a package under development in Lit Labs. Watch for an overview, demos, package status and more!
Lit Labs: SSR (server-side rendering)
This video covers @lit-labs/ssr, a server-side rendering package under development in Lit Labs. Watch for an overview, demos, project status and more!
Lit Labs: Framework wrapper generators
This video covers framework wrapper generators, a feature of the Lit CLI under development in Lit Labs. Watch for an overview, benefits, use case, status and more!
Lit Labs: Motion
This video covers @lit-labs/motion, a package under development in Lit Labs. Watch for an overview, examples, quick tips, package status and more!
Lit Labs: React (graduated)
This video covers @lit-labs/react, a package under development in Lit Labs. Watch for an overview, use cases, package status and more!
Lit Labs: Virtualizer
This video covers @lit-labs/virtualizer, a package under development in Lit Labs. Watch for an overview, examples, features, package status and more!
Introduction to Lit
Learn all about the Lit library in this beginner-friendly Lit University episode! We will cover all of the essentials, including custom elements, declarative templates, scoped styles, and reactive properties.
How to style your Lit elements
We cover how the Shadow DOM works, illustrate the benefits of encapsulated CSS, and show you how to use CSS inheritance, custom properties and shadow parts to expose a flexible public styling API.
Lit for Polymer users
Moving your code from Polymer to Lit.
Custom attribute converters
Properties sometimes don't map nicely to string attributes. Learn how to write your own attribute converters to simplify your markup in Lit!
Intro to async directives
An introduction to Lit's async directive API, which allows building powerful custom template helpers.
Build a word viewer!
Build a Word Viewer! A goofy component that shows one word at a time. Learn some Lit fundamentals!
Build a tooltip element
Learn how to build a polished, high performance tooltip element and directive.
Working with lists
Learn how to take a list of items and render it on the page in multiple ways.
Reactivity
Learn more about reactive properties and the reactive update cycle.
Repeat patterns with SVG
Learn how to create visually expressive components with Lit and SVG.
Event communication between web components
Follow along as Lit Software Engineer Elliott Marquez shares the pros, cons, and use cases of communicating with events.
How to build a carousel in Lit
In this video, we build a simple-carousel using Lit, letting us explore passing children into your web component, and web component composition.
Build an animated carousel element
Learn how to build an animated carousel element using the animate directive.
What are elements?
Software Engineer Elliott Marquez shares what elements are, how to make, and interact with them. Learn about the basic building block of the web in this video!
How to build your first Lit component
Learn how to build your first Lit component and use it with React, Vue, and in a markdown editor.
Lit 2.0 Release Livestream
Lit 2.0 has officially landed! Here we talk about Lit 2.0, what we've been doing, what it means to Google, and what's new. Stay tuned for a panel discussion with Lit users in the industry!
Chat with Lit #1 – Westbrook Johnson (Adobe)
Listen in on this live-recorded Twitter Space episode, hosted by Rody Davis (@rodydavis) and Elliott Marquez (@techytacos), with guest Westbrook Johnson (@WestbrookJ) from Adobe.
Declarative Reactive Web Components with Justin Fagnani
Justin covers what Web Components are and how LitElement and lit-html add value on top of the native APIs. This talk covers the fundamentals of how and why Lit is architected the way it is.