Awesome GitHub RepositoriesCustom HTML Elements

Skeleton is a lightweight responsive CSS boilerplate and mobile-first framework. It provides a foundation for building mobile-friendly websites through a fluid 12-column grid system, a minimal CSS reset library to normalize browser defaults, and default styling for raw HTML elements. The project emphasizes a mobile-first development approach, using percentage-based widths and predefined media queries to progressively enhance layouts for larger screens. It includes a utility-first library of single-purpose classes to manage common layout tasks such as floating elements, clearing, and width con

Base UI is a headless component library and unstyled framework providing accessible interface primitives. It decouples behavioral logic and state management from the visual layer, allowing developers to implement complex UI patterns while maintaining total control over the final styling. The library implements WAI-ARIA design patterns to ensure all primitives support standard keyboard navigation and screen reader accessibility. It provides a suite of low-level building blocks that handle the internal mechanics of interface elements without bundling any CSS. The framework covers a broad range

Markdoc is a documentation content framework that extends standard Markdown with custom tags, typed schemas, and reusable components, parsing content into an abstract syntax tree and rendering it as React elements or HTML. It provides a structured authoring system where documents are processed through an AST-based pipeline, enabling validation, transformation, and flexible output generation. The framework distinguishes itself through a schema-driven validation pipeline that checks document structure and attribute values against defined rules, and a pluggable renderer architecture that accepts

Rebass is a React design system library that provides a collection of theme-driven, responsive UI primitives. It functions as a theme-based layout engine, using a set of stateless components to standardize spacing, typography, and colors across a user interface. The library distinguishes itself by mapping style properties to a central design theme through a styled-system approach. This allows for responsive style mapping where components automatically adapt their appearance based on screen size and provides the ability to swap underlying HTML elements while preserving styling logic to maintai

This project is an HTML email framework and compiler designed to build responsive emails using a high-level syntax that transforms into table-based layouts. It functions as an HTML-to-table compiler and CSS inliner, ensuring that simplified markup is converted into the complex nested structures and inline attributes required for cross-client compatibility. The framework features a responsive email grid system and Sass-based styling, allowing the use of variables to manage colors, typography, and spacing. These tools enable custom brand theming and the creation of fluid layouts that adapt to v

cva is a TypeScript utility for defining and resolving visual variants for UI components with full type safety. It generates CSS class strings from typed variant definitions, enabling compile-time validation of component usage by deriving the union of all variant prop types from a configuration object. The library distinguishes itself through compound variant matching, which activates styles only when multiple independent variant conditions are simultaneously satisfied, merging their class names. It also provides default value propagation to ensure consistent rendering when no explicit varian

FastHTML is a full-stack Python web framework designed for building interactive web applications using pure Python. It functions as an HTMX integration framework and a Python HTML domain-specific language, allowing developers to generate HTML structures using native objects and functions instead of external templating files. The framework is distinguished by its native support for real-time bidirectional communication via WebSockets and Server-Sent Events, enabling server-side updates to be pushed to the browser without full page reloads. It further integrates identity management through OAut

Mesop is a stateful, declarative Python web UI framework and component library designed for building interactive web applications and AI demos. It allows for the construction of data-driven interfaces and chat systems using only Python, removing the need to write separate HTML or CSS. The framework is specifically tailored for AI application development, offering dedicated tools for conversational UI design and the creation of dashboards for large language model applications. It distinguishes itself with a visual UI editor for real-time property adjustments and the ability to embed custom Jav

Waku is a minimal React framework built around React Server Components. It renders components exclusively on the server for data fetching and server-side logic, then hydrates client components in the browser for interactivity. The framework supports hybrid rendering, mixing static prerendering at build time with dynamic per-request rendering within a single application, and allows independently loading slice components that can be static or dynamic. The framework distinguishes itself through its file-based routing system that defines pages, layouts, and API endpoints by placing files in a dir

Reach UI is an open-source library of accessible, low-level React components designed to serve as a foundation for building design systems and interactive user interfaces. It is an accessibility-first toolkit that handles core concerns like ARIA attributes, focus management, and screen reader support automatically, without requiring developer configuration. The library is built as a collection of standalone packages, each managing its own lifecycle and dependencies, enabling granular adoption and tree-shaking. Components use a polymorphic rendering pattern, accepting an as prop to render as

