Awesome GitHub RepositoriesDOM-Based Rendering

Brackets is an extensible JavaScript IDE and front-end code editor specifically designed for authoring HTML, CSS, and JavaScript. It serves as a web development text editor that provides a specialized environment for building websites. The editor is distinguished by its live preview capabilities, which render code changes in a browser in real time for immediate visual feedback. It further supports front-end workflows through inline style editing and the ability to synchronize code changes across multiple browser windows for cross-browser testing. The project includes a wide range of developm

CodeMirror is a browser-based code editor and extensible text editor framework. It functions as a programmable interface for rendering code and text with support for numerous programming languages, serving as a reusable component for web-based integrated development environments. The project provides a syntax highlighting engine that applies visual styles to text based on programming language rules. It includes a programming API and a CSS theming system to customize the editor's appearance and extend its functionality with custom behaviors. The framework covers capabilities for embedding tex

highlight.js is a JavaScript syntax highlighter and client-side code formatter that transforms plain text source code into highlighted HTML for web display. It provides syntax highlighting across a wide variety of programming languages. The library includes an automatic language detector that identifies the programming language of a code block to apply the correct highlighting rules without manual tagging. It is designed for web worker compatibility, allowing the highlighting process to run in background threads to prevent the browser interface from freezing during the processing of large vol

Ember.js is a structured JavaScript web framework designed for building scalable web applications. It utilizes a Model-View-Controller architectural pattern and incorporates a component-based UI library, a dependency injection framework, and a client-side routing engine. The framework distinguishes itself through a centralized registry for passing shared services across components and routes, alongside a routing system that maps URLs directly to templates and data models to manage navigation. Its broader capabilities include reactive state synchronization and computation memoization for UI p

FullCalendar is a framework-agnostic UI library and JavaScript calendar component designed for building interactive event scheduling interfaces. It provides tools for managing time-based data, including an integrated iCal feed parser for importing external calendar files and recurring schedules into a unified web view. The library features a system for event scheduling and management, enabling users to reschedule entries via drag-and-drop, adjust event durations by resizing, and highlight specific time ranges for selection. It supports multiple date views, such as month, week, day, and list f

jsoneditor is a web-based JSON editor component designed for viewing, editing, and formatting structured data. It provides a user interface for managing JSON through multiple rendering modes, including tree, form, and code views. The project is distinguished by its ability to process and visualize exceptionally large datasets, utilizing virtualized memory management to handle JSON files up to 500 MiB without crashing the browser. It also includes a specialized syntax repair tool to convert malformed text into valid JSON and a data transformer for filtering, sorting, and reshaping documents vi

Beautiful and accessible math in all browsers

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

Beautiful Web Type is a curated directory and interactive preview tool for open-source, SIL-licensed typefaces, designed to help web designers discover, evaluate, and select fonts for their projects. It serves as a central hub where each typeface is presented with a full specimen gallery, weight and style comparisons, and clear licensing information, all rendered as a static site for fast loading. The project distinguishes itself through its comprehensive in-browser inspection capabilities, allowing designers to explore OpenType features like ligatures and alternate glyphs with live before-an

css-doodle is a web component for creative coding that renders live CSS-generated patterns and animations directly in the browser. It creates generative art and visual patterns by applying CSS rules to a grid of cells, using the browser's native layout engine for positioning and styling. The component encapsulates its pattern canvas and styling within a custom element's shadow DOM, isolating it from page styles and enabling reusable instances. The tool distinguishes itself by driving pattern configuration through CSS custom properties, allowing dynamic style changes and real-time updates with

Hilo is an HTML5 game engine for building 2D games that run across browsers and devices. It renders graphics through Canvas, DOM, or WebGL backends, automatically selecting the best option for the target environment. The engine provides a complete game development solution with sprite, skeletal, and particle animation, along with a texture atlas system for efficient image loading and rendering. The framework distinguishes itself through its integration of the DragonBones skeletal animation engine, which drives bone-based character movement without frame-by-frame sprites, and its Chipmunk phys

Lettering.js est une bibliothèque de typographie JavaScript qui divise les chaînes de texte en éléments HTML granulaires. Elle enveloppe les caractères, mots et lignes individuels dans des balises pour permettre un contrôle CSS précis et un stylage visuel avancé. La bibliothèque inclut un système de wrapper de texte accessible qui maintient la compatibilité avec les lecteurs d'écran. Elle gère l'accessibilité du texte en reflétant le contenu original dans des labels ARIA sur les conteneurs et en cachant les éléments fragmentés aux technologies d'assistance. L'outil fournit des capacités pour la manipulation granulaire du texte et la décomposition basée sur le DOM. Ces mécanismes facilitent le stylage de la typographie web et la création d'animations de texte dynamiques via des transitions séquencées et des effets de mouvement.

