Awesome GitHub RepositoriesWeb Component Renderers

Preact is a lightweight declarative user interface library designed for building high-performance web applications. It utilizes a component-based architecture where interfaces are defined as functional or class-based units, relying on a virtual DOM to perform efficient state reconciliation and updates. By prioritizing a minimal footprint, the library enables developers to create modular, predictable, and testable user interfaces while maintaining compatibility with standard browser APIs. The library distinguishes itself through a reactive state engine that leverages signals to track dependenc

lit-html is a JavaScript HTML templating library and reactive UI template engine. It uses tagged template literals to render dynamic HTML templates, focusing on efficient partial updates to the DOM to minimize browser reflows. The library functions as a rendering tool for web components and supports server-side rendering to improve initial page load speeds and search engine optimization. Its capabilities cover the development of lightweight custom HTML elements and the management of dynamic HTML rendering. It includes support for high-performance list rendering and the handling of asynchrono

Satori is a library that converts HTML and CSS markup into rasterized images. It functions as a server-side rendering engine designed to transform web layouts into visual assets at runtime, ensuring consistent representation across different platforms and social media sharing services. The engine distinguishes itself by utilizing a cross-platform flexbox implementation to calculate element positions and dimensions, mirroring the behavior of modern web browsers without requiring a full browser engine. It processes document structures through a virtual tree traversal and employs a specialized p

Emoji Mart is a set of web components and tools for adding a searchable, customizable emoji picker to web applications. It provides a picker component for browsing and selecting emojis by category, a rendering component for displaying individual emojis from shortcodes or IDs, and a programmatic search library for looking up emoji metadata by keyword, native character, or shortcode. The library structures emoji data into a precomputed index that supports real-time search filtering, category-based virtual scrolling, and skin tone modifiers. Custom emoji sets can be injected at runtime, merging

model-viewer ist eine Webkomponente, die verwendet wird, um dreidimensionale Modelle direkt in einem Webbrowser zu rendern und mit ihnen zu interagieren. Sie fungiert als glTF-3D-Modell-Renderer und interaktive WebGL-Komponente, die eine 3D-Rendering-Pipeline innerhalb eines benutzerdefinierten HTML-Elements kapselt. Das Projekt ermöglicht webbasierte Augmented Reality, wodurch 3D-Assets mithilfe einer Mobilgerätekamera in physische Umgebungen projiziert werden können. Es bietet Werkzeuge für Augmented-Reality-Projektion und die Erstellung von Erlebnissen durch die Kombination von 3D-Modellen mit Kamera-Tracking. Die Komponente unterstützt 3D-Produktvisualisierung und die Integration interaktiver Grafiken in Webseiten. Sie handhabt die Verarbeitung von glTF-Assets und nutzt Raycast-Interaktionslogik, um Benutzern die Manipulation und Betrachtung von Modellen aus verschiedenen Winkeln zu ermöglichen.

Wux ist ein komponentenbasiertes UI-Framework und eine Bibliothek, die speziell für den Aufbau von Benutzeroberflächen innerhalb der WeChat-Mini-Program-Plattform entwickelt wurde. Sie bietet eine Sammlung wiederverwendbarer und erweiterbarer Komponenten, die als geräteübergreifendes UI-Kit fungieren, um ein konsistentes Look-and-Feel über verschiedene Bildschirmgrößen und Geräte hinweg zu gewährleisten. Das Framework implementiert eine modulare Frontend-Komponentenarchitektur, die es Entwicklern ermöglicht, responsive Layouts unter Verwendung vorgestylter visueller Elemente zu erstellen. Es nutzt ein System anpassbarer Komponenten, um die visuelle Konsistenz innerhalb des WeChat-Ökosystems zu wahren. Das Projekt deckt eine Reihe architektonischer Fähigkeiten ab, einschließlich Prop-getriebener Konfiguration, CSS-Variablen-Theming für dynamisches Skinning und modularer Style-Injektion. Es verwendet zudem Wrapper für benutzerdefinierte Elemente, um Logik und Styles für eine verbesserte Wiederverwendbarkeit zu kapseln.

mcp-ui is a toolkit and framework for rendering interactive web components and managing communication between Model Context Protocol servers and host applications. It serves as a client interface library and a sandboxed web component renderer designed to move AI tool interactions beyond text-based outputs into visual interfaces. The project is distinguished by its secure rendering system, which utilizes a double-iframe architecture and a proxy layer to isolate guest user interfaces from the host application. It employs a JSON-RPC bridge to synchronize state and route user intents, ensuring bi

Dieses Projekt bietet ein Web-Component-Time-Element, das das Standard-HTML-Tag erweitert, um menschenlesbare relative Zeitstempel und Countdowns anzuzeigen. Es fungiert als Formatierer für relative Zeitangaben und Zeitdauer-Rechner, der Zeitstempel in lokalisierte Strings umwandelt, die sich automatisch im Browser aktualisieren. Das Tool ermöglicht dynamische Zeitstempel-Anzeigen, die basierend auf konfigurierbaren Schwellenwerten von relativen Phrasen zu absoluten Daten wechseln. Es umfasst Funktionen zur Einschränkung der Zeitform, wodurch Zeitstempel ausschließlich als vergangene oder zukünftige Daten angezeigt werden können, und unterstützt die präzise Formatierung von Zeitspannen über Jahre, Monate, Tage, Stunden, Minuten und Sekunden hinweg. Die Implementierung nutzt die native Browser-Internationalization-API für das Rendering von Daten und die Lokalisierung über spezifische IANA-Zeitzonen. Der Status wird über DOM-Attribute verwaltet und ein Intervall-Polling stellt sicher, dass die Zeitanzeigen aktuell bleiben, ohne dass ein Seiten-Refresh erforderlich ist.

This project is a static site generator and build-pipeline orchestrator that converts markdown files and custom components into production-ready static HTML pages. It functions as a markdown content manager, allowing website structure and text to be defined through the direct modification of flat files. The system utilizes a file-system based router to map the website URL structure directly to the directory layout of the source files. It also includes a web component UI library to embed encapsulated, interactive user interface elements into otherwise static pages. The project covers the broa

This repository serves as a comprehensive collection of reference implementations for the Remix web framework. It provides practical examples of full-stack web development, demonstrating how to build dynamic, server-rendered applications that bridge server-side logic with client-side interactivity. By leveraging a component-based architecture, these examples illustrate core patterns for managing data, routing, and user interfaces within a unified development environment. The collection highlights the framework's distinctive approach to web architecture, emphasizing server-side data loading an