{"id":27569565,"url":"https://github.com/web-padawan/awesome-lit-html","last_synced_at":"2025-04-21T00:01:48.168Z","repository":{"id":38784045,"uuid":"135072666","full_name":"web-padawan/awesome-lit","owner":"web-padawan","description":"A curated list of awesome Lit resources.","archived":false,"fork":false,"pushed_at":"2025-04-04T10:06:23.000Z","size":190,"stargazers_count":1576,"open_issues_count":4,"forks_count":88,"subscribers_count":79,"default_branch":"main","last_synced_at":"2025-04-17T14:13:10.177Z","etag":null,"topics":["awesome","awesome-list","lit-html"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/web-padawan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-27T18:45:29.000Z","updated_at":"2025-04-17T12:48:47.000Z","dependencies_parsed_at":"2024-04-19T04:42:01.764Z","dependency_job_id":"94bc47cc-2a98-42db-9e1c-f07e02cd8198","html_url":"https://github.com/web-padawan/awesome-lit","commit_stats":null,"previous_names":["web-padawan/awesome-lit-html"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fawesome-lit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fawesome-lit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fawesome-lit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fawesome-lit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web-padawan","download_url":"https://codeload.github.com/web-padawan/awesome-lit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249977522,"owners_count":21354863,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","lit-html"],"created_at":"2025-04-21T00:01:47.518Z","updated_at":"2025-04-21T00:01:48.150Z","avatar_url":"https://github.com/web-padawan.png","language":null,"funding_links":[],"categories":["Technical","Others","Front-End Development","Live Site:   [searchAwesome](https://search-awesome.vercel.app/)","前端开发","Other Lists","Resources","Libraries"],"sub_categories":["awesome-*","Julia Lists","lit-html"],"readme":"# Awesome Lit [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n\n\u003e A curated list of awesome Lit resources.\n\n[Lit](https://github.com/lit/lit) — a simple library for building fast, lightweight web components.\n\nAt 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.\n\n## Contents\n\n- [General resources](#general-resources)\n- [Community](#community)\n- [Overview](#overview)\n- [Starter Templates](#starter-templates)\n- [Codelabs](#codelabs)\n- [Tutorials](#tutorials)\n- [Examples](#examples)\n- [Lit Labs](#lit-labs)\n- [Extensions](#extensions)\n- [Design Systems](#design-systems)\n- [Component Libraries](#component-libraries)\n- [Standalone Components](#standalone-components)\n- [Tools](#tools)\n  - [Building](#building)\n  - [Linting](#linting)\n  - [IDE Plugins](#ide-plugins)\n  - [TypeScript Plugins](#typescript-plugins)\n  - [Other Tools](#other-tools)\n- [CDN](#cdn)\n- [Integrations](#integrations)\n- [Videos](#videos)\n- [Podcasts](#podcasts)\n- [Archive](#archive)\n- [Similar libraries](#similar-libraries)\n- [Other awesome resources](#other-awesome-resources)\n\n## General resources\n\n- [Documentation](https://lit.dev/docs/)\n- [Tutorials](https://lit.dev/tutorials/)\n- [Playground](https://lit.dev/playground/)\n- [Blog](https://lit.dev/blog/)\n\n## Community\n\n- [Discord](https://discord.com/invite/buildWithLit)\n- [GitHub](https://github.com/lit/lit)\n- [GitHub Discussions](https://github.com/lit/lit/discussions)\n- [Twitter](https://twitter.com/buildWithLit)\n- [Stack Overflow](https://stackoverflow.com/questions/tagged/lit+or+lit-html+or+lit-element)\n- [YouTube](https://www.youtube.com/channel/UCok4ZKSzM3jY7JQRMlF-DPg/)\n\n## Overview\n\n- [Lightning-fast templates \u0026 Web Components: lit-html \u0026 LitElement](https://developers.google.com/web/updates/2019/02/lit-element-and-lit-html)\n- [Lit 2.0: Meet Lit, all over again!](https://lit.dev/blog/2021-04-21-lit-2.0-meet-lit-all-over-again/)\n- [Announcing Lit 2 stable release](https://lit.dev/blog/2021-09-21-announcing-lit-2/)\n\n## Starter Templates\n\n- [LitElement JavaScript starter](https://github.com/lit/lit-element-starter-js) - Sample component using LitElement with JavaScript.\n- [LitElement TypeScript starter](https://github.com/lit/lit-element-starter-ts) - Sample component using LitElement with TypeScript.\n- [hello-web-components](https://github.com/fernandopasik/hello-web-components) - Simple starter web component written in TypeScript using Lit.\n- [Lit Sass JavaScript Starter](https://github.com/e111077/lit-sass-js-starter) - Project that has a simple setup for SASS + JS + Lit, using Rollup.\n- [Lit Sass TypeScript Starter](https://github.com/e111077/lit-sass-ts-starter) - Project that has a simple setup for SASS + TS + Lit, using Rollup.\n- [Lit Webpack Starter](https://github.com/andrewlevada/webpack-lit-template) - Starter for multipage apps with Lit and Typescript, using Webpack.\n- [Open Web Components Generator](https://open-wc.org/docs/development/generator/) - Starter app based on Open Web Components Recommendations.\n- [pwa-starter](https://github.com/pwa-builder/pwa-starter) - LitElement edition of the PWABuilder pwa-starter.\n- [pwa-lit-template](https://github.com/IBM/pwa-lit-template) - Build Progressive Web Applications following the modern web standards.\n- [Vite Lit Element TS SASS](https://github.com/e111077/vite-lit-element-ts-sass) - Example Vite project using Lit 2, Typescript, and SASS.\n- [Vite Lit Starter](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-lit) - Lit based template preset for Vite.\n- [Vite Lit TS Starter](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-lit-ts) - Lit and TypeScript based template preset for Vite.\n\n## Codelabs\n\n- [Build a Brick Viewer with lit-element](https://codelabs.developers.google.com/codelabs/lit-brick-viewer#0)\n- [Build a Story Component with lit-element](https://codelabs.developers.google.com/codelabs/lit-story-viewer#0)\n- [From Web Component to Lit Element](https://codelabs.developers.google.com/codelabs/the-lit-path#0)\n- [lit-html \u0026 lit-element: basics](https://open-wc.org/codelabs/basics/lit-html.html#0)\n- [lit-html \u0026 lit-element: intermediate](https://open-wc.org/codelabs/intermediate/lit-html.html#0)\n- [Lit for React Developers](https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs#0)\n\n## Tutorials\n\n- [Building A Retro Draggable Web Component Using Lit](https://www.smashingmagazine.com/2022/09/building-retro-draggable-web-component-using-lit/)\n- [Building a Rich Text Editor with Lit](https://rodydavis.com/posts/lit-rich-text-editor/)\n- [Draggable DOM with Lit](https://rodydavis.com/posts/lit-draggable-dom/)\n- [Getting started with LitElement and TypeScript](https://labs.thisdot.co/blog/getting-started-with-litelement-and-typescript)\n- [Here's a minimalist no-frills Redux Toolkit \u0026 LitElement example](https://dev.to/jdvivar/here-s-a-minimalist-no-frills-redux-toolkit-litelement-example-1j91)\n- [JSON to HTML Table with Lit](https://rodydavis.com/posts/lit-html-table/)\n- [lit-html Part 1 - A solution for DOM management in web components](https://terodox.tech/handling-web-component-markup-with-lit-html/)\n- [lit-html Part 2 - Working with attributes and properties](https://terodox.tech/lit-html-part-2/)\n- [Lit and Figma](https://rodydavis.com/posts/figma-and-lit/)\n- [Lit and Flutter](https://rodydavis.com/posts/flutter-and-lit/)\n- [Lit and Monaco Editor](https://rodydavis.com/posts/lit-monaco-editor/)\n- [Lit and VSCode Extensions](https://rodydavis.com/posts/lit-vscode-extension/)\n- [Lit Sheet Music](https://rodydavis.com/posts/lit-sheet-music/)\n- [Navigation Lifecycle using Vaadin Router, LitElement and TypeScript](https://labs.thisdot.co/blog/navigation-lifecycle-using-vaadin-router-litelement-and-typescript)\n- [Recreating The Arduino Pushbutton Using SVG And \u0026lt;lit-element\u0026gt;](https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/)\n- [Routing Management with LitElement and TypeScript](https://labs.thisdot.co/blog/routing-management-with-litelement)\n- [Some things to know about Lit](https://dev.to/open-wc/some-things-to-know-about-litelement-282c)\n\n## Examples\n\n- [Lit Native](https://github.com/rodydavis/lit-native) - Reuse Lit web components on native platforms.\n- [Lit Node Editor](https://github.com/rodydavis/lit-node-editor) - Node editor built with canvas API and simple graph data structure.\n- [Lit 3D Piano](https://github.com/rodydavis/lit-3d-piano/) - 3D Piano built with Lit, Three.js and Tone.js.\n- [Open Web Components Examples](https://open-wc.org/guides/developing-components/code-examples/#lit-html-and-lit-element) - Code examples of common patterns using Lit.\n- [Polymer → Lit Migration Guide](https://kevinpschaaf.github.io/lit-migration-guide) - Code examples showing migration guidance from Polymer to Lit.\n- [Vite + RxDB + Lit](https://github.com/rodydavis/vite-rxdb-lit) - Minimal example to get RxDB running with Vite.\n\n## Lit Labs\n\n- [`@lit/localize`](https://www.npmjs.com/package/@lit/localize) - Library and command-line tool for localizing web applications built using Lit.\n- [`@lit-labs/ssr`](https://www.npmjs.com/package/@lit-labs/ssr) - Package for server-side rendering Lit templates and components.\n- [`@lit-labs/motion`](https://www.npmjs.com/package/@lit-labs/motion) - Lit directives for making things move.\n- [`@lit-labs/react`](https://www.npmjs.com/package/@lit-labs/react) - React integration for Web Components and reactive Lit controllers.\n- [`@lit-labs/scoped-registry-mixin`](https://www.npmjs.com/package/@lit-labs/scoped-registry-mixin) - Mixin for LitElement that integrates with the speculative Scoped CustomElementRegistry polyfill to evaluate the proposal and facilitate feedback.\n- [`@lit-labs/task`](https://www.npmjs.com/package/@lit-labs/task) - Controller for Lit that renders asynchronous tasks.\n- [`@lit-labs/virtualizer`](https://www.npmjs.com/package/@lit-labs/virtualizer) - Package that provides virtual scrolling for Lit.\n\n## Extensions\n\n- [`@adobe/lit-mobx`](https://www.npmjs.com/package/@adobe/lit-mobx) - Mixin and base class for using mobx with Lit.\n- [`@apollo-elements/lit-apollo`](https://www.npmjs.com/package/@apollo-elements/lit-apollo) - LitElement integrations with Apollo GraphQL.\n- [`@lit-app/state`](https://www.npmjs.com/package/@lit-app/state) - Lean and simple global State management for Lit 2.\n- [`@shoelace-style/localize`](https://github.com/shoelace-style/localize) - A micro library for localizing custom elements, providing directives for Lit.\n- [`@stefanholzapfel/lit-state`](https://www.npmjs.com/package/@stefanholzapfel/lit-state) - Lightweight reactive state management for Lit 2.\n- [`@vaadin/form`](https://www.npmjs.com/package/@vaadin/form) - Set of utilities for building forms with TypeScript and Lit.\n- [`dark-theme-utils`](https://www.npmjs.com/package/dark-theme-utils) - Useful utilities for dark mode built with Web Components.\n- [`exome`](https://www.npmjs.com/package/exome) - State manager for deeply nested states that supports Lit.\n- [`pure-lit`](https://github.com/MatthiasKainer/pure-lit) - Register your Lit elements as pure functions.\n- [`lit-element-effect`](https://www.npmjs.com/package/lit-element-effect) - Effect hooks for LitElement.\n- [`lit-element-state-decoupler`](https://www.npmjs.com/package/lit-element-state-decoupler) - Utility for state handling outside of the component for LitElement.\n- [`lit-redux-router`](https://www.npmjs.com/package/lit-redux-router) - Declarative way of routing for Lit powered by pwa-helpers and Redux.\n- [`lit-svelte-stores`](https://www.npmjs.com/package/lit-svelte-stores) - Lit controller to use svelte stores as state management.\n- [`lit-vaadin-helpers`](https://www.npmjs.com/package/lit-vaadin-helpers) - Helpers for using Vaadin web components with Lit 2.\n- [`ullr`](https://github.com/aggre/ullr) - Build Web Components with functional programming using Lit.\n\n## Design Systems\n\n- [AXA Pattern Library](https://github.com/axa-ch-webhub-cloud/pattern-library) - AXA CH UI components library built with LitElement.\n- [Brightspace UI core](https://github.com/BrightspaceUI/core) - Collection of web components for building Brightspace applications.\n- [Carbon Web Components](https://github.com/carbon-design-system/carbon-web-components) - Carbon Design System variant on top of Web Components.\n- [Clarity Core Web Components](https://github.com/vmware-clarity/core/tree/main/projects/core) - Suite of web components for Clarity Design System.\n- [Kor](https://github.com/eduferfer/kor) - An open source Design System and lightweight UI Component Library.\n- [Lion](https://github.com/ing-bank/lion) - Highly performant, accessible and flexible Web Components.\n- [Material Web Components](https://github.com/material-components/material-web) - Material Design implemented as Web Components.\n- [Momentum UI Web Components](https://github.com/momentum-design/momentum-ui/tree/master/web-components) - Set of UI components based on Momentum Design.\n- [Outline Design System](https://github.com/phase2/outline) - Web component based design system starter kit.\n- [Pharos Design System](https://github.com/ithaka/pharos) - JSTOR's design system to create cohesive, supportive, and beautiful experiences.\n- [Red Hat Design System](https://github.com/RedHat-UX/red-hat-design-system) - Web components for building uniform experiences with the Red Hat brand.\n- [Shoelace](https://github.com/shoelace-style/shoelace) - Collection of professionally designed UI components built on a framework-agnostic technology.\n- [Spectrum Web Components](https://github.com/adobe/spectrum-web-components) - Adobe Spectrum design language implementation built with LitElement.\n- [UI5 Web Components](https://github.com/SAP/ui5-webcomponents) - Enterprise-flavored sugar on top of native APIs!\n\n## Component Libraries\n\n- [Apollo Elements](https://github.com/apollo-elements/apollo-elements) - Custom elements meet Apollo GraphQL.\n- [Blackstone UI](https://github.com/kjantzer/bui) - Web components for creating interfaces built with lit-html and LitElement.\n- [Chartjs Web Components](https://github.com/fsx950223/chartjs-web-components) - Web components for chartjs.\n- [Clever components](https://github.com/CleverCloud/clever-components) - Collection of Web Components made by Clever Cloud.\n- [Curvenote](https://github.com/curvenote/article) - Web components for creating interactive scientific articles.\n- [Dile Components](https://github.com/Polydile/dile-components) - General use Web Components for websites and applications.\n- [ESP Web Tools](https://github.com/esphome/esp-web-tools) - Allow flashing ESPHome or other ESP-based firmwares via the browser.\n- [Furo Webcomponents](https://github.com/eclipse/eclipsefuro-web) - Enterprise ready set of web components which work best with Eclipse Furo.\n- [Fusion Web Components](https://github.com/equinor/fusion-web-components) - Ser of web components used by Equinor Fusion.\n- [Ignite UI Web Components](https://github.com/IgniteUI/igniteui-webcomponents) - Complete library of UI components from Infragistics.\n- [LRNWebComponents](https://github.com/elmsln/lrnwebcomponents) - ELMS:LN produced web components for any project.\n- [Medblocks UI](https://github.com/medblocks/medblocks-ui) - Web Components for rapid development of openEHR and FHIR systems.\n- [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit) - Collection of web components for the Microsoft Graph.\n- [Mutation testing elements](https://github.com/stryker-mutator/mutation-testing-elements) - A schema for mutation testing results with the web components to visualize it.\n- [One Platform Components](https://github.com/1-Platform/op-components) - Set of web components for Red Hat One Platform.\n- [Playground Elements](https://github.com/PolymerLabs/playground-elements) - Serverless code experiences with web components.\n- [Stripe Elements](https://github.com/bennypowers/stripe-elements) - Custom Element Wrapper for Stripe.js v3 Elements.\n- [Titanium Elements](https://github.com/LeavittSoftware/titanium-elements) - Collection of lightweight web components used by Leavitt Group Enterprises.\n- [TrendChart Elements](https://github.com/WebLogin/trendchart-elements) - Components to generate simple charts representing trends.\n- [Umbraco UI Components](https://github.com/umbraco/Umbraco.UI) - Collection of user interface web components for Umbraco CMS.\n- [Vidstack Elements](https://github.com/vidstack/vds-elements) - Spec-compliant customizable, extensible, accessible and universal media elements.\n- [VSCode Webview Elements](https://github.com/bendera/vscode-webview-elements) - Components for creating VSCode extensions which use the Webview API.\n- [Web Components for TEI Publisher](https://github.com/eeditiones/tei-publisher-components) - Web components used by TEI Publisher and apps generated by it.\n- [Webmarkets web components](https://github.com/Webmarkets/wm-web-components) - Set of Webmarkets' public web components.\n- [Wired Elements](https://github.com/rough-stuff/wired-elements) - Collection of elements that appear hand drawn.\n- [Wokwi Elements](https://github.com/wokwi/wokwi-elements) - Web Components for Arduino and various electronic parts.\n\n## Standalone Components\n\n- [`\u003capi-viewer\u003e`](https://github.com/web-padawan/api-viewer-element) - API documentation and live playground for Web Components.\n- [`\u003capp-datepicker\u003e`](https://github.com/motss/app-datepicker) - Datepicker element built with LitElement and Material Design 2.\n- [`\u003cburgton-button\u003e`](https://github.com/boguz/burgton-button) - Simple to use, customizable and accessible burger-button element.\n- [`\u003ccode-block\u003e`](https://github.com/justinribeiro/code-block) - Web component that displays colorfully formatted code with Prism.js and LitElement.\n- [`\u003ccodesandbox-button\u003e`](https://github.com/bennypowers/codesandbox-button) - Custom Element that shows a CodeSandbox demo when you click on it.\n- [`\u003ceditor-container\u003e`](https://github.com/toeverything/blocksuite) - Block based editor, designed for general-purpose collaborative applications.\n- [`\u003cgranite-qrcode-generator\u003e`](https://github.com/LostInBrittany/granite-qrcode-generator) - Custom element to generate and render QR Codes, using qr.js library.\n- [`\u003chelium-animated-pages\u003e`](https://github.com/alangdm/helium-animated-pages) - Web component for creating CSS animations built with Lit.\n- [`\u003cjson-viewer\u003e`](https://github.com/alenaksu/json-viewer) - Web Component to visualize JSON data in a tree view.\n- [`\u003clight-gallery\u003e`](https://github.com/sachinchoolur/lightGallery/tree/master/lightgallery-lit) - Full featured JavaScript image and video gallery for Lit.\n- [`\u003clit-datatable\u003e`](https://github.com/DoubleTrade/lit-datatable) - Material Design implementation of a data table, powered by LitElement.\n- [`\u003clit-image-cropper\u003e`](https://github.com/andy-austin/lit-image-cropper) - Fast and lightweight image cropper component.\n- [`\u003clottie-player\u003e`](https://github.com/LottieFiles/lottie-player) - Web Component for easily embedding and playing Lottie animations.\n- [`\u003cmodel-viewer\u003e`](https://github.com/GoogleWebComponents/model-viewer) - A web component for rendering interactive 3D models.\n- [`\u003crapi-doc\u003e`](https://github.com/mrin9/RapiDoc) - Web Component to view OpenAPI 3.0 \u0026 Swagger 2.0 Spec.\n- [`\u003cround-slider\u003e`](https://github.com/thomasloven/round-slider) - Simple round slider web component built with Lit.\n- [`\u003cstl-part-viewer\u003e`](https://github.com/justinribeiro/stl-part-viewer) - LitElement web component that utilizes Three.js to display an STL model file.\n\n## Tools\n\n### Building\n\n- [babel-plugin-lit-property-types-from-ts](https://www.npmjs.com/package/babel-plugin-lit-property-types-from-ts) - Babel plugin for setting `type` for reactive properties declared in Lit components based on TypeScript type annotations.\n- [babel-plugin-template-html-minifier](https://www.npmjs.com/package/babel-plugin-template-html-minifier) - Babel plugin for minifying HTML in tagged template strings.\n- [esbuild-plugin-lit](https://www.npmjs.com/package/esbuild-plugin-lit) - ESBuild plugin to import CSS, SVG, HTML, XLIFF files as JavaScript tagged-template literal objects.\n- [esbuild-plugin-lit-css](https://www.npmjs.com/package/esbuild-plugin-lit-css) - ESBuild plugin to import css files as JavaScript tagged-template literal objects.\n- [lit-css-loader](https://www.npmjs.com/package/lit-css-loader) - Webpack loader to import css files as JavaScript tagged-template literal objects.\n- [lit-scss-loader](https://www.npmjs.com/package/lit-scss-loader) - Webpack loader to import the CSS/SCSS into Lit components.\n- [rollup-plugin-lit-css](https://www.npmjs.com/package/rollup-plugin-lit-css) - Rollup plugin to import css files as JavaScript tagged-template literal objects.\n- [rollup-plugin-minify-html-literals](https://www.npmjs.com/package/rollup-plugin-minify-html-literals) - Rollup plugin to minify HTML in tagged template strings.\n- [rollup-plugin-postcss-lit](https://www.npmjs.com/package/rollup-plugin-postcss-lit) - Rollup plugin to load PostCSS-processed stylesheets in Lit components.\n\n### Linting\n\n- [eslint-plugin-lit](https://www.npmjs.com/package/eslint-plugin-lit) - ESLint plugin for Lit template strings.\n- [eslint-plugin-lit-a11y](https://www.npmjs.com/package/eslint-plugin-lit-a11y) - Accessibility linting plugin for Lit templates.\n- [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) - CLI that type checks bindings in Lit templates.\n\n### IDE Plugins\n\n- [vscode-lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) - Syntax highlighting and IntelliSense for lit-html template strings.\n- [vscode-lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) - Syntax highlighting, type checking and code completion for lit-html.\n- [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) - VSCode extension which provides syntax highlighting for HTML in ES6 multiline strings.\n- [vim-html-template-literals](https://github.com/jonsmithers/vim-html-template-literals) - Syntax highlighting and indentation for HTML inside of tagged template literals.\n- [@web-types/lit](https://www.npmjs.com/package/@web-types/lit) - Attribute completion for HTML inside of tagged template literals.\n\n### TypeScript Plugins\n\n- [ts-lit-plugin](https://www.npmjs.com/package/ts-lit-plugin) - Plugin that adds type checking and code completion for Lit templates.\n- [typescript-lit-html-plugin](https://www.npmjs.com/package/typescript-lit-html-plugin) - TypeScript server plugin that adds IntelliSense for Lit templates.\n\n### Other Tools\n\n- [@custom-elements-manifest/analyzer](https://www.npmjs.com/package/@custom-elements-manifest/analyzer) - CLI tool to generate API documentation for web components.\n- [Storybook for web-components](https://www.npmjs.com/package/@storybook/web-components) - UI development environment for plain web-component snippets.\n- [web-components-codemods](https://www.npmjs.com/package/web-components-codemods) - Codemods for Web Components compatible with lit-html template literals.\n- [Web Component DevTools](https://github.com/Matsuuu/web-component-devtools) - Browser extension for developers working with Web Components.\n- [Web Component Factory](https://www.npmjs.com/package/@wcfactory/cli) - CLI tool for generating, building, testing and publishing web components.\n\n## CDN\n\nThe following content delivery networks provide ES module versions of Lit:\n\n- [cdn.esm.sh](https://cdn.esm.sh/lit)\n- [jsDelivr CDN](https://cdn.jsdelivr.net/npm/lit/+esm)\n- [JSPM CDN](https://jspm.dev/lit)\n- [Skypack CDN](https://cdn.skypack.dev/lit)\n- [unpkg.com](https://unpkg.com/lit?module)\n\nSee [lit.dev documentation](https://lit.dev/docs/getting-started/#use-bundles) for using bundles.\n\n## Integrations\n\n- [Bridgetown Lit Renderer](https://github.com/bridgetownrb/bridgetown-lit-renderer) - SSR + hydration of Lit components for Bridgetown.\n- [Fable.Lit](https://github.com/fable-compiler/Fable.Lit) - Collection of tools to embed HTML code into F# code with the power of Lit.\n- [Ruby2JS](https://github.com/ruby2js/ruby2js) - Minimal yet extensible Ruby to JavaScript conversion.\n\n## Videos\n\n- [Lit 3.0 Launch Event](https://www.youtube.com/watch?v=ri9FEl_hRTc)\n- [Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)](https://www.youtube.com/watch?v=ruql541T7gc)\n- [lit-HTML (Chrome Dev Summit 2017)](https://www.youtube.com/watch?v=Io6JjgckHbg)\n- [Lit Beta Launch Event (2021)](https://www.youtube.com/watch?v=f1j7b696L-E)\n- [Lit 2.0 Release Livestream](https://www.youtube.com/watch?v=nfb779XIhsU)\n- [VDOM vs lit-html - HTTP203](https://www.youtube.com/watch?v=uCHZJy2n8Qs)\n- [Declarative Reactive Web Components with Justin Fagnani](https://www.youtube.com/watch?v=9FB0GSOAESo)\n- [Building a Complex Application with Web Components and LitElement](https://www.youtube.com/watch?v=x9YDQUJx2uw)\n\n## Podcasts\n\n- [The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals](https://thewebplatformpodcast.com/159-lithtml-html-templates-via-javascript-template-literals) -\nAn episode with the lit-html creator Justin Fagnani.\n- [ShopTalk Show 348: Getting lit-html with Justin Fagnani](https://shoptalkshow.com/episodes/348/) - Another episode with Justin Fagnani as a guest.\n\n## Archive\n\nThe following articles refer to older versions of lit-html and LitElement.\n\n- [Render HTML with Vanilla JavaScript and lit-html](https://dev.to/azure/too-hard-too-soft-just-right-rendering-html-with-lit-html-1km8)\n- [A gentle introduction to lit-html](https://dev.to/julcasans/a-gentle-introduction-to-lit-html-3d74)\n- [lit-html templates from zero to hero](https://dev.to/julcasans/lit-html-templates-from-zero-to-hero-2afm)\n- [Updating blog-pwa from Polymer to LitElement, Workbox, and Rollup](https://justinribeiro.com/chronicle/2019/04/11/updating-blog-pwa-from-polymer-to-litelement-workbox-and-rollup/)\n- [Let's Build Web Components! Part 5: LitElement](https://dev.to/bennypowers/lets-build-web-components-part-5-litelement-906)\n- [LitElement To Do App](https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4)\n- [LitElement with Rollup, Babel \u0026 Karma](https://43081j.com/2018/09/polymer-lit-with-rollup)\n- [A new, lean way of creating web apps](https://medium.com/@kennethrohde/a-new-lean-way-of-creating-web-apps-88a49c5b87ec)\n- [The future of Polymer \u0026 lit-html](https://43081j.com/2018/08/future-of-polymer)\n- [A night experimenting with Lit-HTML](https://lucamezzalira.com/2018/08/14/a-night-experimenting-with-lit-html/)\n- [Making a fullstack CRUD app with LitHTML, Redux, Express, and Webpack](https://medium.com/@pascalschilp/making-a-fullstack-crud-app-with-lithtml-redux-express-and-webpack-fe7e5cf8b3ef)\n- [Building a chat with Twilio, lit-html, Parcel and TypeScript](https://dev.to/dkundel/building-a-chat-with-twilio-lit-html-parcel-and-typescript-1jo1)\n\n## Similar libraries\n\nThese libraries are not related to Lit, but are built using similar concepts. They use `html` tagged\ntemplate literal, and leverage the benefits of the same [IDE Plugins](#ide-plugins) for syntax highlighting.\n\n- [haunted](https://www.npmjs.com/package/haunted) - React's Hooks API but for standard web components and hyperHTML or lit-html.\n- [htm](https://github.com/developit/htm) - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.\n- [hybrids](https://github.com/hybridsjs/hybrids) - UI library for creating Web Components with simple and functional API.\n- [lit-ntml](https://github.com/motss/lit-ntml) - Lightweight and modern templating for SSR in Node.js, inspired by lit-html.\n\n## Other awesome resources\n\n**If you want more awesome resources, check the [awesome](https://github.com/sindresorhus/awesome) list!**\n\n---\n\n## License\n\n[![CC0](https://upload.wikimedia.org/wikipedia/commons/6/69/CC0_button.svg)](http://creativecommons.org/publicdomain/zero/1.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-padawan%2Fawesome-lit-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-padawan%2Fawesome-lit-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-padawan%2Fawesome-lit-html/lists"}