Awesome Web Components
by web-padawan · web-padawan/awesome-web-components
Curated list of awesome Web Components resources.
HBenchmark Web Components technologies with various examples.
The same todo application built in different Web Components libraries for benchmark purpose.
GBook by Cory Rylan, early preview edition available at Leanpub.
Book by Ben Farrell, available at Manning early release program.
W
D
ESimple and lightweight base classes for web components with a beautiful API.
FLightweight library for building performant, memory-efficient, standards-compliant Web Components.
FBuilding blocks and utilities that are used when building Forge Web Components.
JSet of small libraries designed to add the bare minimum to web components to make you productive.
L
LWrite custom elements with reactivity and templating powered by Solid.js signals and effects.
ONext generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
P
R
S
S
T
W
AA CLI-based UI component library that copies Lit web components directly into your project. Full React and Vue wrappers for native framework experience.
AWeb component framework for easily creating user-first websites, stories, ads, emails and more.
ACollection of rich web components that includes framework bindings. Created with StencilJS.
ACustom elements for using Apollo GraphQL with various web components libraries.
A
B
B
BCollection of web components for building Brightspace applications.
B
C
C
DStandalone Components for SPA routing, displaying data from web services, and more.
D
E
E
FEnterprise ready set of web components which work best with Eclipse Furo.
F
G
I
ISet of web components for embedding immersive (VR & AR) content.
J
K
L
L
LLCustom elements for 3D graphics. Built with Three.js for WebGL/WebGPU rendering, and Solid.js for reactivity and templating.
M
M
MA schema for mutation testing results with the web components to visualize it.
N
NComponents for building web applications with Nuxeo using Web Components.
O
O
P
P
S
S
S
TCollection of web components used by TEI Publisher and apps generated by it.
TCollection of lightweight web components used by Leavitt Group Enterprises.
T
T
U
VEvolving set of high-quality web components for building business web applications.
VComponents for creating VSCode extensions which use the Webview API.
W
W
W
W
X
E
A
D
E
@Customized built-in elements polyfill by CorpusculeJS.
@
ASet of components to build rich space app experiences with established interaction patterns.
Alaska Airlines design system to innovate on ideas and collaborate on the future.
Web Component based design system with flexible and lightweight components.
BTwig and Web Component-powered UI components, reusable visual styles and tooling.
C
C
C
CFLibrary of Web Components that supports Microsoft's Fluent design language.
GSet of encapsulated web components consuming the GOV.UK Design System.
H
L
L
M
M
NHTML Framework and Design System based on Web Components and runtime CSS generation.
NThe Design Language and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles.
O
PCollection of flexible and lightweight Web Components based on the Unified Design Kit.
PJSTOR's design system to create cohesive, supportive, and beautiful experiences.
RWeb components for building uniform experiences with the Red Hat brand.
S
SAdobe Spectrum design language implementation built with Web Components.
University of Michigan Library Design System.
USet of reusable UI elements implementing SAP Fiori Design Guidelines.
Z
GCollection of generic web components with a focus on accessibility, and ease of use.
H
NCollection of best practices and design patterns for developing web components.
V
WSeries of web components examples, related to the MDN web components documentation.
ASmall library for the creation of interfaces based on web components using functions and hooks.
EA lightweight library for building functional web components using signals and Lit.
H
H
S@Automate the wrapping of a React component in a custom element.
@
E
NExport your project components as custom elements for integration into external pages.
P
R
R
R
@
@
WCompiler to make server-side rendering of native web components easier.
WFramework-independent standalone HTML serializer for generating markup for web components.
B
S
H
N
C
CTest your Lit elements and native web components in Cypress with all the modern browsers.
Using @web/test-runner for testing web components in a real browser.
Locating Shadow DOM elements using Selenium WebDriver in a Maven project.
Shadow DOM and open-source testing frameworks.
Opinionated package that combines and configures testing libraries.
QquerySelector that can pierce Shadow DOM roots, useful for automated testing.
SSo you’ve created a native web component or two. How do you test them in popular browsers?
In Selenium 4, there is now a way to access Shadow DOM nodes.
Shadow DOM tree and its interaction with the W3C Webdriver.
With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems.
C
W
WCLI that analyzes web components and emits documentation / diagnostics.