Open-source alternatives to Webcomponents

This project is a web component tooling system used to compile TypeScript and JSX into standard-compliant custom elements. It enables the development of framework-agnostic components that function across different browsers and frontend environments. The toolset focuses on cross-framework UI distribution, allowing a single library of components to be used in React, Angular, Vue, or plain HTML. It includes capabilities for enterprise design system engineering and generates specific wrapper code to ensure components behave as native elements within various frameworks. The system covers server-s

Shoelace is a web component UI library consisting of a suite of accessible, framework-agnostic user interface elements. It provides a collection of custom element components and reusable HTML tags that encapsulate style and behavior to work across any JavaScript framework or plain HTML pages. The system is designed as a themable UI component system, utilizing CSS variables to manage visual themes and dark mode support. This allows for the implementation of custom design systems and a consistent visual language across web environments. The library covers broader capabilities in accessible int

This project is a comprehensive JavaScript programming tutorial and language reference. It serves as a web development education resource providing instruction on modern language fundamentals, object-oriented design, and advanced asynchronous programming patterns. The resource functions as both a frontend development guide and a technical reference. It covers core language features such as closures, prototypes, promises, and typed arrays, while providing practical lessons on managing browser data and handling network requests. The content spans several key capability areas, including browser

Omi is a web components framework, reactive UI library, and client-side routing engine. It provides a system for building modular and reusable interface elements based on standard browser web components, using signals to synchronize data changes and update the user interface automatically. The project functions as a cross-framework component tool, exporting standard web elements that operate consistently across different third-party JavaScript libraries. Its capabilities include single-page application navigation and view routing. It also covers reactive state management, component style man

Material Web is a framework-agnostic library of reusable user interface components built on native browser standards. It provides a collection of interactive elements that follow official design system specifications, enabling the creation of consistent and accessible interfaces across diverse web applications. The library utilizes custom elements and shadow DOM to ensure style encapsulation and component logic isolation. By leveraging native browser APIs, it maintains design integrity and functional consistency across all major web browsers and varying screen sizes. The project supports ent

This repository contains the HTML specification, which defines the core standards for web page structuring, content organization, and document rendering. It establishes the fundamental algorithms for state-machine-based tokenization, tree construction for the document object model, and origin-based security isolation. The specification provides a framework for defining custom elements with independent lifecycles and registries. It also details the requirements for cross-document communication, session history management, and the synchronization of interface properties with content attributes.

MPX is a cross-platform framework designed to build applications for multiple mini-program ecosystems and the web from a single codebase. It utilizes a static transpilation pipeline to transform source code into platform-specific bundles, employing a single-file component system that encapsulates templates, logic, and styles. The framework provides a reactive state management system that automatically synchronizes application data with the user interface through computed properties and watchers. The project distinguishes itself through a robust build-time toolchain that supports sub-package p

Lit-element is a custom element framework and reactive UI library that provides a base class for creating standard HTML elements. It is designed to build web components that automatically update their visual state when internal properties or data change. The project enables the development of encapsulated components using the shadow root to isolate styles and structure. It utilizes JavaScript template literals to render declarative templates without requiring a compilation step. The library covers state management through reactive property tracking and the synchronization of JavaScript class

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.

Wujie is a micro-frontend framework and orchestrator designed to embed multiple independent web applications into a single host shell. It provides a system for managing the lifecycle, mounting, and state preservation of sub-applications while maintaining strict JavaScript and CSS isolation. The framework utilizes a web component sandbox combining iframes and custom elements to prevent global variable pollution and style leakage. It features a decentralized event bus for data exchange and state synchronization between isolated micro-applications, along with a mechanism to mirror internal sub-a

FAST is a web components framework and declarative UI library used to build adaptive user interfaces. It functions as a server-side rendering engine and design system implementation, enabling the creation of modular components based on web standards. The framework focuses on cross-framework component compatibility, allowing user interface elements to remain functional across different front-end frameworks and modern browsers. It implements a design language through a collection of pre-defined visual components to ensure consistency across professional applications. The system covers state-dr

This project is a comprehensive reference library of runnable code samples and implementation guides for Web APIs, CSS features, and modular web components. It provides a collection of live demonstrations illustrating how to implement browser APIs and programmatic DOM manipulation. The repository includes specialized demonstrations for interacting with device hardware, such as sensors, Bluetooth, USB, and foldable screen posture detection. It also features implementation guides for modern styling capabilities, including advanced layout patterns, custom functions, and painting APIs, alongside

This project provides a methodology for organizing, scoping, and naming styles to ensure maintainable and scalable stylesheets in large web applications. It functions as a structured approach to managing component-based styles, preventing global namespace collisions and simplifying long-term codebase maintenance through a set of established design principles. The architecture relies on strict namespace-based encapsulation, where all class names are prefixed with unique component identifiers to ensure visual isolation between modules. It enforces a class-only selector strategy to avoid the mai

This is the comprehensive documentation website for the Vue 2 progressive JavaScript framework. It serves as a technical reference and development guide for building reactive user interfaces and single-page applications. The site provides a detailed JavaScript API reference and a web component directory. It covers the implementation of component-based architectures, reactive state management, and the use of a virtual DOM to synchronize application state with the browser. The documentation details capabilities including client-side routing, declarative DOM manipulation, and frontend build opt

