1 line
No EOL
34 KiB
JSON
1 line
No EOL
34 KiB
JSON
{"slug": "web-padawan--awesome-lit", "title": "Lit", "description": "A curated list of awesome Lit resources.", "github_url": "https://github.com/web-padawan/awesome-lit", "stars": "1.7K", "tag": "Front-End Development", "entry_count": 221, "subcategory_count": 6, "subcategories": [{"name": "General", "parent": "", "entries": [{"name": "General resources", "url": "#general-resources", "description": ""}, {"name": "Community", "url": "#community", "description": ""}, {"name": "Overview", "url": "#overview", "description": ""}, {"name": "Starter Templates", "url": "#starter-templates", "description": ""}, {"name": "Codelabs", "url": "#codelabs", "description": ""}, {"name": "Tutorials", "url": "#tutorials", "description": ""}, {"name": "Examples", "url": "#examples", "description": ""}, {"name": "Lit Labs", "url": "#lit-labs", "description": ""}, {"name": "Extensions", "url": "#extensions", "description": ""}, {"name": "Design Systems", "url": "#design-systems", "description": ""}, {"name": "Component Libraries", "url": "#component-libraries", "description": ""}, {"name": "Standalone Components", "url": "#standalone-components", "description": ""}, {"name": "Meta Frameworks", "url": "#meta-frameworks", "description": ""}, {"name": "Tools", "url": "#tools", "description": ""}, {"name": "CDN", "url": "#cdn", "description": ""}, {"name": "Integrations", "url": "#integrations", "description": ""}, {"name": "Videos", "url": "#videos", "description": ""}, {"name": "Podcasts", "url": "#podcasts", "description": ""}, {"name": "Archive", "url": "#archive", "description": ""}, {"name": "Similar libraries", "url": "#similar-libraries", "description": ""}, {"name": "Other awesome resources", "url": "#other-awesome-resources", "description": ""}, {"name": "Documentation", "url": "https://lit.dev/docs/", "description": ""}, {"name": "Tutorials", "url": "https://lit.dev/tutorials/", "description": ""}, {"name": "Playground", "url": "https://lit.dev/playground/", "description": ""}, {"name": "Blog", "url": "https://lit.dev/blog/", "description": ""}, {"name": "Discord", "url": "https://discord.com/invite/buildWithLit", "description": ""}, {"name": "GitHub", "url": "https://github.com/lit/lit", "description": "", "stars": "21k"}, {"name": "GitHub Discussions", "url": "https://github.com/lit/lit/discussions", "description": "", "stars": "21k"}, {"name": "Twitter", "url": "https://twitter.com/buildWithLit", "description": ""}, {"name": "Stack Overflow", "url": "https://stackoverflow.com/questions/tagged/lit+or+lit-html+or+lit-element", "description": ""}, {"name": "YouTube", "url": "https://www.youtube.com/channel/UCok4ZKSzM3jY7JQRMlF-DPg/", "description": ""}, {"name": "Lightning-fast templates & Web Components: lit-html & LitElement", "url": "https://developers.google.com/web/updates/2019/02/lit-element-and-lit-html", "description": ""}, {"name": "Lit 2.0: Meet Lit, all over again!", "url": "https://lit.dev/blog/2021-04-21-lit-2.0-meet-lit-all-over-again/", "description": ""}, {"name": "Announcing Lit 2 stable release", "url": "https://lit.dev/blog/2021-09-21-announcing-lit-2/", "description": ""}, {"name": "Gracile Starters", "url": "https://github.com/gracile-web/starter-projects", "description": "Gracile full-stack starter projects (SSR/SSG).", "stars": "1"}, {"name": "LitElement JavaScript starter", "url": "https://github.com/lit/lit-element-starter-js", "description": "Sample component using LitElement with JavaScript.", "stars": "207"}, {"name": "LitElement TypeScript starter", "url": "https://github.com/lit/lit-element-starter-ts", "description": "Sample component using LitElement with TypeScript.", "stars": "532"}, {"name": "hello-web-components", "url": "https://github.com/fernandopasik/hello-web-components", "description": "Simple starter web component written in TypeScript using Lit.", "stars": "31"}, {"name": "Lit Sass JavaScript Starter", "url": "https://github.com/e111077/lit-sass-js-starter", "description": "Project that has a simple setup for SASS + JS + Lit, using Rollup.", "stars": "1"}, {"name": "Lit Sass TypeScript Starter", "url": "https://github.com/e111077/lit-sass-ts-starter", "description": "Project that has a simple setup for SASS + TS + Lit, using Rollup.", "stars": "24"}, {"name": "Lit Webpack Starter", "url": "https://github.com/andrewlevada/webpack-lit-template", "description": "Starter for multipage apps with Lit and Typescript, using Webpack.", "stars": "9"}, {"name": "Open Web Components Generator", "url": "https://open-wc.org/docs/development/generator/", "description": "Starter app based on Open Web Components Recommendations."}, {"name": "pwa-starter", "url": "https://github.com/pwa-builder/pwa-starter", "description": "LitElement edition of the PWABuilder pwa-starter.", "stars": "1.3k"}, {"name": "pwa-lit-template", "url": "https://github.com/IBM/pwa-lit-template", "description": "Build Progressive Web Applications following the modern web standards.", "stars": "184"}, {"name": "Vite Lit Element TS SASS", "url": "https://github.com/e111077/vite-lit-element-ts-sass", "description": "Example Vite project using Lit 2, Typescript, and SASS.", "stars": "75"}, {"name": "Vite Lit Starter", "url": "https://github.com/vitejs/vite/tree/main/packages/create-vite/template-lit", "description": "Lit based template preset for Vite.", "stars": "78k"}, {"name": "Vite Lit TS Starter", "url": "https://github.com/vitejs/vite/tree/main/packages/create-vite/template-lit-ts", "description": "Lit and TypeScript based template preset for Vite.", "stars": "78k"}, {"name": "Vite Lit + Tailwind", "url": "https://github.com/lloydrichards/base_lit-with-tailwind", "description": "Modified Vite + Lit starter to use Tailwind v4.", "stars": "8"}, {"name": "Build a Brick Viewer with lit-element", "url": "https://codelabs.developers.google.com/codelabs/lit-brick-viewer#0", "description": ""}, {"name": "Build a Story Component with lit-element", "url": "https://codelabs.developers.google.com/codelabs/lit-story-viewer#0", "description": ""}, {"name": "From Web Component to Lit Element", "url": "https://codelabs.developers.google.com/codelabs/the-lit-path#0", "description": ""}, {"name": "lit-html & lit-element: basics", "url": "https://open-wc.org/codelabs/basics/lit-html.html#0", "description": ""}, {"name": "lit-html & lit-element: intermediate", "url": "https://open-wc.org/codelabs/intermediate/lit-html.html#0", "description": ""}, {"name": "Lit for React Developers", "url": "https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs#0", "description": ""}, {"name": "Building A Retro Draggable Web Component Using Lit", "url": "https://www.smashingmagazine.com/2022/09/building-retro-draggable-web-component-using-lit/", "description": ""}, {"name": "Building a Rich Text Editor with Lit", "url": "https://rodydavis.com/posts/lit-rich-text-editor", "description": ""}, {"name": "Draggable DOM with Lit", "url": "https://rodydavis.com/posts/lit-draggable-dom", "description": ""}, {"name": "Getting started with LitElement and TypeScript", "url": "https://labs.thisdot.co/blog/getting-started-with-litelement-and-typescript", "description": ""}, {"name": "Here's a minimalist no-frills Redux Toolkit & LitElement example", "url": "https://dev.to/jdvivar/here-s-a-minimalist-no-frills-redux-toolkit-litelement-example-1j91", "description": ""}, {"name": "JSON to HTML Table with Lit", "url": "https://rodydavis.com/posts/lit-html-table", "description": ""}, {"name": "lit-html Part 1 - A solution for DOM management in web components", "url": "https://terodox.tech/handling-web-component-markup-with-lit-html/", "description": ""}, {"name": "lit-html Part 2 - Working with attributes and properties", "url": "https://terodox.tech/lit-html-part-2/", "description": ""}, {"name": "Lit and Figma", "url": "https://rodydavis.com/posts/figma-and-lit", "description": ""}, {"name": "Lit and Flutter", "url": "https://rodydavis.com/posts/flutter-and-lit", "description": ""}, {"name": "Lit and Monaco Editor", "url": "https://rodydavis.com/posts/lit-monaco-editor", "description": ""}, {"name": "Lit and VSCode Extensions", "url": "https://rodydavis.com/posts/lit-vscode-extension", "description": ""}, {"name": "Lit Sheet Music", "url": "https://rodydavis.com/posts/lit-sheet-music", "description": ""}, {"name": "Navigation Lifecycle using Vaadin Router, LitElement and TypeScript", "url": "https://labs.thisdot.co/blog/navigation-lifecycle-using-vaadin-router-litelement-and-typescript", "description": ""}, {"name": "Recreating The Arduino Pushbutton Using SVG And \\<lit-element>", "url": "https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/", "description": ""}, {"name": "Routing Management with LitElement and TypeScript", "url": "https://labs.thisdot.co/blog/routing-management-with-litelement", "description": ""}, {"name": "Some things to know about Lit", "url": "https://dev.to/open-wc/some-things-to-know-about-litelement-282c", "description": ""}, {"name": "Lit Native", "url": "https://github.com/rodydavis/lit-native", "description": "Reuse Lit web components on native platforms.", "stars": "41"}, {"name": "Lit Node Editor", "url": "https://github.com/rodydavis/lit-node-editor", "description": "Node editor built with canvas API and simple graph data structure.", "stars": "24"}, {"name": "Lit 3D Piano", "url": "https://github.com/rodydavis/lit-3d-piano", "description": "3D Piano built with Lit, Three.js and Tone.js.", "stars": "21"}, {"name": "Open Web Components Examples", "url": "https://open-wc.org/guides/developing-components/code-examples/#lit-html-and-lit-element", "description": "Code examples of common patterns using Lit."}, {"name": "Polymer \u2192 Lit Migration Guide", "url": "https://kevinpschaaf.github.io/lit-migration-guide", "description": "Code examples showing migration guidance from Polymer to Lit."}, {"name": "Vite + RxDB + Lit", "url": "https://github.com/rodydavis/vite-rxdb-lit", "description": "Minimal example to get RxDB running with Vite.", "stars": "6"}, {"name": "`@lit/localize`", "url": "https://www.npmjs.com/package/@lit/localize", "description": "Library and command-line tool for localizing web applications built using Lit."}, {"name": "`@lit-labs/ssr`", "url": "https://www.npmjs.com/package/@lit-labs/ssr", "description": "Package for server-side rendering Lit templates and components."}, {"name": "`@lit-labs/motion`", "url": "https://www.npmjs.com/package/@lit-labs/motion", "description": "Lit directives for making things move."}, {"name": "`@lit-labs/react`", "url": "https://www.npmjs.com/package/@lit-labs/react", "description": "React integration for Web Components and reactive Lit controllers."}, {"name": "`@lit-labs/scoped-registry-mixin`", "url": "https://www.npmjs.com/package/@lit-labs/scoped-registry-mixin", "description": "Mixin for LitElement that integrates with the speculative Scoped CustomElementRegistry polyfill to evaluate the proposal and facilitate feedback."}, {"name": "`@lit-labs/task`", "url": "https://www.npmjs.com/package/@lit-labs/task", "description": "Controller for Lit that renders asynchronous tasks."}, {"name": "`@lit-labs/virtualizer`", "url": "https://www.npmjs.com/package/@lit-labs/virtualizer", "description": "Package that provides virtual scrolling for Lit."}, {"name": "`@adobe/lit-mobx`", "url": "https://www.npmjs.com/package/@adobe/lit-mobx", "description": "Mixin and base class for using mobx with Lit."}, {"name": "`@apollo-elements/lit-apollo`", "url": "https://www.npmjs.com/package/@apollo-elements/lit-apollo", "description": "LitElement integrations with Apollo GraphQL."}, {"name": "`@lit-app/state`", "url": "https://www.npmjs.com/package/@lit-app/state", "description": "Lean and simple global State management for Lit 2."}, {"name": "`@shoelace-style/localize`", "url": "https://github.com/shoelace-style/localize", "description": "A micro library for localizing custom elements, providing directives for Lit."}, {"name": "`@stefanholzapfel/lit-state`", "url": "https://www.npmjs.com/package/@stefanholzapfel/lit-state", "description": "Lightweight reactive state management for Lit 2."}, {"name": "`@tanstack/lit-table`", "url": "https://tanstack.com/table/latest/docs/framework/lit/lit-table", "description": "Headless UI for building powerful tables & datagrids with Lit."}, {"name": "`@vaadin/form`", "url": "https://www.npmjs.com/package/@vaadin/form", "description": "Set of utilities for building forms with TypeScript and Lit."}, {"name": "`dark-theme-utils`", "url": "https://www.npmjs.com/package/dark-theme-utils", "description": "Useful utilities for dark mode built with Web Components."}, {"name": "`exome`", "url": "https://www.npmjs.com/package/exome", "description": "State manager for deeply nested states that supports Lit."}, {"name": "`pure-lit`", "url": "https://github.com/MatthiasKainer/pure-lit", "description": "Register your Lit elements as pure functions."}, {"name": "`lit-composition`", "url": "https://www.npmjs.com/package/lit-composition", "description": "Composition API for creating web components with Lit."}, {"name": "`lit-element-effect`", "url": "https://www.npmjs.com/package/lit-element-effect", "description": "Effect hooks for LitElement."}, {"name": "`lit-element-state-decoupler`", "url": "https://www.npmjs.com/package/lit-element-state-decoupler", "description": "Utility for state handling outside of the component for LitElement."}, {"name": "`lit-redux-router`", "url": "https://www.npmjs.com/package/lit-redux-router", "description": "Declarative way of routing for Lit powered by pwa-helpers and Redux."}, {"name": "`lit-svelte-stores`", "url": "https://www.npmjs.com/package/lit-svelte-stores", "description": "Lit controller to use svelte stores as state management."}, {"name": "`ullr`", "url": "https://github.com/aggre/ullr", "description": "Build Web Components with functional programming using Lit."}, {"name": "AXA Pattern Library", "url": "https://github.com/axa-ch-webhub-cloud/pattern-library", "description": "AXA CH UI components library built with LitElement.", "stars": "130"}, {"name": "Brightspace UI core", "url": "https://github.com/BrightspaceUI/core", "description": "Collection of web components for building Brightspace applications.", "stars": "77"}, {"name": "Calcite Design System", "url": "https://developers.arcgis.com/calcite-design-system/", "description": "UI kit, icons, color schemes, and a web component library by ArcGIS."}, {"name": "Carbon Web Components", "url": "https://github.com/carbon-design-system/carbon-web-components", "description": "Carbon Design System variant on top of Web Components.", "stars": "474"}, {"name": "Clarity Core Web Components", "url": "https://github.com/vmware-clarity/core/tree/main/projects/core", "description": "Suite of web components for Clarity Design System.", "stars": "185"}, {"name": "Kor", "url": "https://github.com/eduferfer/kor", "description": "An open source Design System and lightweight UI Component Library.", "stars": "287"}, {"name": "Lion", "url": "https://github.com/ing-bank/lion", "description": "Highly performant, accessible and flexible Web Components.", "stars": "1.9k"}, {"name": "Material Web Components", "url": "https://github.com/material-components/material-web", "description": "Material Design implemented as Web Components.", "stars": "11k"}, {"name": "Momentum UI Web Components", "url": "https://github.com/momentum-design/momentum-ui/tree/master/web-components", "description": "Set of UI components based on Momentum Design.", "stars": "212"}, {"name": "Outline Design System", "url": "https://github.com/phase2/outline", "description": "Web component based design system starter kit.", "stars": "131"}, {"name": "Pharos Design System", "url": "https://github.com/ithaka/pharos", "description": "JSTOR's design system to create cohesive, supportive, and beautiful experiences.", "stars": "129"}, {"name": "Red Hat Design System", "url": "https://github.com/RedHat-UX/red-hat-design-system", "description": "Web components for building uniform experiences with the Red Hat brand.", "stars": "135"}, {"name": "Spectrum Web Components", "url": "https://github.com/adobe/spectrum-web-components", "description": "Adobe Spectrum design language implementation built with LitElement.", "stars": "1.5k"}, {"name": "UI5 Web Components", "url": "https://github.com/SAP/ui5-webcomponents", "description": "Enterprise-flavored sugar on top of native APIs!", "stars": "1.7k"}, {"name": "Vaadin web components", "url": "https://github.com/vaadin/web-components", "description": "A set of high-quality web components for business web applications.", "stars": "554"}, {"name": "Web Awesome", "url": "https://github.com/shoelace-style/webawesome", "description": "The open source library of web components from Font Awesome", "stars": "874"}, {"name": "AgnosticUI", "url": "https://github.com/AgnosticUI/agnosticui", "description": "A CLI-based UI component library that copies Lit web components directly into your project. Full React and Vue wrappers for native framework experience.", "stars": "773"}, {"name": "Apollo Elements", "url": "https://github.com/apollo-elements/apollo-elements", "description": "Custom elements meet Apollo GraphQL.", "stars": "423"}, {"name": "Blackstone UI", "url": "https://github.com/kjantzer/bui", "description": "Web components for creating interfaces built with lit-html and LitElement.", "stars": "108"}, {"name": "Chartjs Web Components", "url": "https://github.com/fsx950223/chartjs-web-components", "description": "Web components for chartjs."}, {"name": "Clever components", "url": "https://github.com/CleverCloud/clever-components", "description": "Collection of Web Components made by Clever Cloud.", "stars": "238"}, {"name": "Curvenote", "url": "https://github.com/curvenote/article", "description": "Web components for creating interactive scientific articles.", "stars": "193"}, {"name": "Dile Components", "url": "https://github.com/Polydile/dile-components", "description": "General use Web Components for websites and applications.", "stars": "98"}, {"name": "ESP Web Tools", "url": "https://github.com/esphome/esp-web-tools", "description": "Allow flashing ESPHome or other ESP-based firmwares via the browser.", "stars": "621"}, {"name": "Furo Webcomponents", "url": "https://github.com/eclipse/eclipsefuro-web", "description": "Enterprise ready set of web components which work best with Eclipse Furo.", "stars": "12"}, {"name": "Fusion Web Components", "url": "https://github.com/equinor/fusion-web-components", "description": "Ser of web components used by Equinor Fusion.", "stars": "13"}, {"name": "Ignite UI Web Components", "url": "https://github.com/IgniteUI/igniteui-webcomponents", "description": "Complete library of UI components from Infragistics.", "stars": "168"}, {"name": "LRNWebComponents", "url": "https://github.com/elmsln/lrnwebcomponents", "description": "ELMS:LN produced web components for any project.", "stars": "269"}, {"name": "M3E", "url": "https://github.com/matraic/m3e", "description": "Web Components implementing Material 3 Expressive.", "stars": "57"}, {"name": "Medblocks UI", "url": "https://github.com/medblocks/medblocks-ui", "description": "Web Components for rapid development of openEHR and FHIR systems.", "stars": "68"}, {"name": "Microsoft Graph Toolkit", "url": "https://github.com/microsoftgraph/microsoft-graph-toolkit", "description": "Collection of web components for the Microsoft Graph.", "stars": "1k"}, {"name": "Mutation testing elements", "url": "https://github.com/stryker-mutator/mutation-testing-elements", "description": "A schema for mutation testing results with the web components to visualize it.", "stars": "27"}, {"name": "One Platform Components", "url": "https://github.com/1-Platform/op-components", "description": "Set of web components for Red Hat One Platform.", "stars": "31"}, {"name": "Playground Elements", "url": "https://github.com/PolymerLabs/playground-elements", "description": "Serverless code experiences with web components.", "stars": "640"}, {"name": "Stripe Elements", "url": "https://github.com/bennypowers/stripe-elements", "description": "Custom Element Wrapper for Stripe.js v3 Elements.", "stars": "84"}, {"name": "Titanium Elements", "url": "https://github.com/LeavittSoftware/titanium-elements", "description": "Collection of lightweight web components used by Leavitt Group Enterprises.", "stars": "19"}, {"name": "TrendChart Elements", "url": "https://github.com/WebLogin/trendchart-elements", "description": "Components to generate simple charts representing trends.", "stars": "62"}, {"name": "Umbraco UI Components", "url": "https://github.com/umbraco/Umbraco.UI", "description": "Collection of user interface web components for Umbraco CMS.", "stars": "144"}, {"name": "Vidstack Elements", "url": "https://github.com/vidstack/vds-elements", "description": "Spec-compliant customizable, extensible, accessible and universal media elements.", "stars": "3.4k"}, {"name": "VSCode Webview Elements", "url": "https://github.com/bendera/vscode-webview-elements", "description": "Components for creating VSCode extensions which use the Webview API.", "stars": "0"}, {"name": "Web Components for TEI Publisher", "url": "https://github.com/eeditiones/tei-publisher-components", "description": "Web components used by TEI Publisher and apps generated by it.", "stars": "18"}, {"name": "Webmarkets web components", "url": "https://github.com/Webmarkets/wm-web-components", "description": "Set of Webmarkets' public web components.", "stars": "1"}, {"name": "Wired Elements", "url": "https://github.com/rough-stuff/wired-elements", "description": "Collection of elements that appear hand drawn.", "stars": "11k"}, {"name": "Wokwi Elements", "url": "https://github.com/wokwi/wokwi-elements", "description": "Web Components for Arduino and various electronic parts.", "stars": "224"}, {"name": "`<api-viewer>`", "url": "https://github.com/web-padawan/api-viewer-element", "description": "API documentation and live playground for Web Components."}, {"name": "`<app-datepicker>`", "url": "https://github.com/motss/app-datepicker", "description": "Datepicker element built with LitElement and Material Design 2."}, {"name": "`<burgton-button>`", "url": "https://github.com/boguz/burgton-button", "description": "Simple to use, customizable and accessible burger-button element."}, {"name": "`<code-block>`", "url": "https://github.com/justinribeiro/code-block", "description": "Web component that displays colorfully formatted code with Prism.js and LitElement."}, {"name": "`<codesandbox-button>`", "url": "https://github.com/bennypowers/codesandbox-button", "description": "Custom Element that shows a CodeSandbox demo when you click on it."}, {"name": "`<editor-container>`", "url": "https://github.com/toeverything/blocksuite", "description": "Block based editor, designed for general-purpose collaborative applications."}, {"name": "`<granite-qrcode-generator>`", "url": "https://github.com/LostInBrittany/granite-qrcode-generator", "description": "Custom element to generate and render QR Codes, using qr.js library."}, {"name": "`<helium-animated-pages>`", "url": "https://github.com/alangdm/helium-animated-pages", "description": "Web component for creating CSS animations built with Lit."}, {"name": "`<json-viewer>`", "url": "https://github.com/alenaksu/json-viewer", "description": "Web Component to visualize JSON data in a tree view."}, {"name": "`<light-gallery>`", "url": "https://github.com/sachinchoolur/lightGallery/tree/master/lightgallery-lit", "description": "Full featured JavaScript image and video gallery for Lit."}, {"name": "`<lit-datatable>`", "url": "https://github.com/DoubleTrade/lit-datatable", "description": "Material Design implementation of a data table, powered by LitElement."}, {"name": "`<lit-image-cropper>`", "url": "https://github.com/andy-austin/lit-image-cropper", "description": "Fast and lightweight image cropper component."}, {"name": "`<lottie-player>`", "url": "https://github.com/LottieFiles/lottie-player", "description": "Web Component for easily embedding and playing Lottie animations."}, {"name": "`<model-viewer>`", "url": "https://github.com/GoogleWebComponents/model-viewer", "description": "A web component for rendering interactive 3D models."}, {"name": "`<rapi-doc>`", "url": "https://github.com/mrin9/RapiDoc", "description": "Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec."}, {"name": "`<responsive-image>`", "url": "https://github.com/simonihmig/responsive-image", "description": "Web component for rendering responsive images."}, {"name": "`<round-slider>`", "url": "https://github.com/thomasloven/round-slider", "description": "Simple round slider web component built with Lit."}, {"name": "`<stl-part-viewer>`", "url": "https://github.com/justinribeiro/stl-part-viewer", "description": "LitElement web component that utilizes Three.js to display an STL model file."}, {"name": "Gracile", "url": "https://gracile.js.org/", "description": "Thin, full-stack meta-framework. Powered by Vite and Lit SSR."}]}, {"name": "Building", "parent": "Tools", "entries": [{"name": "babel-plugin-lit-property-types-from-ts", "url": "https://www.npmjs.com/package/babel-plugin-lit-property-types-from-ts", "description": "Babel plugin for setting `type` for reactive properties declared in Lit components based on TypeScript type annotations."}, {"name": "babel-plugin-template-html-minifier", "url": "https://www.npmjs.com/package/babel-plugin-template-html-minifier", "description": "Babel plugin for minifying HTML in tagged template strings."}, {"name": "esbuild-plugin-lit", "url": "https://www.npmjs.com/package/esbuild-plugin-lit", "description": "ESBuild plugin to import CSS, SVG, HTML, XLIFF files as JavaScript tagged-template literal objects."}, {"name": "esbuild-plugin-lit-css", "url": "https://www.npmjs.com/package/esbuild-plugin-lit-css", "description": "ESBuild plugin to import css files as JavaScript tagged-template literal objects."}, {"name": "lit-css-loader", "url": "https://www.npmjs.com/package/lit-css-loader", "description": "Webpack loader to import css files as JavaScript tagged-template literal objects."}, {"name": "lit-scss-loader", "url": "https://www.npmjs.com/package/lit-scss-loader", "description": "Webpack loader to import the CSS/SCSS into Lit components."}, {"name": "rollup-plugin-lit-css", "url": "https://www.npmjs.com/package/rollup-plugin-lit-css", "description": "Rollup plugin to import css files as JavaScript tagged-template literal objects."}, {"name": "rollup-plugin-minify-html-literals", "url": "https://www.npmjs.com/package/rollup-plugin-minify-html-literals", "description": "Rollup plugin to minify HTML in tagged template strings."}, {"name": "rollup-plugin-postcss-lit", "url": "https://www.npmjs.com/package/rollup-plugin-postcss-lit", "description": "Rollup plugin to load PostCSS-processed stylesheets in Lit components."}]}, {"name": "Linting", "parent": "Tools", "entries": [{"name": "eslint-plugin-lit", "url": "https://www.npmjs.com/package/eslint-plugin-lit", "description": "ESLint plugin for Lit template strings."}, {"name": "eslint-plugin-lit-a11y", "url": "https://www.npmjs.com/package/eslint-plugin-lit-a11y", "description": "Accessibility linting plugin for Lit templates."}, {"name": "lit-analyzer", "url": "https://www.npmjs.com/package/lit-analyzer", "description": "CLI that type checks bindings in Lit templates."}]}, {"name": "IDE Plugins", "parent": "Tools", "entries": [{"name": "vscode-lit-html", "url": "https://marketplace.visualstudio.com/items?itemName=bierner.lit-html", "description": "Syntax highlighting and IntelliSense for lit-html template strings."}, {"name": "vscode-lit-plugin", "url": "https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin", "description": "Syntax highlighting, type checking and code completion for lit-html."}, {"name": "es6-string-html", "url": "https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html", "description": "VSCode extension which provides syntax highlighting for HTML in ES6 multiline strings."}, {"name": "vim-html-template-literals", "url": "https://github.com/jonsmithers/vim-html-template-literals", "description": "Syntax highlighting and indentation for HTML inside of tagged template literals.", "stars": "77"}, {"name": "@web-types/lit", "url": "https://www.npmjs.com/package/@web-types/lit", "description": "Attribute completion for HTML inside of tagged template literals."}]}, {"name": "TypeScript Plugins", "parent": "Tools", "entries": [{"name": "ts-lit-plugin", "url": "https://www.npmjs.com/package/ts-lit-plugin", "description": "Plugin that adds type checking and code completion for Lit templates."}, {"name": "typescript-lit-html-plugin", "url": "https://www.npmjs.com/package/typescript-lit-html-plugin", "description": "TypeScript server plugin that adds IntelliSense for Lit templates."}]}, {"name": "Other Tools", "parent": "Tools", "entries": [{"name": "@custom-elements-manifest/analyzer", "url": "https://www.npmjs.com/package/@custom-elements-manifest/analyzer", "description": "CLI tool to generate API documentation for web components."}, {"name": "Storybook for web-components", "url": "https://www.npmjs.com/package/@storybook/web-components", "description": "UI development environment for plain web-component snippets."}, {"name": "web-components-codemods", "url": "https://www.npmjs.com/package/web-components-codemods", "description": "Codemods for Web Components compatible with lit-html template literals."}, {"name": "Web Component DevTools", "url": "https://github.com/Matsuuu/web-component-devtools", "description": "Browser extension for developers working with Web Components.", "stars": "150"}, {"name": "Web Component Factory", "url": "https://www.npmjs.com/package/@wcfactory/cli", "description": "CLI tool for generating, building, testing and publishing web components."}, {"name": "cdn.esm.sh", "url": "https://cdn.esm.sh/lit", "description": ""}, {"name": "jsDelivr CDN", "url": "https://cdn.jsdelivr.net/npm/lit/+esm", "description": ""}, {"name": "JSPM CDN", "url": "https://jspm.dev/lit", "description": ""}, {"name": "Skypack CDN", "url": "https://cdn.skypack.dev/lit", "description": ""}, {"name": "unpkg.com", "url": "https://unpkg.com/lit?module", "description": ""}, {"name": "Bridgetown Lit Renderer", "url": "https://github.com/bridgetownrb/bridgetown-lit-renderer", "description": "SSR + hydration of Lit components for Bridgetown.", "stars": "14"}, {"name": "Fable.Lit", "url": "https://github.com/fable-compiler/Fable.Lit", "description": "Collection of tools to embed HTML code into F# code with the power of Lit.", "stars": "93"}, {"name": "Ruby2JS", "url": "https://github.com/ruby2js/ruby2js", "description": "Minimal yet extensible Ruby to JavaScript conversion.", "stars": "478"}, {"name": "Lit 3.0 Launch Event", "url": "https://www.youtube.com/watch?v=ri9FEl_hRTc", "description": ""}, {"name": "Efficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)", "url": "https://www.youtube.com/watch?v=ruql541T7gc", "description": ""}, {"name": "lit-HTML (Chrome Dev Summit 2017)", "url": "https://www.youtube.com/watch?v=Io6JjgckHbg", "description": ""}, {"name": "Lit Beta Launch Event (2021)", "url": "https://www.youtube.com/watch?v=f1j7b696L-E", "description": ""}, {"name": "Lit 2.0 Release Livestream", "url": "https://www.youtube.com/watch?v=nfb779XIhsU", "description": ""}, {"name": "VDOM vs lit-html - HTTP203", "url": "https://www.youtube.com/watch?v=uCHZJy2n8Qs", "description": ""}, {"name": "Declarative Reactive Web Components with Justin Fagnani", "url": "https://www.youtube.com/watch?v=9FB0GSOAESo", "description": ""}, {"name": "Building a Complex Application with Web Components and LitElement", "url": "https://www.youtube.com/watch?v=x9YDQUJx2uw", "description": ""}, {"name": "The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals", "url": "https://thewebplatformpodcast.com/159-lithtml-html-templates-via-javascript-template-literals", "description": ""}, {"name": "ShopTalk Show 348: Getting lit-html with Justin Fagnani", "url": "https://shoptalkshow.com/episodes/348/", "description": "Another episode with Justin Fagnani as a guest."}, {"name": "Render HTML with Vanilla JavaScript and lit-html", "url": "https://dev.to/azure/too-hard-too-soft-just-right-rendering-html-with-lit-html-1km8", "description": ""}, {"name": "A gentle introduction to lit-html", "url": "https://dev.to/julcasans/a-gentle-introduction-to-lit-html-3d74", "description": ""}, {"name": "lit-html templates from zero to hero", "url": "https://dev.to/julcasans/lit-html-templates-from-zero-to-hero-2afm", "description": ""}, {"name": "Updating blog-pwa from Polymer to LitElement, Workbox, and Rollup", "url": "https://justinribeiro.com/chronicle/2019/04/11/updating-blog-pwa-from-polymer-to-litelement-workbox-and-rollup/", "description": ""}, {"name": "Let's Build Web Components! Part 5: LitElement", "url": "https://dev.to/bennypowers/lets-build-web-components-part-5-litelement-906", "description": ""}, {"name": "LitElement To Do App", "url": "https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4", "description": ""}, {"name": "LitElement with Rollup, Babel & Karma", "url": "https://43081j.com/2018/09/polymer-lit-with-rollup", "description": ""}, {"name": "A new, lean way of creating web apps", "url": "https://medium.com/@kennethrohde/a-new-lean-way-of-creating-web-apps-88a49c5b87ec", "description": ""}, {"name": "The future of Polymer & lit-html", "url": "https://43081j.com/2018/08/future-of-polymer", "description": ""}, {"name": "A night experimenting with Lit-HTML", "url": "https://lucamezzalira.com/2018/08/14/a-night-experimenting-with-lit-html/", "description": ""}, {"name": "Making a fullstack CRUD app with LitHTML, Redux, Express, and Webpack", "url": "https://medium.com/@pascalschilp/making-a-fullstack-crud-app-with-lithtml-redux-express-and-webpack-fe7e5cf8b3ef", "description": ""}, {"name": "Building a chat with Twilio, lit-html, Parcel and TypeScript", "url": "https://dev.to/dkundel/building-a-chat-with-twilio-lit-html-parcel-and-typescript-1jo1", "description": ""}, {"name": "haunted", "url": "https://www.npmjs.com/package/haunted", "description": "React's Hooks API but for standard web components and hyperHTML or lit-html."}, {"name": "htm", "url": "https://github.com/developit/htm", "description": "Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.", "stars": "9k"}, {"name": "hybrids", "url": "https://github.com/hybridsjs/hybrids", "description": "UI library for creating Web Components with simple and functional API.", "stars": "3.2k"}, {"name": "lit-ntml", "url": "https://github.com/motss/lit-ntml", "description": "Lightweight and modern templating for SSR in Node.js, inspired by lit-html.", "stars": "83"}]}], "name": ""} |