pangu.js est un formateur d'espacement de texte CJK et un validateur de typographie multilingue. Il fonctionne comme un outil JavaScript qui insère des espaces entre les caractères chinois, japonais ou coréens et le texte alphanumérique pour améliorer la lisibilité. Le projet fournit un processeur de texte DOM pour navigateur qui injecte des espaces dans les éléments HTML et un outil de formatage de texte Node.js pour traiter les fichiers et chaînes locaux. Il inclut un validateur de typographie pour vérifier si le texte adhère à des règles d'espacement spécifiques entre les caractères CJK et les symboles demi-chasse. L'outil couvre le formatage de base et la séparation des langues mixtes tout en préservant la terminologie technique spécialisée. Il gère la typographie des pages web via une surveillance dynamique du contenu et le formatage des éléments DOM, ainsi que le formatage de fichiers locaux via un traitement synchrone et asynchrone.

react-syntax-highlighter is a React component that renders source code with language-specific syntax coloring. It wraps the Prism and Highlight.js syntax highlighting libraries, tokenizing source code using their language grammars and mapping each token to a styled React element. The component operates in two styling modes: inline style objects applied directly to each token, or CSS class names that can be themed via external stylesheets. This dual-mode approach makes the highlighter portable across environments where CSS class injection may or may not be available. The component is built aro

zTree_v3 est un plugin jQuery pour le rendu de données hiérarchiques sous forme d'arborescences interactives. Il fonctionne comme un visualiseur de données hiérarchiques et un composant d'arborescence qui affiche des structures de données imbriquées via des nœuds extensibles et repliables. Le projet inclut un gestionnaire d'arborescence en glisser-déposer pour réorganiser les nœuds hiérarchiques et prend en charge un composant d'arborescence de données asynchrone qui charge le contenu depuis des sources distantes pour améliorer la vitesse de chargement initiale. Il offre des capacités de visualisation de données hiérarchiques et de gestion d'arborescence pour interface web, incluant la possibilité d'effectuer des opérations CRUD (création, lecture, mise à jour, suppression) sur les nœuds. Le composant prend en charge la sélection d'éléments simples ou multiples via des cases à cocher ou des boutons radio et est conçu pour rendre de grands jeux de données sans ralentir l'interface.

This project is a comprehensive frontend engineering study guide designed to cover the essential technical concepts of modern web development. It serves as a multi-disciplinary reference for mastering the browser execution engine, the JavaScript language, and the structural fundamentals of the web. The collection provides deep dives into JavaScript language internals, including execution contexts, closures, prototypes, and the event loop. It further details web browser internals, focusing on the critical rendering path, DOM construction, and engine mechanics. The guide also covers web securi

diff2html is a Git diff visualization library that transforms unified diff text into structured HTML. It serves as a renderer for visualizing code changes in web browsers, providing components to inject stylized diff visualizations and collapsible file lists directly into web page elements. The library enables both side-by-side and line-by-line code comparisons. It includes a syntax highlighting diff viewer that applies language-specific color coding to source code based on file extensions or manual mappings. To maintain alignment during reviews, the project implements synchronized scrolling

Converse.js is an embeddable, self-hosted XMPP chat client that runs entirely in the browser. It communicates with XMPP servers using standard XML stanzas over WebSocket or BOSH transports, and provides end-to-end encryption through the OMEMO protocol with double ratchet algorithm and X3DH key exchange. The client is built on a plugin-based architecture that allows extending core functionality at runtime without modifying the client itself, and uses a DOM-based rendering approach with an event-driven message bus for internal coordination. The client manages message history through XEP-0313 Me

This project is a feature-rich data grid component designed for Vue applications. It provides a flexible interface for rendering, managing, and manipulating structured information, offering built-in support for essential tabular operations such as sorting, filtering, pagination, and row selection. The library distinguishes itself through its highly extensible architecture, which allows developers to override default rendering for cells, headers, and pagination controls using scoped slots. It supports complex data workflows by enabling hierarchical organization through collapsible row grouping

Cette bibliothèque est un composant React conçu pour le rendu de grilles de données haute performance. Elle fournit un framework structuré pour afficher de grands jeux de données en utilisant la virtualisation des lignes basée sur la fenêtre, ce qui garantit que seule la portion visible des données est rendue dans le modèle objet du document (DOM). Le composant se distingue par des capacités avancées de mise en page et de navigation, incluant la prise en charge native des en-têtes et colonnes fixes qui restent ancrés pendant le défilement. Les développeurs peuvent exercer un contrôle impératif sur la fenêtre d'affichage de la table pour naviguer vers des indices ou des décalages de pixels spécifiques, tout en gérant des états de grille complexes tels que la visibilité des colonnes, le tri et l'expansion des lignes via une configuration centralisée. La bibliothèque prend en charge un large éventail de fonctionnalités interactives, incluant le rendu de cellules personnalisé, l'épinglage de colonnes et la possibilité d'ajouter des lignes de résumé pour les données agrégées. Elle gère les jeux d'informations denses en offrant un alignement de colonne flexible, un contrôle de largeur et une troncature de texte, permettant la création de tables interactives qui répondent aux événements utilisateur comme les clics et les survol de souris.