Quark Design is a library of reusable interface components built on browser-native web standards. By utilizing custom elements and shadow DOM encapsulation, the project provides a suite of UI elements that function as native browser objects, ensuring consistent visual rendering and behavior across diverse environments. The library is designed to be framework-agnostic, allowing components to be integrated into any web project as standard HTML tags. Because it operates on native browser primitives rather than relying on virtual DOM reconciliation, it maintains a lightweight runtime execution mo

Media Chrome is a library of modular, accessible web components designed for building custom audio and video player interfaces. It functions as a framework-agnostic toolkit that communicates with native media elements to manage playback state, user interactions, and media metadata. The library distinguishes itself through a component-based architecture that relies on standard web technologies to ensure compatibility across different frontend environments. It uses a centralized controller to synchronize state between independent interface elements, allowing developers to compose bespoke player

Wired Elements is a hand-drawn web component library and custom element UI kit. It provides a set of low-fidelity visual building blocks designed to produce a rough, non-polished aesthetic for early-stage design iterations. The framework enables the creation of rapid UI prototypes, low-fidelity wireframes, and conceptual UX mappings. It uses a sketched appearance to help focus iterations on layout and functionality rather than final visual polish. The library utilizes SVG-based path rendering and web component encapsulation to deliver its hand-drawn style. Visual states are managed through e

Fuelux is a JavaScript UI framework and front-end component library used to build consistent, unified user interfaces. It provides a collection of lightweight controls and CSS extensions designed to ensure visual and functional consistency across different web views. The project employs a modular frontend architecture, organizing functionality into independent JavaScript control modules. This design allows the framework to remain lightweight and extendable while decoupling functional behavior from visual CSS definitions. The framework handles interface development through component-based sta

This project is a boilerplate and starter kit for building progressive web applications using standard web components. It provides a structured foundation for developing installable web interfaces that support offline functionality and native-like performance. The framework utilizes a component-based architecture where custom elements maintain their own internal state and encapsulated styles. It integrates client-side routing to manage navigation between views without full page reloads and employs a centralized, immutable store to synchronize data across the application. The toolkit includes

Fluent UI is a design system framework and TypeScript UI toolkit providing a comprehensive set of styles and accessibility guidelines. It functions as a React UI component library and a web component library, offering a collection of pre-styled elements and layout utilities to create a cohesive visual experience across web platforms. The project translates a brand design language into a functional library of reusable components, ensuring cross-product visual consistency. It enables the implementation of design systems for enterprise web applications through the use of standardized visual and

happy-dom is a JavaScript-based headless browser simulation and virtual DOM engine. It implements the Document Object Model and Web APIs to execute frontend code and run tests within non-browser environments such as Node.js. The project provides a programmatic interface for creating and testing custom elements and shadow DOM structures. It supports stateful page instance management to simulate multiple concurrent browsing sessions and includes a programmable clock to synchronize asynchronous operations. The system covers a broad range of browser simulation capabilities, including DOM manipul

This project is a styling library for Vue that enables component-based design by attaching CSS rules directly to HTML tags or component constructors. It utilizes tagged template literals to encapsulate design logic within JavaScript, allowing developers to define, extend, and manage styles directly alongside component code. The library distinguishes itself through a dynamic style injection engine that evaluates functions against component properties at runtime, ensuring visual output updates in response to data changes. It supports polymorphic rendering, which allows the underlying HTML eleme

OnsenUI is a web component mobile UI framework and cross-platform UI library used to build hybrid mobile applications and progressive web apps. It provides a software development kit for creating applications with a web-based architecture using HTML5 and JavaScript. The framework automatically adapts the visual style of its interface elements based on the detected mobile device and operating system to maintain a native appearance. It includes binding packages that synchronize state and properties between its web components and frontend frameworks such as React, Vue.js, and Angular.

jscamp is a full-stack web development and education project focused on mastering JavaScript, TypeScript, and AI integration. It provides a structured curriculum and interactive exercises covering language fundamentals, frontend engineering, and backend API development. The project distinguishes itself through the implementation of autonomous AI agents capable of complex task automation, such as modifying files, managing servers, and executing API calls. It includes advanced AI development tools for conversational querying, real-time code suggestions, and automated repository analysis to gene

Animator is a design platform for creating vector-based animations and programmable interactive components. It provides a visual environment for building motion graphics and UI elements, utilizing a timeline-based interface to manage keyframe sequencing and property transitions. The platform distinguishes itself by combining traditional motion design tools with a spreadsheet-style expression engine. This allows users to define reactive logic and custom behaviors that respond to user interactions or time-based triggers. By serializing these designs into standardized formats, the tool ensures t

Pigment CSS is a framework-agnostic styling tool that moves component style processing from the browser runtime to the build phase. By parsing component source code and theme configurations during compilation, it generates standalone, optimized CSS files and standard class names, effectively eliminating the need for runtime style calculation. The library provides a system for managing design tokens, such as colors and spacing, by transforming them into native CSS variables. This approach allows for dynamic styling and theme-aware logic without requiring a JavaScript-based engine. It also supp

This project is a cross-platform user interface framework that maps mobile-native component primitives to standard web elements. It enables developers to build consistent applications that function across both mobile and web environments by providing a unified library of components and shared logic. The framework distinguishes itself through a specialized style engine that converts JavaScript object-based declarations into optimized, scoped CSS at runtime. It also features a responsive layout engine that implements a flexbox-based system, ensuring that interfaces adapt dynamically to differen