Top 50 Awesome List

web-padawan/awesome-lit

Front-End Development  1 day ago  982
A curated list of awesome Lit resources.
View byDAY/WEEK/README
View on Github

Yesterday

Jul 29th

Design Systems

  • AXA Pattern Librarystars95 - AXA CH UI components library built with LitElement.
  • Carbon Web Componentsstars391 - Carbon Design System variant on top of Web Components.
  • Momentum UI Web Components - Set of UI components based on Momentum Design.
  • Clarity Core Web Components - Suite of web components for Clarity Design System.
  • Red Hat Design Systemstars16 - Web components for building uniform experiences with the Red Hat brand.
  • Jul 28th

    Extensions

  • @lit-app/state - Lean and simple global State management for Lit 2.
  • Jul 26th

    General resources

  • Tutorials
  • Apr 29th

    Component Libraries

  • Dile Componentsstars24 - General use Web Components for websites and applications.
  • Apr 18th

    Tools

    Building

  • esbuild-plugin-lit - ESBuild plugin to import CSS, SVG, HTML, XLIFF files as JavaScript tagged-template literal objects.
  • Oct 16th, 2021

    Extensions

  • @shoelace-style/localize - A micro library for localizing custom elements, providing directives for Lit.
  • Oct 6th, 2021

    Starter Templates

  • Lit Webpack Starterstars6 - Starter for multipage apps with Lit and Typescript, using Webpack.
  • Oct 4th, 2021

    Sep 28th, 2021

    Sep 25th, 2021

    Extensions

  • @stefanholzapfel/lit-state - Lightweight reactive state management for Lit 2.
  • Integrations

  • Bridgetown Lit Rendererstars10 - SSR + hydration of Lit components for Bridgetown.
  • Starter Templates

  • Vite Lit Starter - Lit based template preset for Vite.
  • Vite Lit TS Starter - Lit and TypeScript based template preset for Vite.
  • Design Systems

  • Outline Design Systemstars63 - Web component based design system starter kit.
  • Sep 24th, 2021

    Examples

  • Polymer → Lit Migration Guide - Code examples showing migration guidance from Polymer to Lit.
  • Starter Templates

  • Lit Sass JavaScript Starterstars0 - Project that has a simple setup for SASS + JS + Lit, using Rollup.
  • Lit Sass TypeScript Starterstars20 - Project that has a simple setup for SASS + TS + Lit, using Rollup.
  • Vite Lit Element TS SASSstars43 - Example Vite project using Lit 2, Typescript, and SASS.
  • Component Libraries

  • Furo Webcomponentsstars9 - Enterprise ready set of web components which work best with Eclipse Furo.
  • Fusion Web Componentsstars0 - Ser of web components used by Equinor Fusion.
  • Titanium Elementsstars6 - Collection of lightweight web components used by Leavitt Group Enterprises.
  • Sep 23rd, 2021

    Integrations

  • Fable.Litstars75 - Collection of tools to embed HTML code into F# code with the power of Lit.
  • Ruby2JSstars365 - Minimal yet extensible Ruby to JavaScript conversion.
  • Examples

  • Lit Nativestars27 - Reuse Lit web components on native platforms.
  • Lit Node Editorstars14 - Node editor built with canvas API and simple graph data structure.
  • Lit 3D Pianostars10 - 3D Piano built with Lit, Three.js and Tone.js.
  • Open Web Components Examples - Code examples of common patterns using Lit.
  • Vite + RxDB + Litstars4 - Minimal example to get RxDB running with Vite.
  • Standalone Components

  • <helium-animated-pages> - Web component for creating CSS animations built with Lit.
  • <json-viewer> - Web Component to visualize JSON data in a tree view.
  • <light-gallery> - Full featured JavaScript image and video gallery for Lit.
  • <round-slider> - Simple round slider web component built with Lit.
  • Sep 22nd, 2021

    Component Libraries

  • ESP Web Toolsstars172 - Allow flashing ESPHome or other ESP-based firmwares via the browser.
  • Ignite UI Web Componentsstars74 - Complete library of UI components from Infragistics.
  • Medblocks UIstars27 - Web Components for rapid development of openEHR and FHIR systems.
  • Vidstack Elementsstars442 - Spec-compliant customizable, extensible, accessible and universal media elements.
  • Tools

    Other Tools

  • Storybook for web-components - UI development environment for plain web-component snippets.
  • @custom-elements-manifest/analyzer - CLI tool to generate API documentation for web components.
  • 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.
  • Tools

    Building

  • lit-scss-loader - Webpack loader to import the CSS/SCSS into Lit components.
  • 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-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.
  • 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.
  • Tools

    TypeScript Plugins

  • typescript-lit-html-plugin - TypeScript server plugin that adds IntelliSense for Lit templates.
  • ts-lit-plugin - Plugin that adds type checking and code completion for Lit templates.
  • 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.
  • 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-literalsstars61 - Syntax highlighting and indentation for HTML inside of tagged template literals.
  • Overview

  • Announcing Lit 2 stable release
  • Videos

  • Lit 2.0 Release Livestream
  • Sep 21st, 2021

    Lit Labs

  • @lit-labs/scoped-registry-mixin - Mixin for LitElement that integrates with the speculative Scoped CustomElementRegistry polyfill to evaluate the proposal and facilitate feedback.
  • @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/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.
  • @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 - 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 - Build Web Components with functional programming using Lit.
  • Component Libraries

  • Apollo Elementsstars371 - Custom elements meet Apollo GraphQL.
  • Stripe Elementsstars63 - Custom Element Wrapper for Stripe.js v3 Elements.
  • VSCode Webview Elementsstars28 - Components for creating VSCode extensions which use the Webview API.
  • Webmarkets web componentsstars1 - Set of Webmarkets' public web components.
  • Playground Elementsstars292 - Serverless code experiences with web components.
  • Blackstone UIstars48 - Web components for creating interfaces built with lit-html and LitElement.
  • Curvenotestars125 - Web components for creating interactive scientific articles.
  • One Platform Componentsstars19 - Set of web components for Red Hat One Platform.
  • Web Components for TEI Publisherstars13 - Web components used by TEI Publisher and apps generated by it.
  • Tools

    Other Tools

  • Web Component DevToolsstars82 - Browser extension for developers working with Web Components.
  • Community

  • YouTube
  • Overview

  • Lit 2.0: Meet Lit, all over again!
  • Videos

  • Lit Beta Launch Event (2021)
  • Design Systems

  • Korstars204 - An open source Design System and lightweight UI Component Library.
  • Lionstars1.4k - Highly performant, accessible and flexible Web Components.
  • Material Web Componentsstars3.8k - Material Design implemented as Web Components.
  • Pharos Design Systemstars50 - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
  • Shoelacestars7.2k - Collection of professionally designed UI components built on a framework-agnostic technology.
  • Spectrum Web Componentsstars702 - Adobe Spectrum design language implementation built with LitElement.
  • UI5 Web Componentsstars1.2k - Enterprise-flavored sugar on top of native APIs!
  • Sep 20th, 2021

    Community

  • GitHub Discussions
  • Twitter
  • GitHubstars12.5k
  • Slack
  • Stack Overflow
  • Tutorials

  • 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 and Figma
  • Lit and Flutter
  • Lit and Monaco Editor
  • Lit and VSCode Extensions
  • Lit Sheet Music
  • Navigation Lifecycle using Vaadin Router, LitElement and TypeScript
  • lit-html Part 1 - A solution for DOM management in web components
  • lit-html Part 2 - Working with attributes and properties
  • Recreating The Arduino Pushbutton Using SVG And <lit-element>
  • Routing Management with LitElement and TypeScript
  • Archive

  • Render HTML with Vanilla JavaScript and lit-html
  • Updating blog-pwa from Polymer to LitElement, Workbox, and Rollup
  • Let's Build Web Components! Part 5: LitElement
  • 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
  • Component Libraries

  • Wired Elementsstars9.1k - Collection of elements that appear hand drawn.
  • Starter Templates

  • LitElement JavaScript starterstars136 - Sample component using LitElement with JavaScript.
  • LitElement TypeScript starterstars333 - Sample component using LitElement with TypeScript.
  • hello-web-componentsstars15 - Simple starter web component written in TypeScript using Lit.
  • Open Web Components Generator - Starter app based on Open Web Components Recommendations.
  • pwa-starterstars753 - LitElement edition of the PWABuilder pwa-starter.
  • pwa-lit-templatestars145 - Build Progressive Web Applications following the modern web standards.
  • 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
  • Similar libraries

  • haunted - React's Hooks API but for standard web components and hyperHTML or lit-html.
  • General resources

  • Documentation
  • Playground
  • Blog
  • CDN

  • cdn.esm.sh
  • JSPM CDN
  • Skypack CDN
  • unpkg.com
  • May 8th, 2020

    Standalone Components

  • <granite-qrcode-generator> - Custom element to generate and render QR Codes, using qr.js library.
  • Apr 24th, 2020

    Component Libraries

  • Wokwi Elementsstars101 - Web Components for Arduino and various electronic parts.
  • Apr 23rd, 2020

    Design Systems

  • Brightspace UI corestars34 - Collection of web components for building Brightspace applications.
  • Apr 20th, 2020

    Standalone Components

  • <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.
  • <stl-part-viewer> - LitElement web component that utilizes Three.js to display an STL model file.
  • Mar 23rd, 2020

    Component Libraries

  • Mutation testing elementsstars17 - A schema for mutation testing results with the web components to visualize it.
  • Jan 22nd, 2020

    Standalone Components

  • <codesandbox-button> - Custom Element that shows a CodeSandbox demo when you click on it.
  • Dec 24th, 2019

    Standalone Components

  • <api-viewer> - API documentation and live playground for Web Components.
  • Oct 23rd, 2019

    Standalone Components

  • <lottie-player> - Web Component for easily embedding and playing Lottie animations.
  • <app-datepicker> - Datepicker element built with LitElement and Material Design 2.
  • <rapi-doc> - Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec.
  • <lit-datatable> - Material Design implementation of a data table, powered by LitElement.
  • <model-viewer> - A web component for rendering interactive 3D models.
  • Jul 20th, 2019

    Component Libraries

  • Chartjs Web Componentsstars50 - Web components for chartjs.
  • LRNWebComponentsstars208 - ELMS:LN produced web components for any project.
  • Jul 18th, 2019

    Similar libraries

  • htmstars7.9k - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
  • Jul 17th, 2019

    Component Libraries

  • Microsoft Graph Toolkitstars726 - Collection of web components for the Microsoft Graph.
  • Jul 9th, 2019

    Component Libraries

  • Clever componentsstars145 - Collection of Web Components made by Clever Cloud.
  • Sep 25th, 2018

    Jul 31st, 2018

    Similar libraries

  • lit-ntmlstars77 - Lightweight and modern templating for SSR in Node.js, inspired by lit-html.
  • Jul 29th, 2018

    Podcasts

  • The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals -
  • Similar libraries

  • hybridsstars2.7k - UI library for creating Web Components with simple and functional API.
  • Last Checked At: 2022-09-21T13:36:50.536Z
    Previous
    unicodeveloper/awesome-nextjs
    Next
    automata/awesome-jamstack

    About

    Track your favorite github awesome repo, not just star it. trackawesomelist.com provides website, newsletter, RSS for tracking the popular awesome list by daily and weekly.
    Contact us: [email protected]
    Track Awesome List - Track your favorite Github awesome repos, not just star them | Product Hunt

    Subscribe

    Subscribe to our weekly newsletter to receive the awesome updates! We never send spam and you can unsubscribe instantly with one click. Here's past issues.

    Links

    Follow us on TwitterSubscribe us on TelegramSubmit awesome list repoNewsletterDonateSitemap