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 ist eine Web-Component-Bibliothek mit handgezeichnetem Stil, die eine Sammlung stilisierter HTML-Elemente für den Aufbau von Wireframes und Mockups bereitstellt. Sie dient als Wireframing-UI-Framework, das die Erstellung von Low-Fidelity-Prototypen mit einer skizzenhaften, manuellen Ästhetik ermöglicht. Die Bibliothek bietet Komponenten für handgezeichnetes Webdesign und schnelles UI-Prototyping. Diese Elemente sind darauf ausgelegt, Low-Fidelity-Wireframing zu unterstützen, um Benutzeroberflächen zu planen und Layouts vor der High-Fidelity-Entwicklung zu testen. Das Projekt nutzt eine Web-Component-Architektur mit SVG-basierten Vektorgrafiken, um einen konsistenten handgezeichneten Look beizubehalten. Es unterstützt die Integration in verschiedene JavaScript-Frameworks und nutzt CSS-Variablen für das Theming von Strichstärken und Farben.

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

Dieses Projekt ist ein interaktiver Tutorial-Generator und ein Static-Site-Generator, der Quelldokumente (wie Markdown und Google Docs) in strukturierte Anleitungen umwandelt. Es fungiert als Dokumentations-Konvertierungstool, das Quellinhalte in statische HTML-Assets und Metadaten für die Verbreitung an öffentliches oder privates Publikum kompiliert. Das System nutzt ein Custom-Element-UI-Framework, um interaktive Anleitungskomponenten mittels Standard-HTML-Custom-Elements einzubetten, wodurch externe JavaScript-Frameworks überflüssig werden. Es unterstützt den Export von Inhalten in mehreren Formaten, was es ermöglicht, eine einzige Quelle der Wahrheit in mehrere Ziele zu übersetzen, einschließlich HTML und Jupyter-Notebooks. Die Plattform bietet Funktionen für das Management von Anleitungsinhalten und ermöglicht die Organisation von Tutorials in thematischen Sammlungen und Landingpages mittels Metadaten und Tagging. Sie deckt den gesamten Publishing-Lebenszyklus ab, vom lokalen Preview-Hosting und der Generierung statischer Assets bis hin zum Deployment auf Cloud-Speicher und der Verfolgung des Benutzerengagements durch integrierte Analysen.

Lit-element ist ein Framework für benutzerdefinierte Elemente und eine reaktive UI-Bibliothek, die eine Basisklasse für die Erstellung von Standard-HTML-Elementen bereitstellt. Es wurde entwickelt, um Webkomponenten zu erstellen, die ihren visuellen Zustand automatisch aktualisieren, wenn sich interne Eigenschaften oder Daten ändern. Das Projekt ermöglicht die Entwicklung gekapselter Komponenten unter Verwendung des Shadow Root, um Stile und Struktur zu isolieren. Es nutzt JavaScript-Template-Literale, um deklarative Templates ohne Kompilierungsschritt zu rendern. Die Bibliothek deckt das State-Management durch reaktive Eigenschaftsverfolgung und die Synchronisierung von JavaScript-Klasseneigenschaften mit HTML-Attributen ab. Sie umfasst zudem Funktionen für das Scoping von CSS-Selektoren und die Verwaltung asynchroner Rendering-Zyklen zur Handhabung von Interface-Updates.

Dieses Projekt ist ein modulares UI-Framework für Vue-Anwendungen, das eine Sammlung wiederverwendbarer Komponenten auf Basis von Tailwind CSS bereitstellt. Es fungiert als konfigurationsgesteuertes Design-System-Tool, das es Entwicklern ermöglicht, visuelle Konsistenz über komplexe Anwendungen hinweg durch zentrales Theme-Management und Utility-basiertes Styling zu wahren. Die Bibliothek zeichnet sich durch eine hochgradig konfigurierbare Architektur aus, die variantenbasiertes Style-Mapping und die Anpassung von Komponenteninstanzen unterstützt. Entwickler können globale Defaults definieren oder mehrere Versionen desselben Interface-Elements erstellen, was dynamische visuelle Wechsel und spezifische Property-Overrides ohne Code-Duplizierung ermöglicht. Dieser Ansatz stellt sicher, dass Komponenten flexibel bleiben und gleichzeitig einer einheitlichen Designsprache folgen. Das Framework deckt eine breite Palette an Interface-Anforderungen ab, einschließlich spezialisierter Werkzeuge für die Datums- und Zeitauswahl sowie strukturiertes Formular-Design. Es legt Wert auf Performance durch Unterstützung von Build-Time-Optimierungen, wie selektives Komponenten-Importieren und das Entfernen ungenutzter Style-Definitionen, um die finale Bundle-Größe der Anwendung zu minimieren.