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

Un thème Material Design responsive pour les blogs statiques construits avec le framework Hexo. Il fonctionne comme un système de mise en page complet qui transforme les fichiers markdown en pages HTML stylisées, offrant un environnement spécialisé pour la documentation technique et le blogging personnel. Le thème se caractérise par une approche axée sur les données pour la visualisation du contenu, utilisant des graphiques radar pour les catégories et des nuages de mots pour les tags afin de représenter les métadonnées des articles. Il se distingue par une architecture chronologique pour les archives du blog. Le projet couvre un large éventail de capacités de publication technique, incluant le rendu de formules mathématiques, la coloration syntaxique pour les blocs de code et la génération de tables des matières adaptatives. Il inclut des outils de personnalisation via des pages d'accueil dynamiques, des menus de navigation multi-niveaux et des pages de profil détaillées. L'engagement des lecteurs est soutenu par une recherche intégrée, des articles protégés par mot de passe et l'intégration de systèmes de commentaires et de chat tiers. La performance est gérée via le routage des ressources CDN et le préchargement des assets, tandis que la visibilité SEO est gérée via des métadonnées configurables.

Lovelace Mushroom est un ensemble de cartes personnalisées et une bibliothèque d'interface utilisateur pour Home Assistant conçue pour afficher et contrôler des entités d'appareils domotiques. Elle fournit un framework pour construire des tableaux de bord visuels épurés et des interfaces de contrôle pour gérer le matériel connecté. La bibliothèque inclut un framework de thème qui permet l'application de palettes de couleurs personnalisées et l'utilisation de modes clair ou sombre. Les utilisateurs peuvent configurer l'apparence des cartes et les thèmes visuels en utilisant des sélecteurs intégrés et un éditeur visuel pour éviter la modification manuelle du code source.

Kraken est un framework d'interface utilisateur multiplateforme et un runtime de standards web conçu pour construire des applications natives en utilisant le balisage et le style web standard. Il utilise un moteur de rendu basé sur Flutter pour traiter le HTML et le CSS, produisant des interfaces utilisateur visuellement cohérentes sur les plateformes mobiles et de bureau. Le système se distingue en compilant le runtime en code machine et en employant un pipeline de rastérisation synchrone pour garantir que les animations et le défilement correspondent à la fluidité des applications natives. Il intègre en outre des composants natifs haute performance directement dans un arbre d'objets de document standard web, permettant la définition de balises HTML personnalisées soutenues par des widgets natifs. Le framework couvre une large surface de capacités, y compris l'exécution d'arbres de composants JavaScript, la synchronisation d'état global et local, et la gestion standardisée des gestes. Il fournit également un système basé sur des plugins pour étendre l'API avec des fonctions backend personnalisées et prend en charge l'intégration avec divers frameworks frontend. Les flux de travail des développeurs sont soutenus par l'intégration avec le protocole Chrome DevTools, permettant l'inspection de l'état de l'application et la modification du style de l'interface utilisateur.

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.

Derby est un framework MVC isomorphe et un moteur de synchronisation de données en temps réel conçu pour créer des applications collaboratives. Il fonctionne comme une bibliothèque de liaison de données bidirectionnelle et un moteur de template qui partage une base de code unique entre Node.js et le navigateur pour synchroniser l'état entre les clients et les serveurs. Le framework se distingue par l'utilisation de la transformation opérationnelle pour résoudre automatiquement les conflits de données, permettant l'édition partagée en temps réel et la collaboration multi-utilisateurs. Il emploie un modèle de mutation d'état différentiel pour minimiser les mises à jour en effectuant des vérifications d'égalité profonde, garantissant que seules les valeurs modifiées sont propagées. La plateforme couvre un large éventail de capacités, incluant la gestion d'état réactive, le routage isomorphe et le développement de composants d'interface modulaires. Elle fournit des outils pour gérer les chemins de données imbriqués, exécuter le rendu isomorphe pour des chargements initiaux rapides et s'intégrer avec des middlewares serveur. Le système est implémenté en utilisant TypeScript.

mPDF est une bibliothèque PHP qui transforme du HTML et CSS encodés en UTF-8 en documents PDF formatés. Elle sert de moteur de génération de PDF et d'architecte de documents capable de convertir des pages web et des formulaires HTML en fichiers professionnels. Le projet se distingue par ses capacités de rendu multilingue, offrant un support complet pour le texte bidirectionnel, les scripts de droite à gauche et les langues CJK en utilisant l'incorporation de polices Unicode et le traitement de mise en page OpenType. Il permet également une conception professionnelle prête pour l'impression grâce à une modélisation des couleurs avancée en CMJN, un dimensionnement précis des pages et la conformité aux standards d'archivage PDF/A et PDF/X. La bibliothèque couvre un large éventail de fonctionnalités de mise en page et d'interactivité, y compris la génération de formulaires interactifs, de signets et d'index consultables. Elle fournit des contrôles détaillés pour les modèles de page, les en-têtes et pieds de page, et le rendu de données tabulaires complexes. Les capacités supplémentaires incluent le chiffrement PDF, le sous-ensemble de polices pour l'optimisation de la taille des fichiers et la possibilité d'importer des pages PDF externes comme modèles. Le système s'intègre avec la journalisation conforme à PSR-3 pour suivre les événements internes et les erreurs d'exécution.

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 est un framework fournissant un langage de balisage personnalisé et un compilateur conçus pour générer du HTML et du CSS responsifs pour un rendu cohérent à travers les clients email. Il fonctionne comme un système pour transformer des chaînes de balisage spécialisées en modèles d'email livrables et métadonnées associées. Le projet propose un système de composants pour définir des éléments personnalisés réutilisables et des règles de style afin de standardiser les modèles de conception. Il inclut un moteur de mise en page responsive qui convertit les structures de grille flexibles, les colonnes et les lignes en tableaux à largeur fixe et mises en page fluides compatibles. L'ensemble d'outils couvre la gestion des métadonnées d'email pour les objets et le texte de prévisualisation, le rendu sensible à la validation pour capturer les erreurs structurelles, et un environnement de développement avec surveillance de fichiers en temps réel et prévisualisations dans le navigateur.