Learn

Explore a curated list of videos, articles, and tutorials tailored for all experience levels. Unlock the full potential of Lit.

Video thumbnail for 'Lit 3.0 Launch Event'
video 90 Min

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!

Tutorial thumbnail for 'Intro to Lit'
tutorial  / Beginner 20 Min

Intro to Lit

New to Lit? Start here to learn the ropes and make your first LitElement.

Video thumbnail for 'Lit Labs: Task (graduated)'
video 9 Min

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!

Video thumbnail for 'Lit Labs: Context (graduated)'
video 15 Min

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!

Video thumbnail for 'Lit Labs: Observers'
video 7 Min

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!

Video thumbnail for 'Lit Labs: SSR (server-side rendering)'
video 13 Min

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!

Video thumbnail for 'Lit Labs: Framework wrapper generators'
video 13 Min

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!

Video thumbnail for 'Lit Labs: Motion'
video 17 Min

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!

Video thumbnail for 'Lit Labs: React (graduated)'
video 8 Min

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!

Video thumbnail for 'Lit Labs: Virtualizer'
video 16 Min

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!

Video thumbnail for 'Introduction to Lit'
video 13 Min

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.

Video thumbnail for 'How to style your Lit elements'
video 15 Min

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.

Article thumbnail for 'Lit for Polymer users'
article

Lit for Polymer users

Moving your code from Polymer to Lit.

Tutorial thumbnail for 'Custom attribute converters'
tutorial  / Intermediate 16 Min

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!

Tutorial thumbnail for 'Intro to async directives'
tutorial  / Advanced 30 Min

Intro to async directives

An introduction to Lit's async directive API, which allows building powerful custom template helpers.

Tutorial thumbnail for 'Build a word viewer!'
tutorial  / Beginner 30 Min

Build a word viewer!

Build a Word Viewer! A goofy component that shows one word at a time. Learn some Lit fundamentals!

Tutorial thumbnail for 'Build a tooltip element'
tutorial  / Advanced 30 Min

Build a tooltip element

Learn how to build a polished, high performance tooltip element and directive.

Tutorial thumbnail for 'Working with lists'
tutorial  / Beginner 20 Min

Working with lists

Learn how to take a list of items and render it on the page in multiple ways.

Tutorial thumbnail for 'Reactivity'
tutorial  / Intermediate 20 Min

Reactivity

Learn more about reactive properties and the reactive update cycle.

Tutorial thumbnail for 'Repeat patterns with SVG'
tutorial  / Intermediate 45 Min

Repeat patterns with SVG

Learn how to create visually expressive components with Lit and SVG.

Video thumbnail for 'Event communication between web components'
video 10 Min

Event communication between web components

Follow along as Lit Software Engineer Elliott Marquez shares the pros, cons, and use cases of communicating with events.

Video thumbnail for 'How to build a carousel in Lit'
video 15 Min

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.

Tutorial thumbnail for 'Build an animated carousel element'
tutorial  / Intermediate 30 Min

Build an animated carousel element

Learn how to build an animated carousel element using the animate directive.

Video thumbnail for 'What are elements?'
video 9 Min

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!

Video thumbnail for 'How to build your first Lit component'
video 12 Min

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.

Video thumbnail for 'Lit 2.0 Release Livestream'
video 98 Min

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!

Video thumbnail for 'Chat with Lit #1 – Westbrook Johnson (Adobe)'
video 24 Min

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.

Video thumbnail for 'Declarative Reactive Web Components with Justin Fagnani'
video 50 Min

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.

You left this page intentionally blank.