Awesome Lit
A curated list of awesome Lit resources.
Lit — a simple library for building fast, lightweight web components.
At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.
Contents
- General resources
- Community
- Overview
- Starter Templates
- Codelabs
- Tutorials
- Examples
- Lit Labs
- Extensions
- Design Systems
- Component Libraries
- Standalone Components
- Meta Frameworks
- Tools
- Building
- Linting
- IDE Plugins
- TypeScript Plugins
- Other Tools
- CDN
- Integrations
- Videos
- Podcasts
- Archive
- Similar libraries
- Other awesome resources
General resources
Community
Overview
- Lightning-fast templates & Web Components: lit-html & LitElement
- Lit 2.0: Meet Lit, all over again!
- Announcing Lit 2 stable release
Starter Templates
- Gracile Starters - Gracile full-stack starter projects (SSR/SSG).
- LitElement JavaScript starter - Sample component using LitElement with JavaScript.
- LitElement TypeScript starter - Sample component using LitElement with TypeScript.
- hello-web-components - Simple starter web component written in TypeScript using Lit.
- Lit Sass JavaScript Starter - Project that has a simple setup for SASS + JS + Lit, using Rollup.
- Lit Sass TypeScript Starter - Project that has a simple setup for SASS + TS + Lit, using Rollup.
- Lit Webpack Starter - Starter for multipage apps with Lit and Typescript, using Webpack.
- Open Web Components Generator - Starter app based on Open Web Components Recommendations.
- pwa-starter - LitElement edition of the PWABuilder pwa-starter.
- pwa-lit-template - Build Progressive Web Applications following the modern web standards.
- Vite Lit Element TS SASS - Example Vite project using Lit 2, Typescript, and SASS.
- Vite Lit Starter - Lit based template preset for Vite.
- Vite Lit TS Starter - Lit and TypeScript based template preset for Vite.
- Vite Lit + Tailwind - Modified Vite + Lit starter to use Tailwind v4.
Codelabs
- Build a Brick Viewer with lit-element
- Build a Story Component with lit-element
- From Web Component to Lit Element
- lit-html & lit-element: basics
- lit-html & lit-element: intermediate
- Lit for React Developers