awesome-lit
Web component library guide
A curated list of resources and tools for building fast, lightweight web components using Lit
A curated list of awesome Lit resources.
2k stars
77 watching
86 forks
last commit: about 2 years agoLinked from 3 awesome lists
awesomeawesome-listlit-html
Awesome Lit / General resources | |||
| Documentation | |||
| Tutorials | |||
| Playground | |||
| Blog | |||
Awesome Lit / Community | |||
| Discord | |||
| GitHub | 18,944 | almost 2 years ago | |
| GitHub Discussions | 18,944 | almost 2 years ago | |
| Stack Overflow | |||
| YouTube | |||
Awesome Lit / Overview | |||
| Lightning-fast templates & Web Components: lit-html & LitElement | |||
| Lit 2.0: Meet Lit, all over again! | |||
| Announcing Lit 2 stable release | |||
Awesome Lit / Starter Templates | |||
| LitElement JavaScript starter | 192 | about 2 years ago | Sample component using LitElement with JavaScript |
| LitElement TypeScript starter | 510 | about 2 years ago | Sample component using LitElement with TypeScript |
| hello-web-components | 26 | almost 2 years ago | Simple starter web component written in TypeScript using Lit |
| Lit Sass JavaScript Starter | 1 | almost 4 years ago | Project that has a simple setup for SASS + JS + Lit, using Rollup |
| Lit Sass TypeScript Starter | 25 | almost 4 years ago | Project that has a simple setup for SASS + TS + Lit, using Rollup |
| Lit Webpack Starter | 10 | about 2 years ago | Starter for multipage apps with Lit and Typescript, using Webpack |
| Open Web Components Generator | Starter app based on Open Web Components Recommendations | ||
| pwa-starter | 1,174 | almost 2 years ago | LitElement edition of the PWABuilder pwa-starter |
| pwa-lit-template | 181 | about 3 years ago | Build Progressive Web Applications following the modern web standards |
| Vite Lit Element TS SASS | 73 | over 3 years ago | Example Vite project using Lit 2, Typescript, and SASS |
| Vite Lit Starter | 69,303 | almost 2 years ago | Lit based template preset for Vite |
| Vite Lit TS Starter | 69,303 | almost 2 years ago | Lit and TypeScript based template preset for Vite |
Awesome Lit / 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 | |||
Awesome Lit / Tutorials | |||
| Building A Retro Draggable Web Component Using Lit | |||
| Building a Rich Text Editor with Lit | |||
| Draggable DOM with Lit | |||
| Getting started with LitElement and TypeScript | |||
| Here's a minimalist no-frills Redux Toolkit & LitElement example | |||
| JSON to HTML Table with Lit | |||
| lit-html Part 1 - A solution for DOM management in web components | |||
| lit-html Part 2 - Working with attributes and properties | |||
| Lit and Figma | |||
| Lit and Flutter | |||
| Lit and Monaco Editor | |||
| Lit and VSCode Extensions | |||
| Lit Sheet Music | |||
| Navigation Lifecycle using Vaadin Router, LitElement and TypeScript | |||
| Recreating The Arduino Pushbutton Using SVG And <lit-element> | |||
| Routing Management with LitElement and TypeScript | |||
| Some things to know about Lit | |||
Awesome Lit / Examples | |||
| Lit Native | 41 | almost 5 years ago | Reuse Lit web components on native platforms |
| Lit Node Editor | 21 | almost 5 years ago | Node editor built with canvas API and simple graph data structure |
| Lit 3D Piano | 20 | over 4 years ago | 3D Piano built with Lit, Three.js and Tone.js |
| Open Web Components Examples | Code examples of common patterns using Lit | ||
| Polymer → Lit Migration Guide | Code examples showing migration guidance from Polymer to Lit | ||
| Vite + RxDB + Lit | 5 | about 5 years ago | Minimal example to get RxDB running with Vite |
Awesome Lit / Lit Labs | |||
| @lit/localize | Library and command-line tool for localizing web applications built using Lit | ||
| @lit-labs/ssr | Package for server-side rendering Lit templates and components | ||
| @lit-labs/motion | Lit directives for making things move | ||
| @lit-labs/react | React integration for Web Components and reactive Lit controllers | ||
| @lit-labs/scoped-registry-mixin | Mixin for LitElement that integrates with the speculative Scoped CustomElementRegistry polyfill to evaluate the proposal and facilitate feedback | ||
| @lit-labs/task | Controller for Lit that renders asynchronous tasks | ||
| @lit-labs/virtualizer | Package that provides virtual scrolling for Lit | ||
Awesome Lit / Extensions | |||
| @adobe/lit-mobx | Mixin and base class for using mobx with Lit | ||
| @apollo-elements/lit-apollo | LitElement integrations with Apollo GraphQL | ||
| @lit-app/state | Lean and simple global State management for Lit 2 | ||
| @shoelace-style/localize | 57 | about 2 years ago | A micro library for localizing custom elements, providing directives for Lit |
| @stefanholzapfel/lit-state | Lightweight reactive state management for Lit 2 | ||
| @vaadin/form | Set of utilities for building forms with TypeScript and Lit | ||
| dark-theme-utils | Useful utilities for dark mode built with Web Components | ||
| exome | State manager for deeply nested states that supports Lit | ||
| pure-lit | 26 | almost 2 years ago | Register your Lit elements as pure functions |
| lit-element-effect | Effect hooks for LitElement | ||
| lit-element-state-decoupler | Utility for state handling outside of the component for LitElement | ||
| lit-redux-router | Declarative way of routing for Lit powered by pwa-helpers and Redux | ||
| lit-svelte-stores | Lit controller to use svelte stores as state management | ||
| lit-vaadin-helpers | Helpers for using Vaadin web components with Lit 2 | ||
| ullr | 63 | almost 2 years ago | Build Web Components with functional programming using Lit |
Awesome Lit / Design Systems | |||
| AXA Pattern Library | 125 | almost 3 years ago | AXA CH UI components library built with LitElement |
| Brightspace UI core | 66 | almost 2 years ago | Collection of web components for building Brightspace applications |
| Carbon Web Components | 478 | over 3 years ago | Carbon Design System variant on top of Web Components |
| Clarity Core Web Components | 169 | almost 2 years ago | Suite of web components for Clarity Design System |
| Kor | 274 | over 3 years ago | An open source Design System and lightweight UI Component Library |
| Lion | 1,777 | almost 2 years ago | Highly performant, accessible and flexible Web Components |
| Material Web Components | 9,441 | almost 2 years ago | Material Design implemented as Web Components |
| Momentum UI Web Components | 201 | almost 2 years ago | Set of UI components based on Momentum Design |
| Outline Design System | 129 | over 2 years ago | Web component based design system starter kit |
| Pharos Design System | 123 | almost 2 years ago | JSTOR's design system to create cohesive, supportive, and beautiful experiences |
| Red Hat Design System | 104 | almost 2 years ago | Web components for building uniform experiences with the Red Hat brand |
| Shoelace | 13,005 | almost 2 years ago | Collection of professionally designed UI components built on a framework-agnostic technology |
| Spectrum Web Components | 1,301 | almost 2 years ago | Adobe Spectrum design language implementation built with LitElement |
| UI5 Web Components | 1,582 | almost 2 years ago | Enterprise-flavored sugar on top of native APIs! |
Awesome Lit / Component Libraries | |||
| Apollo Elements | 416 | over 2 years ago | Custom elements meet Apollo GraphQL |
| Blackstone UI | 91 | almost 2 years ago | Web components for creating interfaces built with lit-html and LitElement |
| Chartjs Web Components | Web components for chartjs | ||
| Clever components | 222 | almost 2 years ago | Collection of Web Components made by Clever Cloud |
| Curvenote | 182 | over 3 years ago | Web components for creating interactive scientific articles |
| Dile Components | 83 | almost 2 years ago | General use Web Components for websites and applications |
| ESP Web Tools | 458 | almost 2 years ago | Allow flashing ESPHome or other ESP-based firmwares via the browser |
| Furo Webcomponents | 12 | almost 2 years ago | Enterprise ready set of web components which work best with Eclipse Furo |
| Fusion Web Components | 12 | almost 2 years ago | Ser of web components used by Equinor Fusion |
| Ignite UI Web Components | 121 | almost 2 years ago | Complete library of UI components from Infragistics |
| LRNWebComponents | 246 | almost 2 years ago | ELMS:LN produced web components for any project |
| Medblocks UI | 54 | almost 2 years ago | Web Components for rapid development of openEHR and FHIR systems |
| Microsoft Graph Toolkit | 966 | almost 2 years ago | Collection of web components for the Microsoft Graph |
| Mutation testing elements | 28 | almost 2 years ago | A schema for mutation testing results with the web components to visualize it |
| One Platform Components | 30 | almost 2 years ago | Set of web components for Red Hat One Platform |
| Playground Elements | 552 | about 2 years ago | Serverless code experiences with web components |
| Stripe Elements | 81 | almost 3 years ago | Custom Element Wrapper for Stripe.js v3 Elements |
| Titanium Elements | 18 | almost 2 years ago | Collection of lightweight web components used by Leavitt Group Enterprises |
| TrendChart Elements | 50 | about 2 years ago | Components to generate simple charts representing trends |
| Umbraco UI Components | 125 | almost 2 years ago | Collection of user interface web components for Umbraco CMS |
| Vidstack Elements | 2,423 | almost 2 years ago | Spec-compliant customizable, extensible, accessible and universal media elements |
| VSCode Webview Elements | 0 | over 2 years ago | Components for creating VSCode extensions which use the Webview API |
| Web Components for TEI Publisher | 18 | almost 2 years ago | Web components used by TEI Publisher and apps generated by it |
| Webmarkets web components | 1 | almost 2 years ago | Set of Webmarkets' public web components |
| Wired Elements | 10,537 | almost 3 years ago | Collection of elements that appear hand drawn |
| Wokwi Elements | 187 | almost 2 years ago | Web Components for Arduino and various electronic parts |
Awesome Lit / Standalone Components | |||
| <api-viewer> | 271 | almost 2 years ago | API documentation and live playground for Web Components |
| <app-datepicker> | 180 | over 2 years ago | Datepicker element built with LitElement and Material Design 2 |
| <burgton-button> | 17 | over 3 years ago | Simple to use, customizable and accessible burger-button element |
| <code-block> | 30 | about 3 years ago | Web component that displays colorfully formatted code with Prism.js and LitElement |
| <codesandbox-button> | 0 | almost 3 years ago | Custom Element that shows a CodeSandbox demo when you click on it |
| <editor-container> | 4,606 | almost 2 years ago | Block based editor, designed for general-purpose collaborative applications |
| <granite-qrcode-generator> | 14 | over 3 years ago | Custom element to generate and render QR Codes, using qr.js library |
| <helium-animated-pages> | 16 | almost 2 years ago | Web component for creating CSS animations built with Lit |
| <json-viewer> | 179 | almost 2 years ago | Web Component to visualize JSON data in a tree view |
| <light-gallery> | 6,578 | almost 2 years ago | Full featured JavaScript image and video gallery for Lit |
| <lit-datatable> | 57 | over 3 years ago | Material Design implementation of a data table, powered by LitElement |
| <lit-image-cropper> | 9 | about 2 years ago | Fast and lightweight image cropper component |
| <lottie-player> | 1,572 | almost 2 years ago | Web Component for easily embedding and playing Lottie animations |
| <model-viewer> | 7,060 | almost 2 years ago | A web component for rendering interactive 3D models |
| <rapi-doc> | 1,724 | almost 2 years ago | Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec |
| <round-slider> | 85 | almost 2 years ago | Simple round slider web component built with Lit |
| <stl-part-viewer> | 20 | almost 3 years ago | LitElement web component that utilizes Three.js to display an STL model file |
Awesome Lit / Tools / Building | |||
| babel-plugin-lit-property-types-from-ts | Babel plugin for setting for reactive properties declared in Lit components based on TypeScript type annotations | ||
| babel-plugin-template-html-minifier | Babel plugin for minifying HTML in tagged template strings | ||
| esbuild-plugin-lit | ESBuild plugin to import CSS, SVG, HTML, XLIFF files as JavaScript tagged-template literal objects | ||
| esbuild-plugin-lit-css | ESBuild plugin to import css files as JavaScript tagged-template literal objects | ||
| lit-css-loader | Webpack loader to import css files as JavaScript tagged-template literal objects | ||
| lit-scss-loader | Webpack loader to import the CSS/SCSS into Lit components | ||
| rollup-plugin-lit-css | Rollup plugin to import css files as JavaScript tagged-template literal objects | ||
| rollup-plugin-minify-html-literals | Rollup plugin to minify HTML in tagged template strings | ||
| rollup-plugin-postcss-lit | Rollup plugin to load PostCSS-processed stylesheets in Lit components | ||
Awesome Lit / Tools / Linting | |||
| eslint-plugin-lit | ESLint plugin for Lit template strings | ||
| eslint-plugin-lit-a11y | Accessibility linting plugin for Lit templates | ||
| lit-analyzer | CLI that type checks bindings in Lit templates | ||
Awesome Lit / Tools / IDE Plugins | |||
| vscode-lit-html | Syntax highlighting and IntelliSense for lit-html template strings | ||
| vscode-lit-plugin | Syntax highlighting, type checking and code completion for lit-html | ||
| es6-string-html | VSCode extension which provides syntax highlighting for HTML in ES6 multiline strings | ||
| vim-html-template-literals | 73 | about 2 years ago | Syntax highlighting and indentation for HTML inside of tagged template literals |
| @web-types/lit | Attribute completion for HTML inside of tagged template literals | ||
Awesome Lit / Tools / TypeScript Plugins | |||
| ts-lit-plugin | Plugin that adds type checking and code completion for Lit templates | ||
| typescript-lit-html-plugin | TypeScript server plugin that adds IntelliSense for Lit templates | ||
Awesome Lit / Tools / Other Tools | |||
| @custom-elements-manifest/analyzer | CLI tool to generate API documentation for web components | ||
| Storybook for web-components | UI development environment for plain web-component snippets | ||
| web-components-codemods | Codemods for Web Components compatible with lit-html template literals | ||
| Web Component DevTools | 137 | almost 2 years ago | Browser extension for developers working with Web Components |
| Web Component Factory | CLI tool for generating, building, testing and publishing web components | ||
Awesome Lit / CDN | |||
| cdn.esm.sh | |||
| jsDelivr CDN | |||
| JSPM CDN | |||
| Skypack CDN | |||
| unpkg.com | |||
Awesome Lit / Integrations | |||
| Bridgetown Lit Renderer | 13 | almost 2 years ago | SSR + hydration of Lit components for Bridgetown |
| Fable.Lit | 93 | over 3 years ago | Collection of tools to embed HTML code into F# code with the power of Lit |
| Ruby2JS | 431 | about 2 years ago | Minimal yet extensible Ruby to JavaScript conversion |
Awesome Lit / Videos | |||
| Lit 3.0 Launch Event | |||
| Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017) | |||
| lit-HTML (Chrome Dev Summit 2017) | |||
| Lit Beta Launch Event (2021) | |||
| Lit 2.0 Release Livestream | |||
| VDOM vs lit-html - HTTP203 | |||
| Declarative Reactive Web Components with Justin Fagnani | |||
| Building a Complex Application with Web Components and LitElement | |||
Awesome Lit / Podcasts | |||
| The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals | - An episode with the lit-html creator Justin Fagnani | ||
| ShopTalk Show 348: Getting lit-html with Justin Fagnani | Another episode with Justin Fagnani as a guest | ||
Awesome Lit / Archive | |||
| Render HTML with Vanilla JavaScript and lit-html | |||
| A gentle introduction to lit-html | |||
| lit-html templates from zero to hero | |||
| Updating blog-pwa from Polymer to LitElement, Workbox, and Rollup | |||
| Let's Build Web Components! Part 5: LitElement | |||
| LitElement To Do App | |||
| LitElement with Rollup, Babel & Karma | |||
| A new, lean way of creating web apps | |||
| The future of Polymer & lit-html | |||
| A night experimenting with Lit-HTML | |||
| Making a fullstack CRUD app with LitHTML, Redux, Express, and Webpack | |||
| Building a chat with Twilio, lit-html, Parcel and TypeScript | |||
Awesome Lit / Similar libraries | |||
| haunted | React's Hooks API but for standard web components and hyperHTML or lit-html | ||
| htm | 8,748 | over 2 years ago | Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support |
| hybrids | 3,061 | almost 2 years ago | UI library for creating Web Components with simple and functional API |
| lit-ntml | 82 | over 3 years ago | Lightweight and modern templating for SSR in Node.js, inspired by lit-html |
sindresorhus/awesome
jnv/lists
0ex/more-awesome
dceejay/redmap
microsoft/typescript
code-chunks/angular2-logger
mrward/typescript-addin
fulls1z3/angular-tslint-rules
redfroggy/ionic2-nfc-app
jonan/forkhub
phaserjs/template-angular
typestrong/grunt-ts
yousefed/matrix-crdt