Vetur is a Visual Studio Code extension that provides comprehensive language support for Vue single-file components. It parses .vue files into separate template, script, and style regions, then delegates each region to its own language service for independent processing. This architecture enables IntelliSense, type-checking, formatting, and linting across all embedded languages within a Vue file. The extension distinguishes itself through deep integration with Vue's component model. It infers TypeScript types for template expressions by analyzing component props, data, and computed properti

Ein responsives Material-Design-Theme für statische Blogs, die mit dem Hexo-Framework erstellt wurden. Es fungiert als umfassendes Layout-System, das Markdown-Dateien in gestylte HTML-Seiten umwandelt und eine spezialisierte Umgebung für technische Dokumentation und persönliche Blogs bietet. Das Theme zeichnet sich durch einen datengesteuerten Ansatz zur Inhaltsvisualisierung aus, bei dem Radar-Charts für Kategorien und Wortwolken für Tags verwendet werden, um Post-Metadaten darzustellen. Die Organisation wird durch eine chronologische Timeline-Architektur für Blog-Archive weiter strukturiert. Das Projekt deckt eine Vielzahl technischer Publishing-Funktionen ab, darunter das Rendern von mathematischen Formeln, Syntax-Highlighting für Code-Blöcke und die Generierung adaptiver Inhaltsverzeichnisse. Es enthält Tools zur Website-Anpassung durch dynamische Homepages, mehrstufige Navigationsmenüs und detaillierte Profilseiten. Das Engagement der Leser wird durch integrierte Suchfunktionen, passwortgeschützte Beiträge sowie die Einbindung von Kommentar- und Chat-Systemen Dritter unterstützt. Die Performance wird durch CDN-Ressourcen-Routing und Asset-Preloading verwaltet, während die Sichtbarkeit in Suchmaschinen über konfigurierbare SEO-Metadaten gesteuert wird.

Lovelace Mushroom is a custom card set and UI library for Home Assistant designed for displaying and controlling smart home device entities. It provides a framework for building clean, visual dashboards and control interfaces to manage connected hardware. The library includes a theme framework that allows for the application of custom color palettes and the use of light or dark modes. Users can configure card appearances and visual themes using built-in pickers and a visual editor to avoid manual source code modification.

Kraken ist ein plattformübergreifendes UI-Framework und eine Web-Standards-Laufzeitumgebung, die entwickelt wurde, um native Anwendungen unter Verwendung von Standard-Web-Markup und -Styling zu erstellen. Es nutzt eine Flutter-basierte Rendering-Engine, um HTML und CSS zu verarbeiten, und erzeugt visuell konsistente Benutzeroberflächen über mobile und Desktop-Plattformen hinweg. Das System zeichnet sich dadurch aus, dass es die Laufzeitumgebung in Maschinencode kompiliert und eine synchrone Rasterisierungspipeline verwendet, um sicherzustellen, dass Animationen und Scrollvorgänge der Fluidität nativer Anwendungen entsprechen. Es integriert zudem hochperformante native Komponenten direkt in einen Web-Standard-DOM-Baum, was die Definition benutzerdefinierter HTML-Tags ermöglicht, die von nativen Widgets unterstützt werden. Das Framework deckt eine breite Funktionsfläche ab, einschließlich der Ausführung von JavaScript-Komponenten-Bäumen, der Synchronisierung globaler und lokaler Zustände sowie der standardisierten Gestenverarbeitung. Es bietet zudem ein Plugin-basiertes System zur Erweiterung der API um benutzerdefinierte Backend-Funktionen und unterstützt die Integration mit verschiedenen Frontend-Frameworks. Entwickler-Workflows werden durch die Integration mit dem Chrome DevTools-Protokoll unterstützt, was die Inspektion des Anwendungszustands und die Modifikation von UI-Stilen ermöglicht.

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.

