Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

awesome-lit

A curated list of awesome Lit resources.
https://github.com/web-padawan/awesome-lit

Last synced: 4 days ago
JSON representation

General resources
- Documentation
- Tutorials
- Playground
- Blog
Community
- GitHub Discussions
- Twitter
- Slack
- Stack Overflow
- YouTube
- GitHub
- Discord
Overview
- Lightning-fast templates & Web Components: lit-html & LitElement
- Lit 2.0: Meet Lit, all over again!
- Announcing Lit 2 stable release
Starter Templates
- Open Web Components Generator - Starter app based on Open Web Components Recommendations.
- Vite Lit Starter - Lit based template preset for Vite.
- Vite Lit TS Starter - Lit and TypeScript based template preset for Vite.
- 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.
- 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.
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
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
Examples
- Open Web Components Examples - Code examples of common patterns using Lit.
- Lit Native - Reuse Lit web components on native platforms.
- Lit Node Editor - Node editor built with canvas API and simple graph data structure.
- Lit 3D Piano - 3D Piano built with Lit, Three.js and Tone.js.
- Polymer → Lit Migration Guide - Code examples showing migration guidance from Polymer to Lit.
- Vite + RxDB + Lit - Minimal example to get RxDB running with Vite.
- Lit 3D Piano - 3D Piano built with Lit, Three.js and Tone.js.
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.
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.
- `@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.
- `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.
- `@shoelace-style/localize` - A micro library for localizing custom elements, providing directives for Lit.
- `pure-lit` - Register your Lit elements as pure functions.
- `ullr` - Build Web Components with functional programming using Lit.
Design Systems
- Clarity Core Web Components - Suite of web components for Clarity Design System.
- Momentum UI Web Components - Set of UI components based on Momentum Design.
- AXA Pattern Library - AXA CH UI components library built with LitElement.
- Brightspace UI core - Collection of web components for building Brightspace applications.
- Carbon Web Components - Carbon Design System variant on top of Web Components.
- Lion - Highly performant, accessible and flexible Web Components.
- Material Web Components - Material Design implemented as Web Components.
- Outline Design System - Web component based design system starter kit.
- Pharos Design System - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
- Red Hat Design System - Web components for building uniform experiences with the Red Hat brand.
- Shoelace - Collection of professionally designed UI components built on a framework-agnostic technology.
- Spectrum Web Components - Adobe Spectrum design language implementation built with LitElement.
- UI5 Web Components - Enterprise-flavored sugar on top of native APIs!
- Kor - An open source Design System and lightweight UI Component Library.
Component Libraries
- Playground Elements - Serverless code experiences with web components.
- Playground Elements - Serverless code experiences with web components.
- Medblocks UI - Web Components for rapid development of openEHR and FHIR systems.
- Apollo Elements - Custom elements meet Apollo GraphQL.
- Blackstone UI - Web components for creating interfaces built with lit-html and LitElement.
- Chartjs Web Components - Web components for chartjs.
- Clever components - Collection of Web Components made by Clever Cloud.
- Curvenote - Web components for creating interactive scientific articles.
- Dile Components - General use Web Components for websites and applications.
- ESP Web Tools - Allow flashing ESPHome or other ESP-based firmwares via the browser.
- Furo Webcomponents - Enterprise ready set of web components which work best with Eclipse Furo.
- Fusion Web Components - Ser of web components used by Equinor Fusion.
- Ignite UI Web Components - Complete library of UI components from Infragistics.
- Microsoft Graph Toolkit - Collection of web components for the Microsoft Graph.
- Mutation testing elements - A schema for mutation testing results with the web components to visualize it.
- One Platform Components - Set of web components for Red Hat One Platform.
- Stripe Elements - Custom Element Wrapper for Stripe.js v3 Elements.
- Titanium Elements - Collection of lightweight web components used by Leavitt Group Enterprises.
- TrendChart Elements - Components to generate simple charts representing trends.
- Umbraco UI Components - Collection of user interface web components for Umbraco CMS.
- VSCode Webview Elements - Components for creating VSCode extensions which use the Webview API.
- Web Components for TEI Publisher - Web components used by TEI Publisher and apps generated by it.
- Webmarkets web components - Set of Webmarkets' public web components.
- Wired Elements - Collection of elements that appear hand drawn.
- Wokwi Elements - Web Components for Arduino and various electronic parts.
- LRNWebComponents - ELMS:LN produced web components for any project.
- Playground Elements - Serverless code experiences with web components.
- Vidstack Elements - Spec-compliant customizable, extensible, accessible and universal media elements.
Standalone Components
- `<api-viewer>` - API documentation and live playground for Web Components.
- `<light-gallery>` - Full featured JavaScript image and video gallery for Lit.
- `<model-viewer>` - A web component for rendering interactive 3D models.
- `<rapi-doc>` - Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec.
- `<api-viewer>` - API documentation and live playground for Web Components.
- `<rapi-doc>` - Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec.
- `<app-datepicker>` - Datepicker element built with LitElement and Material Design 2.
- `<burgton-button>` - Simple to use, customizable and accessible burger-button element.
- `<code-block>` - Web component that displays colorfully formatted code with Prism.js and LitElement.
- `<codesandbox-button>` - Custom Element that shows a CodeSandbox demo when you click on it.
- `<editor-container>` - Block based editor, designed for general-purpose collaborative applications.
- `<granite-qrcode-generator>` - Custom element to generate and render QR Codes, using qr.js library.
- `<helium-animated-pages>` - Web component for creating CSS animations built with Lit.
- `<json-viewer>` - Web Component to visualize JSON data in a tree view.
- `<lit-datatable>` - Material Design implementation of a data table, powered by LitElement.
- `<lottie-player>` - Web Component for easily embedding and playing Lottie animations.
- `<round-slider>` - Simple round slider web component built with Lit.
- `<stl-part-viewer>` - LitElement web component that utilizes Three.js to display an STL model file.
- `<lit-image-cropper>` - Fast and lightweight image cropper component.
- `<model-viewer>` - A web component for rendering interactive 3D models.
- `<rapi-doc>` - Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec.
- `<api-viewer>` - API documentation and live playground for Web Components.
Tools
- Building
  - babel-plugin-lit-property-types-from-ts - Babel plugin for setting `type` 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.
