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 este o bibliotecă JavaScript de tipografie care divide șirurile de text în elemente HTML granulare. Împachetează caracterele, cuvintele și liniile individuale în tag-uri pentru a permite un control CSS precis și stilizare vizuală avansată. Biblioteca include un sistem de împachetare a textului accesibil care menține compatibilitatea cu cititoarele de ecran. Gestionează accesibilitatea textului prin oglindirea conținutului original în etichete ARIA pe containere și ascunderea elementelor fragmentate de tehnologiile asistive. Instrumentul oferă capabilități pentru manipularea granulară a textului și descompunerea bazată pe DOM. Aceste mecanisme facilitează stilizarea tipografiei web și crearea de animații dinamice de text prin tranziții secvențiate și efecte de mișcare.

pangu.js is a CJK text spacing formatter and mixed-language typography validator. It functions as a JavaScript tool that inserts spaces between Chinese, Japanese, or Korean characters and alphanumeric text to improve readability. The project provides a browser DOM text processor that injects spacing into HTML elements and a Node.js text formatting tool for processing local files and strings. It includes a typography validator to verify if text adheres to specific spacing rules between CJK characters and half-width symbols. The tool covers core formatting and mixed language separation while p

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 este un plugin jQuery pentru redarea datelor ierarhice sub formă de vizualizări de tip arbore (tree views) interactive. Funcționează ca un vizualizator de date ierarhice și o componentă de tip arbore care afișează structuri de date imbricate prin noduri expandabile și colapsabile. Proiectul include un manager de tip "drag and drop" pentru reorganizarea nodurilor ierarhice și suportă o componentă de arbore de date asincronă care încarcă conținutul din surse externe pentru a îmbunătăți viteza inițială a paginii. Oferă capabilități pentru vizualizarea datelor ierarhice și gestionarea arborilor în interfețe web, inclusiv capacitatea de a efectua operațiuni de creare, citire, actualizare și ștergere (CRUD) asupra nodurilor. Componenta suportă selectarea elementelor unice sau multiple prin checkbox-uri sau radio button-uri și este concepută pentru a reda seturi mari de date fără a cauza lag în interfață.

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

Această bibliotecă este o componentă React concepută pentru randarea grid-urilor de date de înaltă performanță. Aceasta oferă un framework structurat pentru afișarea seturilor de date mari prin utilizarea virtualizării rândurilor bazată pe fereastră, care asigură că doar porțiunea vizibilă a datelor este randată în Document Object Model (DOM). Componenta se distinge prin capabilități avansate de layout și navigare, inclusiv suport nativ pentru headere și coloane sticky care rămân ancorate în timpul scroll-ului. Dezvoltatorii pot exercita control imperativ asupra viewport-ului tabelului pentru a naviga la indici specifici sau offset-uri de pixeli, gestionând în același timp stări complexe ale grid-ului, cum ar fi vizibilitatea coloanelor, sortarea și extinderea rândurilor printr-o configurație centralizată. Biblioteca suportă o gamă largă de funcționalități interactive, inclusiv randarea personalizată a celulelor, fixarea coloanelor (pinning) și capacitatea de a adăuga rânduri de sumar pentru date agregate. Gestionează seturi de informații dense oferind aliniere flexibilă a coloanelor, controlul lățimii și trunchierea textului, permițând crearea de tabele interactive care răspund la evenimentele utilizatorului, cum ar fi click-urile și hover-urile.

Acest proiect este o bibliotecă de tip data grid concepută pentru construirea de tabele complexe și interactive în aplicațiile React. Oferă o suită de componente modulare care permit afișarea informațiilor structurate, suportând atât randarea personalizată a celulelor, cât și configurații flexibile ale coloanelor pentru a acomoda diverse nevoi de prezentare a datelor. Biblioteca este construită pentru a gestiona seturi mari de date prin utilizarea randării virtualizate, care asigură performanțe ridicate prin procesarea doar a subsetului de rânduri vizibile în prezent în viewport. Se distinge prin suportul pentru înălțimi dinamice ale rândurilor și controlul programatic al scroll-ului, permițând navigarea precisă și ajustările de layout chiar și atunci când se gestionează mii de intrări de date. Dincolo de randarea de bază, biblioteca facilitează interacțiunea utilizatorului prin funcționalități precum coloane redimensionabile și scroll tactil. Dezvoltatorii pot defini câmpuri de date personalizate și pot încapsula logica complexă a celulelor în componente reutilizabile, asigurând formatarea și comportamentul consistent în diferite părți ale interfeței unei aplicații.