Derby ist ein isomorphes MVC-Framework und eine Echtzeit-Datensynchronisations-Engine, die für den Aufbau kollaborativer Anwendungen konzipiert ist. Es fungiert als bidirektionale Data-Binding-Bibliothek und Template-Engine, die eine einzige Codebasis zwischen Node.js und dem Browser teilt, um den Status über Clients und Server hinweg zu synchronisieren. Das Framework zeichnet sich durch den Einsatz von Operational Transformation aus, um Datenkonflikte automatisch aufzulösen, was Echtzeit-Shared-Editing und Multi-User-Kollaboration ermöglicht. Es verwendet ein differenzielles State-Mutation-Modell, um Updates durch Deep-Equality-Checks zu minimieren und sicherzustellen, dass nur geänderte Werte propagiert werden. Die Plattform deckt ein breites Spektrum an Funktionen ab, einschließlich reaktivem State-Management, isomorphem Routing und modularer UI-Komponentenentwicklung. Sie bietet Tools zur Verwaltung verschachtelter Datenpfade, zur Ausführung isomorpher Renderings für schnelle initiale Ladezeiten und zur Integration mit Server-Middleware. Das System ist in TypeScript implementiert.

mPDF ist eine PHP-Bibliothek, die UTF-8-kodiertes HTML und CSS in formatierte PDF-Dokumente umwandelt. Sie dient als PDF-Generierungs-Engine und Dokumentenarchitekt, der in der Lage ist, Webseiten und HTML-Formulare in professionelle Dateien zu konvertieren. Das Projekt zeichnet sich durch seine mehrsprachigen Rendering-Fähigkeiten aus und bietet umfassende Unterstützung für bidirektionalen Text, Right-to-Left-Skripte und CJK-Sprachen unter Verwendung von Unicode-Schrift-Einbettung und OpenType-Layout-Verarbeitung. Es ermöglicht zudem ein professionelles, druckfertiges Design durch fortschrittliche Farbmodellierung in CMYK, präzise Seitendimensionierung und die Einhaltung von PDF/A- und PDF/X-Archivierungsstandards. Die Bibliothek deckt eine breite Palette von Dokumentenlayout- und Interaktivitätsfunktionen ab, einschließlich der Generierung interaktiver Formulare, Lesezeichen und durchsuchbarer Indizes. Sie bietet detaillierte Kontrollen für Seitenvorlagen, Kopf- und Fußzeilen sowie komplexes Rendering tabellarischer Daten. Zusätzliche Funktionen umfassen PDF-Verschlüsselung, Schrift-Subsetting zur Optimierung der Dateigröße und die Möglichkeit, externe PDF-Seiten als Vorlagen zu importieren. Das System integriert sich in PSR-3-konformes Logging, um interne Ereignisse und Ausführungsfehler zu verfolgen.

Streamdown is a streaming markdown renderer for React that transforms incoming markdown text into sanitized HTML in real time, handling incomplete blocks as they arrive. It parses GitHub-Flavored Markdown syntax including tables, task lists, and footnotes, and renders LaTeX math expressions using KaTeX, Mermaid diagrams as interactive SVGs, and code blocks with Shiki-based syntax highlighting supporting over 200 languages with dual light and dark themes. The renderer includes an XSS-safe HTML sanitizer that strips dangerous tags and validates URLs to prevent injection attacks. What distinguis

Heml ist ein Framework, das eine benutzerdefinierte Auszeichnungssprache und einen Compiler bereitstellt, um responsives HTML und CSS für eine konsistente Darstellung in E-Mail-Clients zu generieren. Es fungiert als System zur Transformation spezialisierter Markup-Strings in lieferbare E-Mail-Templates und zugehörige Metadaten. Das Projekt bietet ein Komponentensystem zur Definition wiederverwendbarer benutzerdefinierter Elemente und Stilregeln, um Designmuster zu standardisieren. Es enthält eine responsive Layout-Engine, die flexible Grid-Strukturen, Spalten und Zeilen in kompatible Tabellen mit fester Breite und fluide Layouts konvertiert. Das Toolset deckt E-Mail-Metadatenverwaltung für Betreffzeilen und Vorschautexte, validierungsbewusstes Rendering zur Erfassung struktureller Fehler sowie eine Entwicklungsumgebung mit Echtzeit-Dateiüberwachung und Browser-Vorschau ab.