- 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.
- 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.
  - @web-types/lit - Attribute completion for HTML inside of tagged template literals.
  - vim-html-template-literals - Syntax highlighting and indentation for HTML inside of tagged template literals.
- 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.
- 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 Factory - CLI tool for generating, building, testing and publishing web components.
  - Web Component DevTools - Browser extension for developers working with Web Components.
CDN
- Other Tools
  - cdn.esm.sh
  - jsDelivr CDN
  - JSPM CDN
  - Skypack CDN
  - unpkg.com
  - lit.dev documentation
  - cdn.esm.sh
  - unpkg.com
  - cdn.esm.sh
  - unpkg.com
  - cdn.esm.sh
  - Skypack CDN
  - unpkg.com
  - cdn.esm.sh
  - unpkg.com
  - cdn.esm.sh
  - unpkg.com
Videos
- Other Tools
Podcasts
- Other Tools
  - The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals
  - ShopTalk Show 348: Getting lit-html with Justin Fagnani - Another episode with Justin Fagnani as a guest.
Archive
- Other Tools
Similar libraries
- Other Tools
  - haunted - React's Hooks API but for standard web components and hyperHTML or lit-html.
  - htm - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
  - hybrids - UI library for creating Web Components with simple and functional API.
  - lit-ntml - Lightweight and modern templating for SSR in Node.js, inspired by lit-html.
Integrations
- Other Tools
  - Bridgetown Lit Renderer - SSR + hydration of Lit components for Bridgetown.
  - Fable.Lit - Collection of tools to embed HTML code into F# code with the power of Lit.
  - Ruby2JS - Minimal yet extensible Ruby to JavaScript conversion.
Other awesome resources
- Other Tools
  - awesome

Programming Languages

TypeScript 42 JavaScript 24 HTML 3 Ruby 2 F# 1 Vim Script 1 Swift 1

Ecosyste.ms: Awesome

awesome-lit

General resources

Community

Overview

Starter Templates

Codelabs

Tutorials

Examples

Lit Labs

Extensions

Design Systems

Component Libraries

Standalone Components

Tools

Building

Linting

IDE Plugins

TypeScript Plugins

Other Tools

CDN

Other Tools

Videos

Other Tools

Podcasts

Other Tools

Archive

Other Tools

Similar libraries

Other Tools

Integrations

Other Tools

Other awesome resources

Other Tools