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'

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 'Introduction to Lit'

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'

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'

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


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'

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'

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?'

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'

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'

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)'

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'

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.