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 is a JavaScript typography library that divides text strings into granular HTML elements. It wraps individual characters, words, and lines in tags to enable precise CSS control and advanced visual styling. The library includes an accessible text wrapper system that maintains screen reader compatibility. It manages text accessibility by mirroring the original content into ARIA labels on containers and hiding fragmented elements from assistive technologies. The tool provides capabilities for granular text manipulation and DOM-based decomposition. These mechanisms facilitate web ty

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 هو إضافة jQuery لعرض البيانات الهرمية كعرض شجري تفاعلي. يعمل كمصور للبيانات الهرمية ومكون شجري يعرض هياكل البيانات المتداخلة من خلال عقد قابلة للتوسيع والطي. يتضمن المشروع مديراً للشجرة يدعم السحب والإفلات لإعادة تنظيم العقد الهرمية، ويدعم مكون شجرة بيانات غير متزامن يقوم بتحميل المحتوى من مصادر بعيدة لتحسين سرعة تحميل الصفحة الأولية. يوفر قدرات لتصور البيانات الهرمية وإدارة شجرة واجهة الويب، بما في ذلك القدرة على تنفيذ عمليات الإنشاء والقراءة والتحديث والحذف (CRUD) على عقد الشجرة. يدعم المكون اختيار عنصر واحد أو عناصر متعددة عبر مربعات الاختيار أو أزرار الراديو، وهو مصمم لعرض مجموعات البيانات الكبيرة دون التسبب في بطء الواجهة.

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

هذه المكتبة عبارة عن مكون React مصمم لعرض شبكات البيانات عالية الأداء. توفر إطار عمل منظماً لعرض مجموعات البيانات الكبيرة باستخدام افتراضية الصفوف القائمة على النافذة، مما يضمن عرض الجزء المرئي فقط من البيانات في نموذج كائن المستند. يتميز المكون بقدرات تخطيط وتنقل متقدمة، بما في ذلك دعم أصلي للرؤوس والأعمدة الثابتة التي تظل مثبتة أثناء التمرير. يمكن للمطورين ممارسة تحكم إلزامي على منفذ عرض الجدول للانتقال إلى فهارس أو إزاحات بكسل محددة، مع إدارة حالات الشبكة المعقدة مثل رؤية الأعمدة، والفرز، وتوسيع الصفوف من خلال تكوين مركزي. تدعم المكتبة مجموعة واسعة من الميزات التفاعلية، بما في ذلك عرض الخلايا المخصص، وتثبيت الأعمدة، والقدرة على إلحاق صفوف ملخصة للبيانات المجمعة. تتعامل المكتبة مع مجموعات المعلومات الكثيفة من خلال توفير محاذاة مرنة للأعمدة، والتحكم في العرض، واقتطاع النص، مما يسمح بإنشاء جداول تفاعلية تستجيب لأحداث المستخدم مثل النقرات والتحويم.

This project is a data grid library designed for building complex, interactive tables within React applications. It provides a suite of modular components that enable the display of structured information, supporting both custom cell rendering and flexible column configurations to accommodate diverse data presentation needs. The library is built to handle large datasets by utilizing virtualized rendering, which ensures high performance by only processing the subset of rows currently visible within the viewport. It distinguishes itself through support for dynamic row heights and programmatic s