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 es una librería de tipografía en JavaScript que divide cadenas de texto en elementos HTML granulares. Envuelve caracteres, palabras y líneas individuales en etiquetas para permitir un control CSS preciso y un estilo visual avanzado. La librería incluye un sistema de envoltura de texto accesible que mantiene la compatibilidad con lectores de pantalla. Gestiona la accesibilidad del texto reflejando el contenido original en etiquetas ARIA en contenedores y ocultando elementos fragmentados de las tecnologías de asistencia. La herramienta proporciona capacidades para la manipulación granular de texto y la descomposición basada en DOM. Estos mecanismos facilitan el estilo de tipografía web y la creación de animaciones de texto dinámicas mediante transiciones secuenciadas y efectos de movimiento.

pangu.js es un formateador de espaciado de texto CJK y validador de tipografía en idiomas mixtos. Funciona como una herramienta de JavaScript que inserta espacios entre caracteres chinos, japoneses o coreanos y texto alfanumérico para mejorar la legibilidad. El proyecto proporciona un procesador de texto DOM para navegadores que inyecta espaciado en elementos HTML y una herramienta de formato de texto para Node.js para procesar archivos y cadenas locales. Incluye un validador de tipografía para verificar si el texto se adhiere a reglas de espaciado específicas entre caracteres CJK y símbolos de ancho medio. La herramienta cubre el formato central y la separación de idiomas mixtos mientras preserva la terminología técnica especializada. Maneja la tipografía de páginas web mediante la monitorización dinámica de contenido y el formato de elementos DOM, así como el formato de archivos locales mediante procesamiento síncrono y asíncrono.

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 es un plugin de jQuery para renderizar datos jerárquicos como vistas de árbol interactivas. Funciona como un visualizador de datos jerárquicos y componente de árbol que muestra estructuras de datos anidadas mediante nodos expandibles y colapsables. El proyecto incluye un gestor de árbol de arrastrar y soltar para reorganizar nodos jerárquicos y soporta un componente de árbol de datos asíncrono que carga contenido desde fuentes remotas para mejorar la velocidad de carga inicial. Proporciona capacidades para la visualización de datos jerárquicos y gestión de árboles en interfaces web, incluyendo la capacidad de realizar operaciones de creación, lectura, actualización y borrado (CRUD) en nodos del árbol. El componente soporta la selección de uno o varios elementos mediante casillas de verificación o botones de radio y está diseñado para renderizar grandes conjuntos de datos sin causar retrasos en la interfaz.

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

Esta biblioteca es un componente de React diseñado para renderizar cuadrículas de datos de alto rendimiento. Proporciona un framework estructurado para mostrar grandes conjuntos de datos utilizando virtualización de filas basada en ventanas, lo que asegura que solo la porción visible de los datos se renderice en el modelo de objetos del documento (DOM). El componente destaca por capacidades avanzadas de diseño y navegación, incluyendo soporte nativo para encabezados y columnas fijas que permanecen ancladas durante el desplazamiento. Los desarrolladores pueden ejercer control imperativo sobre el viewport de la tabla para navegar a índices o desplazamientos de píxeles específicos, mientras gestionan estados complejos de la cuadrícula como la visibilidad de columnas, la ordenación y la expansión de filas a través de una configuración centralizada. La biblioteca admite una amplia gama de funciones interactivas, incluyendo renderizado de celdas personalizado, fijación de columnas y la capacidad de añadir filas de resumen para datos agregados. Maneja conjuntos de información densos ofreciendo alineación de columnas flexible, control de ancho y truncamiento de texto, permitiendo la creación de tablas interactivas que responden a eventos del usuario como clics y pasadas de ratón.

Este proyecto es una librería de rejilla de datos (data grid) diseñada para construir tablas complejas e interactivas dentro de aplicaciones React. Proporciona una suite de componentes modulares que permiten la visualización de información estructurada, soportando tanto renderizado de celdas personalizado como configuraciones de columnas flexibles para acomodar diversas necesidades de presentación de datos. La librería está construida para manejar grandes datasets utilizando renderizado virtualizado, lo cual asegura un alto rendimiento al procesar solo el subconjunto de filas actualmente visibles dentro del viewport. Se distingue por su soporte para alturas de fila dinámicas y control de scroll programático, permitiendo una navegación y ajustes de layout precisos incluso cuando se gestionan miles de entradas de datos. Más allá del renderizado central, la librería facilita la interacción del usuario a través de características como columnas redimensionables y scroll táctil. Los desarrolladores pueden definir campos de datos personalizados y encapsular lógica de celdas compleja en componentes reutilizables, asegurando un formato y comportamiento consistentes a través de diferentes partes de la interfaz de una aplicación.