Awesome GitHub RepositoriesCustom Element Frameworks

Polymer is a custom element framework and web component library used to build reusable, encapsulated custom elements that function as native browser components. It serves as a system for defining public properties and attributes that trigger automatic state observation and updates within the DOM. The project functions as a data binding library, providing a mechanism to synchronize state between internal component properties and external models via two-way data binding. It covers the development of frontend component libraries and web component architecture, enabling the creation of modular u

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

Wired-elements is a hand-drawn web component library providing a collection of stylized HTML elements for building wireframes and mockups. It serves as a wireframing UI framework that enables the creation of low-fidelity prototypes with a sketchy, manual aesthetic. The library provides components for hand-drawn web design and rapid UI prototyping. These elements are designed to support low-fidelity wireframing to plan user interfaces and test layouts before high-fidelity development. The project utilizes a web component architecture with SVG-based vector graphics to maintain a consistent han

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

Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by finite state machines. It provides unstyled components that encapsulate logic and accessibility — including full keyboard navigation, focus management, and WAI-ARIA support — while leaving visual styling entirely to the consumer. Components expose scoped data attributes for CSS targeting and use state machines to produce predictable, testable interactive behavior across every state transition. The library distinguishes itself through a state propagation model that distributes

Ce projet est un générateur de tutoriels interactifs et un générateur de site statique qui transforme des documents source, tels que Markdown et Google Docs, en guides pédagogiques structurés. Il fonctionne comme un outil de conversion de documentation qui compile le contenu source en actifs HTML statiques et métadonnées pour une distribution à des audiences publiques ou privées. Le système utilise un framework d'interface utilisateur à éléments personnalisés pour intégrer des composants pédagogiques interactifs en utilisant des éléments personnalisés HTML standard, supprimant le besoin de frameworks JavaScript externes. Il prend en charge l'exportation de contenu multi-format, permettant à une source unique de vérité d'être traduite en plusieurs cibles, y compris HTML et notebooks Jupyter. La plateforme fournit des capacités pour la gestion de contenu pédagogique, permettant l'organisation de tutoriels en collections thématiques et pages d'accueil via des métadonnées et des étiquettes. Elle couvre l'intégralité du cycle de vie de publication, de l'hébergement de prévisualisation locale et la génération d'actifs statiques au déploiement sur le stockage cloud et le suivi de l'engagement des utilisateurs via des analyses intégrées.

Lit-element est un framework de composants personnalisés et une bibliothèque d'interface utilisateur réactive qui fournit une classe de base pour créer des éléments HTML standard. Il est conçu pour construire des composants web qui mettent automatiquement à jour leur état visuel lorsque les propriétés internes ou les données changent. Le projet permet le développement de composants encapsulés utilisant le shadow root pour isoler les styles et la structure. Il utilise des littéraux de gabarit JavaScript pour rendre des templates déclaratifs sans nécessiter d'étape de compilation. La bibliothèque couvre la gestion de l'état par le suivi des propriétés réactives et la synchronisation des propriétés de classe JavaScript avec les attributs HTML. Elle inclut également des capacités pour limiter la portée des sélecteurs CSS et gérer les cycles de rendu asynchrones pour traiter les mises à jour de l'interface.

Ce projet est un framework d'interface utilisateur modulaire pour les applications Vue qui fournit une collection de composants réutilisables construits avec Tailwind CSS. Il fonctionne comme un outil de système de conception piloté par la configuration, permettant aux développeurs de maintenir une cohérence visuelle sur des applications complexes grâce à une gestion centralisée des thèmes et un style basé sur les utilitaires. La bibliothèque se distingue par une architecture hautement configurable qui prend en charge le mappage de style basé sur les variantes et la personnalisation des instances de composants. Les développeurs peuvent définir des valeurs par défaut globales ou créer plusieurs versions du même élément d'interface, permettant une commutation visuelle dynamique et des remplacements de propriétés spécifiques sans dupliquer le code. Cette approche garantit que les composants restent flexibles tout en adhérant à un langage de conception unifié. Le framework couvre un large éventail d'exigences d'interface, y compris des outils spécialisés pour la sélection de date et d'heure et la conception structurée de saisie de formulaire. Il met l'accent sur les performances en prenant en charge les optimisations au moment de la compilation, telles que l'importation sélective de composants et la suppression des définitions de style inutilisées, pour minimiser la taille finale du bundle de l'application.