320 lines
37 KiB
Plaintext
320 lines
37 KiB
Plaintext
[38;5;12m [39m[38;2;255;187;0m[1m[4mAwesome Lit [0m[38;5;14m[1m[4m![0m[38;2;255;187;0m[1m[4mAwesome[0m[38;5;14m[1m[4m (https://awesome.re/badge.svg)[0m[38;2;255;187;0m[1m[4m (https://awesome.re)[0m
|
||
|
||
[38;5;11m[1m▐[0m[38;5;12m [39m[38;5;12mA curated list of awesome Lit resources.[39m
|
||
|
||
[38;5;14m[1mLit[0m[38;5;12m (https://github.com/lit/lit) — a simple library for building fast, lightweight web components.[39m
|
||
|
||
[38;5;12mAt 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.[39m
|
||
|
||
[38;2;255;187;0m[4mContents[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mGeneral resources[0m[38;5;12m (#general-resources)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mCommunity[0m[38;5;12m (#community)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mOverview[0m[38;5;12m (#overview)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mStarter Templates[0m[38;5;12m (#starter-templates)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mCodelabs[0m[38;5;12m (#codelabs)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mTutorials[0m[38;5;12m (#tutorials)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mExamples[0m[38;5;12m (#examples)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit Labs[0m[38;5;12m (#lit-labs)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mExtensions[0m[38;5;12m (#extensions)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mDesign Systems[0m[38;5;12m (#design-systems)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mComponent Libraries[0m[38;5;12m (#component-libraries)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mStandalone Components[0m[38;5;12m (#standalone-components)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mTools[0m[38;5;12m (#tools)[39m
|
||
[38;5;12m - [39m[38;5;14m[1mBuilding[0m[38;5;12m (#building)[39m
|
||
[38;5;12m - [39m[38;5;14m[1mLinting[0m[38;5;12m (#linting)[39m
|
||
[38;5;12m - [39m[38;5;14m[1mIDE Plugins[0m[38;5;12m (#ide-plugins)[39m
|
||
[38;5;12m - [39m[38;5;14m[1mTypeScript Plugins[0m[38;5;12m (#typescript-plugins)[39m
|
||
[38;5;12m - [39m[38;5;14m[1mOther Tools[0m[38;5;12m (#other-tools)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mCDN[0m[38;5;12m (#cdn)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mIntegrations[0m[38;5;12m (#integrations)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mVideos[0m[38;5;12m (#videos)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mPodcasts[0m[38;5;12m (#podcasts)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mArchive[0m[38;5;12m (#archive)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mSimilar libraries[0m[38;5;12m (#similar-libraries)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mOther awesome resources[0m[38;5;12m (#other-awesome-resources)[39m
|
||
|
||
[38;2;255;187;0m[4mGeneral resources[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mDocumentation[0m[38;5;12m (https://lit.dev/docs/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mTutorials[0m[38;5;12m (https://lit.dev/tutorials/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mPlayground[0m[38;5;12m (https://lit.dev/playground/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mBlog[0m[38;5;12m (https://lit.dev/blog/)[39m
|
||
|
||
[38;2;255;187;0m[4mCommunity[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mDiscord[0m[38;5;12m (https://discord.com/invite/buildWithLit)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mGitHub[0m[38;5;12m (https://github.com/lit/lit)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mGitHub Discussions[0m[38;5;12m (https://github.com/lit/lit/discussions)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mTwitter[0m[38;5;12m (https://twitter.com/buildWithLit)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mStack Overflow[0m[38;5;12m (https://stackoverflow.com/questions/tagged/lit+or+lit-html+or+lit-element)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mYouTube[0m[38;5;12m (https://www.youtube.com/channel/UCok4ZKSzM3jY7JQRMlF-DPg/)[39m
|
||
|
||
[38;2;255;187;0m[4mOverview[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mLightning-fast templates & Web Components: lit-html & LitElement[0m[38;5;12m (https://developers.google.com/web/updates/2019/02/lit-element-and-lit-html)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit 2.0: Meet Lit, all over again![0m[38;5;12m (https://lit.dev/blog/2021-04-21-lit-2.0-meet-lit-all-over-again/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mAnnouncing Lit 2 stable release[0m[38;5;12m (https://lit.dev/blog/2021-09-21-announcing-lit-2/)[39m
|
||
|
||
[38;2;255;187;0m[4mStarter Templates[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mLitElement JavaScript starter[0m[38;5;12m (https://github.com/lit/lit-element-starter-js) - Sample component using LitElement with JavaScript.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLitElement TypeScript starter[0m[38;5;12m (https://github.com/lit/lit-element-starter-ts) - Sample component using LitElement with TypeScript.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mhello-web-components[0m[38;5;12m (https://github.com/fernandopasik/hello-web-components) - Simple starter web component written in TypeScript using Lit.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit Sass JavaScript Starter[0m[38;5;12m (https://github.com/e111077/lit-sass-js-starter) - Project that has a simple setup for SASS + JS + Lit, using Rollup.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit Sass TypeScript Starter[0m[38;5;12m (https://github.com/e111077/lit-sass-ts-starter) - Project that has a simple setup for SASS + TS + Lit, using Rollup.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit Webpack Starter[0m[38;5;12m (https://github.com/andrewlevada/webpack-lit-template) - Starter for multipage apps with Lit and Typescript, using Webpack.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mOpen Web Components Generator[0m[38;5;12m (https://open-wc.org/docs/development/generator/) - Starter app based on Open Web Components Recommendations.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mpwa-starter[0m[38;5;12m (https://github.com/pwa-builder/pwa-starter) - LitElement edition of the PWABuilder pwa-starter.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mpwa-lit-template[0m[38;5;12m (https://github.com/IBM/pwa-lit-template) - Build Progressive Web Applications following the modern web standards.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mVite Lit Element TS SASS[0m[38;5;12m (https://github.com/e111077/vite-lit-element-ts-sass) - Example Vite project using Lit 2, Typescript, and SASS.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mVite Lit Starter[0m[38;5;12m (https://github.com/vitejs/vite/tree/main/packages/create-vite/template-lit) - Lit based template preset for Vite.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mVite Lit TS Starter[0m[38;5;12m (https://github.com/vitejs/vite/tree/main/packages/create-vite/template-lit-ts) - Lit and TypeScript based template preset for Vite.[39m
|
||
|
||
[38;2;255;187;0m[4mCodelabs[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mBuild a Brick Viewer with lit-element[0m[38;5;12m (https://codelabs.developers.google.com/codelabs/lit-brick-viewer#0)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mBuild a Story Component with lit-element[0m[38;5;12m (https://codelabs.developers.google.com/codelabs/lit-story-viewer#0)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mFrom Web Component to Lit Element[0m[38;5;12m (https://codelabs.developers.google.com/codelabs/the-lit-path#0)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-html & lit-element: basics[0m[38;5;12m (https://open-wc.org/codelabs/basics/lit-html.html#0)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-html & lit-element: intermediate[0m[38;5;12m (https://open-wc.org/codelabs/intermediate/lit-html.html#0)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit for React Developers[0m[38;5;12m (https://codelabs.developers.google.com/codelabs/lit-2-for-react-devs#0)[39m
|
||
|
||
[38;2;255;187;0m[4mTutorials[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mBuilding A Retro Draggable Web Component Using Lit[0m[38;5;12m (https://www.smashingmagazine.com/2022/09/building-retro-draggable-web-component-using-lit/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mBuilding a Rich Text Editor with Lit[0m[38;5;12m (https://rodydavis.com/posts/lit-rich-text-editor/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mDraggable DOM with Lit[0m[38;5;12m (https://rodydavis.com/posts/lit-draggable-dom/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mGetting started with LitElement and TypeScript[0m[38;5;12m (https://labs.thisdot.co/blog/getting-started-with-litelement-and-typescript)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mHere's a minimalist no-frills Redux Toolkit & LitElement example[0m[38;5;12m (https://dev.to/jdvivar/here-s-a-minimalist-no-frills-redux-toolkit-litelement-example-1j91)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mJSON to HTML Table with Lit[0m[38;5;12m (https://rodydavis.com/posts/lit-html-table/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-html Part 1 - A solution for DOM management in web components[0m[38;5;12m (https://terodox.tech/handling-web-component-markup-with-lit-html/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-html Part 2 - Working with attributes and properties[0m[38;5;12m (https://terodox.tech/lit-html-part-2/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit and Figma[0m[38;5;12m (https://rodydavis.com/posts/figma-and-lit/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit and Flutter[0m[38;5;12m (https://rodydavis.com/posts/flutter-and-lit/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit and Monaco Editor[0m[38;5;12m (https://rodydavis.com/posts/lit-monaco-editor/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit and VSCode Extensions[0m[38;5;12m (https://rodydavis.com/posts/lit-vscode-extension/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit Sheet Music[0m[38;5;12m (https://rodydavis.com/posts/lit-sheet-music/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mNavigation Lifecycle using Vaadin Router, LitElement and TypeScript[0m[38;5;12m (https://labs.thisdot.co/blog/navigation-lifecycle-using-vaadin-router-litelement-and-typescript)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mRecreating The Arduino Pushbutton Using SVG And <lit-element>[0m[38;5;12m (https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mRouting Management with LitElement and TypeScript[0m[38;5;12m (https://labs.thisdot.co/blog/routing-management-with-litelement)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mSome things to know about Lit[0m[38;5;12m (https://dev.to/open-wc/some-things-to-know-about-litelement-282c)[39m
|
||
|
||
[38;2;255;187;0m[4mExamples[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mLit Native[0m[38;5;12m (https://github.com/rodydavis/lit-native) - Reuse Lit web components on native platforms.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit Node Editor[0m[38;5;12m (https://github.com/rodydavis/lit-node-editor) - Node editor built with canvas API and simple graph data structure.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit 3D Piano[0m[38;5;12m (https://github.com/rodydavis/lit-3d-piano/) - 3D Piano built with Lit, Three.js and Tone.js.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mOpen Web Components Examples[0m[38;5;12m (https://open-wc.org/guides/developing-components/code-examples/#lit-html-and-lit-element) - Code examples of common patterns using Lit.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mPolymer → Lit Migration Guide[0m[38;5;12m (https://kevinpschaaf.github.io/lit-migration-guide) - Code examples showing migration guidance from Polymer to Lit.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mVite + RxDB + Lit[0m[38;5;12m (https://github.com/rodydavis/vite-rxdb-lit) - Minimal example to get RxDB running with Vite.[39m
|
||
|
||
[38;2;255;187;0m[4mLit Labs[0m
|
||
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@lit/localize[0m[38;5;12m (https://www.npmjs.com/package/@lit/localize) - Library and command-line tool for localizing web applications built using Lit.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@lit-labs/ssr[0m[38;5;12m (https://www.npmjs.com/package/@lit-labs/ssr) - Package for server-side rendering Lit templates and components.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@lit-labs/motion[0m[38;5;12m (https://www.npmjs.com/package/@lit-labs/motion) - Lit directives for making things move.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@lit-labs/react[0m[38;5;12m (https://www.npmjs.com/package/@lit-labs/react) - React integration for Web Components and reactive Lit controllers.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@lit-labs/scoped-registry-mixin[0m[38;5;12m (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.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@lit-labs/task[0m[38;5;12m (https://www.npmjs.com/package/@lit-labs/task) - Controller for Lit that renders asynchronous tasks.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@lit-labs/virtualizer[0m[38;5;12m (https://www.npmjs.com/package/@lit-labs/virtualizer) - Package that provides virtual scrolling for Lit.[39m
|
||
|
||
[38;2;255;187;0m[4mExtensions[0m
|
||
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@adobe/lit-mobx[0m[38;5;12m (https://www.npmjs.com/package/@adobe/lit-mobx) - Mixin and base class for using mobx with Lit.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@apollo-elements/lit-apollo[0m[38;5;12m (https://www.npmjs.com/package/@apollo-elements/lit-apollo) - LitElement integrations with Apollo GraphQL.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@lit-app/state[0m[38;5;12m (https://www.npmjs.com/package/@lit-app/state) - Lean and simple global State management for Lit 2.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@shoelace-style/localize[0m[38;5;12m (https://github.com/shoelace-style/localize) - A micro library for localizing custom elements, providing directives for Lit.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@stefanholzapfel/lit-state[0m[38;5;12m (https://www.npmjs.com/package/@stefanholzapfel/lit-state) - Lightweight reactive state management for Lit 2.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1m@vaadin/form[0m[38;5;12m (https://www.npmjs.com/package/@vaadin/form) - Set of utilities for building forms with TypeScript and Lit.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1mdark-theme-utils[0m[38;5;12m (https://www.npmjs.com/package/dark-theme-utils) - Useful utilities for dark mode built with Web Components.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1mexome[0m[38;5;12m (https://www.npmjs.com/package/exome) - State manager for deeply nested states that supports Lit.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1mpure-lit[0m[38;5;12m (https://github.com/MatthiasKainer/pure-lit) - Register your Lit elements as pure functions.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1mlit-element-effect[0m[38;5;12m (https://www.npmjs.com/package/lit-element-effect) - Effect hooks for LitElement.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1mlit-element-state-decoupler[0m[38;5;12m (https://www.npmjs.com/package/lit-element-state-decoupler) - Utility for state handling outside of the component for LitElement.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1mlit-redux-router[0m[38;5;12m (https://www.npmjs.com/package/lit-redux-router) - Declarative way of routing for Lit powered by pwa-helpers and Redux.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1mlit-svelte-stores[0m[38;5;12m (https://www.npmjs.com/package/lit-svelte-stores) - Lit controller to use svelte stores as state management.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1mlit-vaadin-helpers[0m[38;5;12m (https://www.npmjs.com/package/lit-vaadin-helpers) - Helpers for using Vaadin web components with Lit 2.[39m
|
||
[38;5;12m- [39m[48;5;235m[38;5;249m[1mullr[0m[38;5;12m (https://github.com/aggre/ullr) - Build Web Components with functional programming using Lit.[39m
|
||
|
||
[38;2;255;187;0m[4mDesign Systems[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mAXA Pattern Library[0m[38;5;12m (https://github.com/axa-ch-webhub-cloud/pattern-library) - AXA CH UI components library built with LitElement.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mBrightspace UI core[0m[38;5;12m (https://github.com/BrightspaceUI/core) - Collection of web components for building Brightspace applications.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mCarbon Web Components[0m[38;5;12m (https://github.com/carbon-design-system/carbon-web-components) - Carbon Design System variant on top of Web Components.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mClarity Core Web Components[0m[38;5;12m (https://github.com/vmware-clarity/core/tree/main/projects/core) - Suite of web components for Clarity Design System.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mKor[0m[38;5;12m (https://github.com/eduferfer/kor) - An open source Design System and lightweight UI Component Library.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLion[0m[38;5;12m (https://github.com/ing-bank/lion) - Highly performant, accessible and flexible Web Components.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mMaterial Web Components[0m[38;5;12m (https://github.com/material-components/material-web) - Material Design implemented as Web Components.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mMomentum UI Web Components[0m[38;5;12m (https://github.com/momentum-design/momentum-ui/tree/master/web-components) - Set of UI components based on Momentum Design.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mOutline Design System[0m[38;5;12m (https://github.com/phase2/outline) - Web component based design system starter kit.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mPharos Design System[0m[38;5;12m (https://github.com/ithaka/pharos) - JSTOR's design system to create cohesive, supportive, and beautiful experiences.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mRed Hat Design System[0m[38;5;12m (https://github.com/RedHat-UX/red-hat-design-system) - Web components for building uniform experiences with the Red Hat brand.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mShoelace[0m[38;5;12m (https://github.com/shoelace-style/shoelace) - Collection of professionally designed UI components built on a framework-agnostic technology.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mSpectrum Web Components[0m[38;5;12m (https://github.com/adobe/spectrum-web-components) - Adobe Spectrum design language implementation built with LitElement.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mUI5 Web Components[0m[38;5;12m (https://github.com/SAP/ui5-webcomponents) - Enterprise-flavored sugar on top of native APIs![39m
|
||
|
||
[38;2;255;187;0m[4mComponent Libraries[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mApollo Elements[0m[38;5;12m (https://github.com/apollo-elements/apollo-elements) - Custom elements meet Apollo GraphQL.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mBlackstone UI[0m[38;5;12m (https://github.com/kjantzer/bui) - Web components for creating interfaces built with lit-html and LitElement.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mChartjs Web Components[0m[38;5;12m (https://github.com/fsx950223/chartjs-web-components) - Web components for chartjs.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mClever components[0m[38;5;12m (https://github.com/CleverCloud/clever-components) - Collection of Web Components made by Clever Cloud.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mCurvenote[0m[38;5;12m (https://github.com/curvenote/article) - Web components for creating interactive scientific articles.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mDile Components[0m[38;5;12m (https://github.com/Polydile/dile-components) - General use Web Components for websites and applications.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mESP Web Tools[0m[38;5;12m (https://github.com/esphome/esp-web-tools) - Allow flashing ESPHome or other ESP-based firmwares via the browser.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mFuro Webcomponents[0m[38;5;12m (https://github.com/eclipse/eclipsefuro-web) - Enterprise ready set of web components which work best with Eclipse Furo.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mFusion Web Components[0m[38;5;12m (https://github.com/equinor/fusion-web-components) - Ser of web components used by Equinor Fusion.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mIgnite UI Web Components[0m[38;5;12m (https://github.com/IgniteUI/igniteui-webcomponents) - Complete library of UI components from Infragistics.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLRNWebComponents[0m[38;5;12m (https://github.com/elmsln/lrnwebcomponents) - ELMS:LN produced web components for any project.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mMedblocks UI[0m[38;5;12m (https://github.com/medblocks/medblocks-ui) - Web Components for rapid development of openEHR and FHIR systems.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mMicrosoft Graph Toolkit[0m[38;5;12m (https://github.com/microsoftgraph/microsoft-graph-toolkit) - Collection of web components for the Microsoft Graph.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mMutation testing elements[0m[38;5;12m (https://github.com/stryker-mutator/mutation-testing-elements) - A schema for mutation testing results with the web components to visualize it.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mOne Platform Components[0m[38;5;12m (https://github.com/1-Platform/op-components) - Set of web components for Red Hat One Platform.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mPlayground Elements[0m[38;5;12m (https://github.com/PolymerLabs/playground-elements) - Serverless code experiences with web components.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mStripe Elements[0m[38;5;12m (https://github.com/bennypowers/stripe-elements) - Custom Element Wrapper for Stripe.js v3 Elements.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mTitanium Elements[0m[38;5;12m (https://github.com/LeavittSoftware/titanium-elements) - Collection of lightweight web components used by Leavitt Group Enterprises.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mTrendChart Elements[0m[38;5;12m (https://github.com/WebLogin/trendchart-elements) - Components to generate simple charts representing trends.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mUmbraco UI Components[0m[38;5;12m (https://github.com/umbraco/Umbraco.UI) - Collection of user interface web components for Umbraco CMS.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mVidstack Elements[0m[38;5;12m (https://github.com/vidstack/vds-elements) - Spec-compliant customizable, extensible, accessible and universal media elements.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mVSCode Webview Elements[0m[38;5;12m (https://github.com/bendera/vscode-webview-elements) - Components for creating VSCode extensions which use the Webview API.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mWeb Components for TEI Publisher[0m[38;5;12m (https://github.com/eeditiones/tei-publisher-components) - Web components used by TEI Publisher and apps generated by it.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mWebmarkets web components[0m[38;5;12m (https://github.com/Webmarkets/wm-web-components) - Set of Webmarkets' public web components.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mWired Elements[0m[38;5;12m (https://github.com/rough-stuff/wired-elements) - Collection of elements that appear hand drawn.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mWokwi Elements[0m[38;5;12m (https://github.com/wokwi/wokwi-elements) - Web Components for Arduino and various electronic parts.[39m
|
||
|
||
[38;2;255;187;0m[4mStandalone Components[0m
|
||
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/web-padawan/api-viewer-element) - API documentation and live playground for Web Components.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/motss/app-datepicker) - Datepicker element built with LitElement and Material Design 2.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/boguz/burgton-button) - Simple to use, customizable and accessible burger-button element.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/justinribeiro/code-block) - Web component that displays colorfully formatted code with Prism.js and LitElement.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/bennypowers/codesandbox-button) - Custom Element that shows a CodeSandbox demo when you click on it.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/toeverything/blocksuite) - Block based editor, designed for general-purpose collaborative applications.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/LostInBrittany/granite-qrcode-generator) - Custom element to generate and render QR Codes, using qr.js library.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/alangdm/helium-animated-pages) - Web component for creating CSS animations built with Lit.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/alenaksu/json-viewer) - Web Component to visualize JSON data in a tree view.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/sachinchoolur/lightGallery/tree/master/lightgallery-lit) - Full featured JavaScript image and video gallery for Lit.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/DoubleTrade/lit-datatable) - Material Design implementation of a data table, powered by LitElement.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/andy-austin/lit-image-cropper) - Fast and lightweight image cropper component.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/LottieFiles/lottie-player) - Web Component for easily embedding and playing Lottie animations.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/GoogleWebComponents/model-viewer) - A web component for rendering interactive 3D models.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/mrin9/RapiDoc) - Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/thomasloven/round-slider) - Simple round slider web component built with Lit.[39m
|
||
[38;5;12m- [39m[38;5;12m (https://github.com/justinribeiro/stl-part-viewer) - LitElement web component that utilizes Three.js to display an STL model file.[39m
|
||
|
||
[38;2;255;187;0m[4mTools[0m
|
||
|
||
[38;2;255;187;0m[4mBuilding[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mbabel-plugin-lit-property-types-from-ts[0m[38;5;12m (https://www.npmjs.com/package/babel-plugin-lit-property-types-from-ts) - Babel plugin for setting [39m[48;5;235m[38;5;249mtype[49m[39m[38;5;12m for reactive properties declared in Lit components based on TypeScript type annotations.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mbabel-plugin-template-html-minifier[0m[38;5;12m (https://www.npmjs.com/package/babel-plugin-template-html-minifier) - Babel plugin for minifying HTML in tagged template strings.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mesbuild-plugin-lit[0m[38;5;12m (https://www.npmjs.com/package/esbuild-plugin-lit) - ESBuild plugin to import CSS, SVG, HTML, XLIFF files as JavaScript tagged-template literal objects.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mesbuild-plugin-lit-css[0m[38;5;12m (https://www.npmjs.com/package/esbuild-plugin-lit-css) - ESBuild plugin to import css files as JavaScript tagged-template literal objects.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-css-loader[0m[38;5;12m (https://www.npmjs.com/package/lit-css-loader) - Webpack loader to import css files as JavaScript tagged-template literal objects.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-scss-loader[0m[38;5;12m (https://www.npmjs.com/package/lit-scss-loader) - Webpack loader to import the CSS/SCSS into Lit components.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mrollup-plugin-lit-css[0m[38;5;12m (https://www.npmjs.com/package/rollup-plugin-lit-css) - Rollup plugin to import css files as JavaScript tagged-template literal objects.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mrollup-plugin-minify-html-literals[0m[38;5;12m (https://www.npmjs.com/package/rollup-plugin-minify-html-literals) - Rollup plugin to minify HTML in tagged template strings.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mrollup-plugin-postcss-lit[0m[38;5;12m (https://www.npmjs.com/package/rollup-plugin-postcss-lit) - Rollup plugin to load PostCSS-processed stylesheets in Lit components.[39m
|
||
|
||
[38;2;255;187;0m[4mLinting[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1meslint-plugin-lit[0m[38;5;12m (https://www.npmjs.com/package/eslint-plugin-lit) - ESLint plugin for Lit template strings.[39m
|
||
[38;5;12m- [39m[38;5;14m[1meslint-plugin-lit-a11y[0m[38;5;12m (https://www.npmjs.com/package/eslint-plugin-lit-a11y) - Accessibility linting plugin for Lit templates.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-analyzer[0m[38;5;12m (https://www.npmjs.com/package/lit-analyzer) - CLI that type checks bindings in Lit templates.[39m
|
||
|
||
[38;2;255;187;0m[4mIDE Plugins[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mvscode-lit-html[0m[38;5;12m (https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) - Syntax highlighting and IntelliSense for lit-html template strings.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mvscode-lit-plugin[0m[38;5;12m (https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) - Syntax highlighting, type checking and code completion for lit-html.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mes6-string-html[0m[38;5;12m (https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) - VSCode extension which provides syntax highlighting for HTML in ES6 multiline strings.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mvim-html-template-literals[0m[38;5;12m (https://github.com/jonsmithers/vim-html-template-literals) - Syntax highlighting and indentation for HTML inside of tagged template literals.[39m
|
||
[38;5;12m- [39m[38;5;14m[1m@web-types/lit[0m[38;5;12m (https://www.npmjs.com/package/@web-types/lit) - Attribute completion for HTML inside of tagged template literals.[39m
|
||
|
||
[38;2;255;187;0m[4mTypeScript Plugins[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mts-lit-plugin[0m[38;5;12m (https://www.npmjs.com/package/ts-lit-plugin) - Plugin that adds type checking and code completion for Lit templates.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mtypescript-lit-html-plugin[0m[38;5;12m (https://www.npmjs.com/package/typescript-lit-html-plugin) - TypeScript server plugin that adds IntelliSense for Lit templates.[39m
|
||
|
||
[38;2;255;187;0m[4mOther Tools[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1m@custom-elements-manifest/analyzer[0m[38;5;12m (https://www.npmjs.com/package/@custom-elements-manifest/analyzer) - CLI tool to generate API documentation for web components.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mStorybook for web-components[0m[38;5;12m (https://www.npmjs.com/package/@storybook/web-components) - UI development environment for plain web-component snippets.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mweb-components-codemods[0m[38;5;12m (https://www.npmjs.com/package/web-components-codemods) - Codemods for Web Components compatible with lit-html template literals.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mWeb Component DevTools[0m[38;5;12m (https://github.com/Matsuuu/web-component-devtools) - Browser extension for developers working with Web Components.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mWeb Component Factory[0m[38;5;12m (https://www.npmjs.com/package/@wcfactory/cli) - CLI tool for generating, building, testing and publishing web components.[39m
|
||
|
||
[38;2;255;187;0m[4mCDN[0m
|
||
|
||
[38;5;12mThe following content delivery networks provide ES module versions of Lit:[39m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mcdn.esm.sh[0m[38;5;12m (https://cdn.esm.sh/lit)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mjsDelivr CDN[0m[38;5;12m (https://cdn.jsdelivr.net/npm/lit/+esm)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mJSPM CDN[0m[38;5;12m (https://jspm.dev/lit)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mSkypack CDN[0m[38;5;12m (https://cdn.skypack.dev/lit)[39m
|
||
[38;5;12m- [39m[38;5;14m[1munpkg.com[0m[38;5;12m (https://unpkg.com/lit?module)[39m
|
||
|
||
[38;5;12mSee [39m[38;5;14m[1mlit.dev documentation[0m[38;5;12m (https://lit.dev/docs/getting-started/#use-bundles) for using bundles.[39m
|
||
|
||
[38;2;255;187;0m[4mIntegrations[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mBridgetown Lit Renderer[0m[38;5;12m (https://github.com/bridgetownrb/bridgetown-lit-renderer) - SSR + hydration of Lit components for Bridgetown.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mFable.Lit[0m[38;5;12m (https://github.com/fable-compiler/Fable.Lit) - Collection of tools to embed HTML code into F# code with the power of Lit.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mRuby2JS[0m[38;5;12m (https://github.com/ruby2js/ruby2js) - Minimal yet extensible Ruby to JavaScript conversion.[39m
|
||
|
||
[38;2;255;187;0m[4mVideos[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mLit 3.0 Launch Event[0m[38;5;12m (https://www.youtube.com/watch?v=ri9FEl_hRTc)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mEfficient, Expressive, and Extensible HTML Templates (Polymer Summit 2017)[0m[38;5;12m (https://www.youtube.com/watch?v=ruql541T7gc)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-HTML (Chrome Dev Summit 2017)[0m[38;5;12m (https://www.youtube.com/watch?v=Io6JjgckHbg)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit Beta Launch Event (2021)[0m[38;5;12m (https://www.youtube.com/watch?v=f1j7b696L-E)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLit 2.0 Release Livestream[0m[38;5;12m (https://www.youtube.com/watch?v=nfb779XIhsU)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mVDOM vs lit-html - HTTP203[0m[38;5;12m (https://www.youtube.com/watch?v=uCHZJy2n8Qs)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mDeclarative Reactive Web Components with Justin Fagnani[0m[38;5;12m (https://www.youtube.com/watch?v=9FB0GSOAESo)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mBuilding a Complex Application with Web Components and LitElement[0m[38;5;12m (https://www.youtube.com/watch?v=x9YDQUJx2uw)[39m
|
||
|
||
[38;2;255;187;0m[4mPodcasts[0m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mThe Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals[0m[38;5;12m (https://thewebplatformpodcast.com/159-lithtml-html-templates-via-javascript-template-literals) -[39m
|
||
[38;5;12mAn episode with the lit-html creator Justin Fagnani.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mShopTalk Show 348: Getting lit-html with Justin Fagnani[0m[38;5;12m (https://shoptalkshow.com/episodes/348/) - Another episode with Justin Fagnani as a guest.[39m
|
||
|
||
[38;2;255;187;0m[4mArchive[0m
|
||
|
||
[38;5;12mThe following articles refer to older versions of lit-html and LitElement.[39m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mRender HTML with Vanilla JavaScript and lit-html[0m[38;5;12m (https://dev.to/azure/too-hard-too-soft-just-right-rendering-html-with-lit-html-1km8)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mA gentle introduction to lit-html[0m[38;5;12m (https://dev.to/julcasans/a-gentle-introduction-to-lit-html-3d74)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-html templates from zero to hero[0m[38;5;12m (https://dev.to/julcasans/lit-html-templates-from-zero-to-hero-2afm)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mUpdating blog-pwa from Polymer to LitElement, Workbox, and Rollup[0m[38;5;12m (https://justinribeiro.com/chronicle/2019/04/11/updating-blog-pwa-from-polymer-to-litelement-workbox-and-rollup/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLet's Build Web Components! Part 5: LitElement[0m[38;5;12m (https://dev.to/bennypowers/lets-build-web-components-part-5-litelement-906)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLitElement To Do App[0m[38;5;12m (https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mLitElement with Rollup, Babel & Karma[0m[38;5;12m (https://43081j.com/2018/09/polymer-lit-with-rollup)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mA new, lean way of creating web apps[0m[38;5;12m (https://medium.com/@kennethrohde/a-new-lean-way-of-creating-web-apps-88a49c5b87ec)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mThe future of Polymer & lit-html[0m[38;5;12m (https://43081j.com/2018/08/future-of-polymer)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mA night experimenting with Lit-HTML[0m[38;5;12m (https://lucamezzalira.com/2018/08/14/a-night-experimenting-with-lit-html/)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mMaking a fullstack CRUD app with LitHTML, Redux, Express, and Webpack[0m[38;5;12m (https://medium.com/@pascalschilp/making-a-fullstack-crud-app-with-lithtml-redux-express-and-webpack-fe7e5cf8b3ef)[39m
|
||
[38;5;12m- [39m[38;5;14m[1mBuilding a chat with Twilio, lit-html, Parcel and TypeScript[0m[38;5;12m (https://dev.to/dkundel/building-a-chat-with-twilio-lit-html-parcel-and-typescript-1jo1)[39m
|
||
|
||
[38;2;255;187;0m[4mSimilar libraries[0m
|
||
|
||
[38;5;12mThese libraries are not related to Lit, but are built using similar concepts. They use [39m[48;5;235m[38;5;249mhtml[49m[39m[38;5;12m tagged[39m
|
||
[38;5;12mtemplate literal, and leverage the benefits of the same [39m[38;5;14m[1mIDE Plugins[0m[38;5;12m (#ide-plugins) for syntax highlighting.[39m
|
||
|
||
[38;5;12m- [39m[38;5;14m[1mhaunted[0m[38;5;12m (https://www.npmjs.com/package/haunted) - React's Hooks API but for standard web components and hyperHTML or lit-html.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mhtm[0m[38;5;12m (https://github.com/developit/htm) - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mhybrids[0m[38;5;12m (https://github.com/hybridsjs/hybrids) - UI library for creating Web Components with simple and functional API.[39m
|
||
[38;5;12m- [39m[38;5;14m[1mlit-ntml[0m[38;5;12m (https://github.com/motss/lit-ntml) - Lightweight and modern templating for SSR in Node.js, inspired by lit-html.[39m
|
||
|
||
[38;2;255;187;0m[4mOther awesome resources[0m
|
||
|
||
[38;5;14m[1mIf you want more awesome resources, check the [0m[38;5;12mawesome[39m[38;5;14m[1m (https://github.com/sindresorhus/awesome) list![0m
|
||
|
||
[38;5;238m――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――[39m
|
||
|
||
[38;2;255;187;0m[4mLicense[0m
|
||
|
||
[38;5;14m[1m![0m[38;5;12mCC0[39m[38;5;14m[1m (https://upload.wikimedia.org/wikipedia/commons/6/69/CC0_button.svg)[0m[38;5;12m (http://creativecommons.org/publicdomain/zero/1.0/)[39m
|
||
|
||
[38;5;12mlit Github: https://github.com/web-padawan/awesome-lit[39m
|