Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

awesome-web-components

A curated list of awesome Web Components resources.
https://github.com/web-padawan/awesome-web-components

Last synced: 5 days ago
JSON representation

Articles
Real World
- Case Studies
- Components
  - `<api-viewer>` - API documentation and live playground for Web Components.
  - `<rapi-doc>` - Web component for creating documentation from OpenAPI Specification.
  - `<player-x>` - Media player web component.
  - `<rapi-doc>` - Web component for creating documentation from OpenAPI Specification.
  - `<active-table>` - Editable table web component.
  - `<chess-board>` - Standalone chess board web component.
  - `<css-doodle>` - Web component for drawing patterns with CSS.
  - `<dark-mode-toggle>` - Custom element that allows to create a dark mode toggle or switch.
  - `<deep-chat>` - Web component for chat with AI capabilities.
  - `<emoji-picker>` - Lightweight emoji picker, distributed as a web component.
  - `<fg-modal>` - Accessible modal dialog web component.
  - `<file-viewer>` - Web component built with Svelte to view files.
  - `<json-viewer>` - Web component to visualize JSON data in a tree view.
  - `<lite-youtube>` - Lite YouTube embed with a focus on visual performance.
  - `<midi-player>` - MIDI file player and visualizer web components.
  - `<model-viewer>` - Web component for rendering interactive 3D models.
  - `<player-x>` - Media player web component.
  - `<progressive-image>` - Custom element to progressively enhance image placeholders.
  - `<qr-code>` - able, SVG-based QR codes.
  - `<range-slider>` - Accessible range slider custom element with keyboard support.
  - `<shader-doodle>` - Web component for writing and rendering shaders.
  - `<theme-switch>` - Animated toggle button to switch between light, dark, and system theme.
  - `<trix-editor>` - Rich text editor custom element for everyday writing.
  - `<vime-player>` - Customizable, extensible, accessible and framework agnostic media player.
  - `<web-vitals>` - Bring [web vitals](https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements.
  - `<api-viewer>` - API documentation and live playground for Web Components.
- Component Libraries
  - Wired Elements - Set of common UI elements with a hand-drawn, sketchy look.
  - Playground Elements - Serverless code experiences with web components.
  - Wired Elements - Set of common UI elements with a hand-drawn, sketchy look.
  - AnywhereUI - Collection of rich web components that includes framework bindings. Created with StencilJS.
  - Apollo Elements - Custom elements for using Apollo GraphQL with various web components libraries.
  - AXA Pattern Library - AXA CH UI components library built with Web Components.
  - Blackstone UI - Web components for creating interfaces by Blackstone Publishing.
  - Blaze UI Atoms - Set of web components powered by Blaze CSS.
  - Brightspace UI core - Collection of web components for building Brightspace applications.
  - Clever components - Collection of Web Components made by Clever Cloud.
  - Curvenote - Web components for creating interactive scientific articles.
  - DataFormsJS - Standalone Components for SPA routing, displaying data from web services, and more.
  - Dile Components - General use Web Components for websites and applications.
  - elements-sk - Collection of custom elements for "a la carte" web development.
  - github-elements - GitHub's Web Component collection.
  - Elix - High-quality, customizable web components for common user interface patterns.
  - Furo Webcomponents - Enterprise ready set of web components which work best with Eclipse Furo.
  - Fusion Web Components - Ser of web components used by Equinor Fusion.
  - Ignite UI Web Components - Complete library of UI components from Infragistics.
  - Immersive Custom Elements - Set of web components for embedding immersive (VR & AR) content.
  - Joomla UI custom elements - Compilation of Joomla 4 Custom Elements.
  - Ketch.UP - Web components library for Sme.UP.
  - LDRS - Lightweight, customizable loading animations/spinners.
  - Lion Web Components - Set of highly performant, accessible and flexible Web Components.
  - Lume - Custom elements for defining 2D or 3D scenes rendered with CSS3D or WebGL.
  - Medblocks UI - Web Components for rapid development of openEHR and FHIR systems.
  - Microsoft Graph Toolkit - Collection of web components for the Microsoft Graph.
  - Mutation testing elements - A schema for mutation testing results with the web components to visualize it.
  - Nightingale - Data visualisation web components for the life sciences.
  - Nuxeo Elements - Components for building web applications with Nuxeo using Web Components.
  - One Platform Components - Set of web components for Red Hat One Platform.
  - Open Business Application Platform Web Components - Collection of web components designed for business applications.
  - Pixano Elements - Re-usable web components dedicated to data annotation tasks.
  - Shoelace - A forward-thinking library of web components.
  - Smart Web Components - Web components for business applications.
  - Stripe Elements - Custom Element Wrapper for Stripe.js v3 Elements.
  - TEI Publisher Components - Collection of web components used by TEI Publisher and apps generated by it.
  - Titanium Elements - Collection of lightweight web components used by Leavitt Group Enterprises.
  - Tradeshift Elements - Reusable Tradeshift UI Components as Web Components.
  - TrendChart Elements - Components to generate simple, light and responsive charts.
  - Umbraco UI Components - Collection of user interface web components for Umbraco CMS.
  - Vaadin components - Evolving set of high-quality web components for building business web applications.
  - VSCode Webview Elements - Components for creating VSCode extensions which use the Webview API.
  - Warp View - Collection of charting web components for Warp 10.
  - Webmarkets web components - Set of Webmarkets' public web components.
  - Wokwi Elements - Web Components for Arduino and various electronic parts.
  - XWeather - Collection of web components implementing portions of the OpenWeatherMap API.
  - LRNWebComponents - ELMS:LN produced web components for any project.
- Design Systems
  - Auro Design System - Alaska Airlines design system to innovate on ideas and collaborate on the future.
  - Blueprint UI - Web Component based design system with flexible and lightweight components.
  - Clarity Core Web Components - Suite of web components from the Clarity Design System.
  - FAST Components - Library of Web Components based on the FAST design language.
  - Fluent UI Web Components - Library of Web Components that supports Microsoft's Fluent design language.
  - Momentum UI Web Components - Set of UI components based on Momentum Design.
  - Nord - Nordhealth’s design system for products, digital experiences and brand.
  - Siemens iX Web Components - Web Components implementing Siemens iX design system.
  - U-M Library Design System - University of Michigan Library Design System.
  - Auro Design System - Alaska Airlines design system to innovate on ideas and collaborate on the future.
  - Blueprint UI - Web Component based design system with flexible and lightweight components.
  - Calcite Components - Shared Web Components for Esri's Calcite design framework.
  - Crayons - Collection of web components that adheres to the Freshworks Design System.
  - Nord - Nordhealth’s design system for products, digital experiences and brand.
  - NuML | NUDE Elements - HTML Framework and Design System based on Web Components and runtime CSS generation.
  - U-M Library Design System - University of Michigan Library Design System.
  - Astro Space UX Design System - Set of components to build rich space app experiences with established interaction patterns.
  - Bolt Design System - Twig and Web Component-powered UI components, reusable visual styles and tooling.
  - Calcite Components - Shared Web Components for Esri's Calcite design framework.
  - Carbon Web Components - Carbon Design System variant on top of Web Components.
  - Forge Components - Library of Web Components adhering to the Forge Design System.
  - GOV.UK Web Components - Set of encapsulated web components consuming the GOV.UK Design System.
  - Helix UI - Web Component library for the Helix Design System.
  - Liquid - UI component library based on the Liquid Design System.
  - Lyne Components - Building blocks of the Lyne Design System are based on Web Components.
  - Material Web Components - Material Design implemented as Web Components.
  - OutlineJS - Web component based design system starter kit.
  - PatternFly Elements - Collection of flexible and lightweight Web Components based on the Unified Design Kit.
  - Pharos Design System - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
  - Red Hat Design System - Web components for building uniform experiences with the Red Hat brand.
  - Spectrum Web Components - Adobe Spectrum design language implementation built with Web Components.
  - UI5 Web Components - Set of reusable UI elements implementing SAP Fiori Design Guidelines.
  - Zooplus web components - Set of web components that implement Z+ shop style guide.
- Use Cases
Standards
Guides
- Codelabs
- Accessibility
- Best Practices
- Examples
  - open-wc code examples - Collection of best practices and design patterns for developing web components.
  - generic-components - Collection of generic web components with a focus on accessibility, and ease of use.
  - howto-components - Collection of web components that implement common web UI patterns.
  - Nude UI - Collection of accessible, customizable, ultra-light web components.
  - vanilla-retro-js - Vanilla JS UI component library of HTML deprecated tags.
  - web-components-examples - Series of web components examples, related to the MDN web components documentation.
Introduction
Libraries
- Class Based
  - FAST Element - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
  - Lit - Simple library for building fast, lightweight web components.
  - Lit - Simple library for building fast, lightweight web components.
  - Tonic - Minimalist, stable, audit friendly component framework.
  - DNA - Progressive Web Components library.
  - element-js - Simple and lightweight base classes for web components with a beautiful API.
  - Forge Core - Building blocks and utilities that are used when building Forge Web Components.
  - Joist - Set of small libraries designed to add the bare minimum to web components to make you productive.
  - Lightning Web Components - blazing fast, enterprise-grade Web Components foundation.
  - Omi - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
  - Panel - Web Components + Virtual DOM: web standards for powerful UIs.
  - slim.js - Fast & Robust Front-End Micro-framework based on modern standards.
  - Stencil - Compiler for generating Web Components.
  - WebCell - Web Components engine based on VDOM, JSX, MobX & TypeScript.
- Functional
  - Solid Element - Library that extends Solid adding Custom Web Components and extensions.
  - atomico - Small library for the creation of interfaces based on web components using functions and hooks.
  - haunted - React's Hooks API implemented for web components.
  - hybrids - UI library for creating Web Components with simple and functional API.
- Benchmarks
  - All the Ways to Make a Web Component
  - web-components-todo - The same todo application built in different Web Components libraries for benchmark purpose.
  - web-components-benchmark - Benchmark Web Components technologies with various examples.
- Integrations
  - ember-custom-elements - Render Ember and Glimmer components using custom elements.
  - preact-custom-element - Generate/register a custom element from a preact component.
  - @adobe/react-webcomponent - Automate the wrapping of a React component in a custom element.
  - nuxt-custom-elements - Export your project components as custom elements for integration into external pages.
  - react-shadow - Utilise Shadow DOM in React with all the benefits of style encapsulation.
  - reactify-wc - Use web components with React properties and functions.
  - remount - Mount React components to the DOM using custom elements.
  - @riotjs/custom-elements - Simple API to create vanilla custom elements with Riot.js.
Frameworks
Meta Frameworks
- Svelte
  - Enhance - Web standards-based HTML framework for building lightweight web applications.
  - Rocket - Modern web setup for static sites with a sprinkle of JavaScript.
  - Rocket - Modern web setup for static sites with a sprinkle of JavaScript.
  - luna-js - SSR framework that makes working with the WebComponents standard a breeze.
  - Web Components Compiler - Compiler to make server-side rendering of native web components easier.
  - WebC - Framework-independent standalone HTML serializer for generating markup for web components.
  - AMP - Web component framework to easily create user-first experiences for the web.
- Starter Kits
  - Create Open Web Components - Web component project scaffolding.
  - custom-element-boilerplate - Boilerplate for creating a custom element.
  - hello-web-components - Simple starter hello world web component written in TypeScript.
  - nutmeg - Build, test, and publish vanilla Web Components with a little spice.
- Testing Solutions
  - Cypress component tests for Lit - How to run component tests for a Lit web component with Cypress.
  - Developing Components: Testing - Using @web/test-runner for testing web components in a real browser.
  - How To Automate Shadow DOM In Selenium WebDriver - Locating Shadow DOM elements using Selenium WebDriver in a Maven project.
  - Native Automation support for Shadow DOM - Shadow DOM and open-source testing frameworks.
  - Open Web Components: Testing - Opinionated package that combines and configures testing libraries.
  - Testing Shadow DOM elements in Selenium - In Selenium 4, there is now a way to access Shadow DOM nodes.
  - W3C Webdriver conquering automation of Shadow DOM - Shadow DOM tree and its interaction with the W3C Webdriver.
  - capybara-shadowdom - Ruby gem that adds basic support for the Shadow DOM to Capybara.
  - cypress-lit - Test your Lit elements and native web components in Cypress with all the modern browsers.
  - query-selector-shadow-dom - querySelector that can pierce Shadow DOM roots, useful for automated testing.
  - shadow-automation-selenium - Shadow DOM automation using Selenium.
  - Test web components with Playwright - So you’ve created a native web component or two. How do you test them in popular browsers?
- Tools
  - Backlight
  - @storybook/web-components - UI development environment for plain web-component snippets.
  - webcomponents.dev - Component IDE for web platform developers.
  - webcomponents.dev - Component IDE for web platform developers.
  - Custom Elements Locator - Chrome extension to find custom elements on a page.
  - web-component-analyzer - CLI that analyzes web components and emits documentation / diagnostics.
  - Web Components Codemods - Codemods for Web Components.
Books
- Tools
  - Web Components in Action - Book by Ben Farrell, available at Manning early release program.
  - Web Component Essentials - Book by Cory Rylan, early preview edition available at Leanpub.
Tutorials
- Tools
Insights
Usage Metrics
- Talks
Proposals
- Form-associated Custom Elements
  - Form Participation API Explained - Document by Google Chrome team.
  - Form-associated custom elements - Feature in Chrome platform status.
  - web-platform-tests
  - Form-associated custom elements - Feature in Chrome platform status.
- Constructable Stylesheet Objects
  - web-platform-tests
  - Explainer
  - Constructable Stylesheets - Feature in Chrome platform status.
  - Constructable Stylesheets - Feature in Chrome platform status.
  - Specification Draft
  - Specification Draft
- Custom State Pseudo Class
Miscellaneous
- Custom State Pseudo Class
  - Vaadin Directory - Publish, discuss and rate web components
  - webcomponents.org - Discuss & share web components.
  - Vaadin Directory - Publish, discuss and rate web components
  - webcomponents.org - Discuss & share web components.
  - bruck - Prototyping system built with web components and the Houdini Paint API.
Archive
- Polyfills
  - @webcomponents/custom-elements - Custom Elements polyfill by Polymer team.
  - @webcomponents/shadydom - ShadowDOM v1 shim.
  - @webcomponents/shadycss - ShadowDOM style encapsulation shim.
  - @lwc/synthetic-shadow - Shadow DOM polyfill by [LWC](https://lwc.dev).
  - @webcomponents/template - Minimal polyfill for `<template>`.
  - @lwc/synthetic-shadow - Shadow DOM polyfill by [LWC](https://lwc.dev).
  - document-register-element - Custom Elements polyfill by Andrea Giammarchi.
  - @corpuscule/custom-builtin-elements - Customized built-in elements polyfill by [CorpusculeJS](https://github.com/corpusculejs).
  - @ungap/custom-elements-builtin - Customized built-in elements polyfill by [ungap project](https://ungap.github.io).
  - @ungap/import-node - An `importNode` polyfill for IE11 by [ungap project](https://ungap.github.io).
- History
Maintainers
- History
  - @mateusortiz
  - @web-padawan

Programming Languages

JavaScript 67 TypeScript 51 HTML 8 CSS 3 Java 1 Ruby 1 Twig 1 Bikeshed 1

Categories

Archive 684 Articles 166 Frameworks 148 Real World 140 Tutorials 119 Standards 115 Guides 40 Meta Frameworks 30 Libraries 29 Insights 25 Proposals 13 Introduction 10 Miscellaneous 5 Usage Metrics 3 Books 2 Maintainers 2

Sub Categories

History 676 Architecture 143 Tools 128 Shadow DOM 87 Svelte 75 Angular 73 Component Libraries 48 Design Systems 33 Components 26 Case Studies 20 Codelabs 14 Class Based 14 Use Cases 13 Accessibility 12 Presentations 12 Testing Solutions 12 Custom Elements 11 Styling 11 HTML Templates 11 Talks 10 Polyfills 10 Integrations 8 Custom State Pseudo Class 8 Interoperability 8 Best Practices 8 React 6 Examples 6 CSS Shadow Parts 6 Podcasts 6 Constructable Stylesheet Objects 6 Limitations 4 Starter Kits 4 Form-associated Custom Elements 4 Functional 4 Benchmarks 3 Vue 1

Keywords

web-components 50 webcomponents 42 custom-elements 30 javascript 27 web-component 15 lit-element 13 shadow-dom 13 lit-html 12 design-system 11 typescript 10 components 10 react 9 ui 9 ui-components 8 html 8 lit 7 css 7 stenciljs 6 angular 6 vue 5 custom-element 5 web 5 jsx 5 polymer 4 svelte 4 customelements 4 ui-library 3 storybook 3 stencil 3 html5 3 testing 3 preact 3 framework 3 dash 2 forge 2 material-design 2 hls 2 redhat 2 ssr 2 material 2 vuejs 2 tailwindcss 2 3d-models 2 itcss 2 bem 2 3d 2 virtual-dom 2 player 2 library 2 youtube 2