Awesome GitHub RepositoriesImmediate Mode Canvas Renderers

Chart.js is a declarative data visualization framework that renders interactive, responsive charts directly onto an HTML5 canvas element. It functions as a configuration-driven engine, transforming structured datasets into complex graphical representations by merging user-defined settings with global defaults. The library utilizes a high-performance rendering pipeline that executes drawing commands during each animation frame to maintain smooth visual feedback. The project distinguishes itself through a modular, extensible architecture that allows developers to register custom scales, control

particles.js is a JavaScript particle animation library and visual effects engine used to create interactive, canvas-based simulations for web interfaces. It enables the generation of dynamic background animations and networked visual effects through coordinate-based particle movements. The library features a system for drawing connecting lines between particles based on proximity to create network-style visualizations. It includes mechanisms for mapping mouse movements and click events to specific particle behaviors, such as attraction or repulsion. Users can configure particle density, opa

GSAP is a comprehensive JavaScript animation library designed for orchestrating complex motion sequences and interactive user interfaces. It provides a robust property-interpolation engine that calculates intermediate values for CSS styles, attributes, and numeric properties, enabling smooth visual transitions across web elements. The framework is built on a core architecture that manages animation lifecycles, timeline-based sequence orchestration, and virtual property interception to ensure precise control over motion. The library distinguishes itself through a modular, plugin-based extensib

p5.js is a JavaScript creative coding library and generative art framework. It serves as a web-based graphics engine and a high-level HTML5 Canvas wrapper designed to produce algorithmic imagery and responsive audio-visual experiences. The project provides a simplified sketching API for rendering 2D and 3D graphics directly in a web browser. It enables the creation of interactive animations, generative art, and digital experiences that respond to user input. The library covers a range of applications including interactive data visualization, browser-based multimedia art, and educational prog

Rough is a graphics library designed to render shapes and paths with a hand-drawn, sketchy aesthetic on web pages. It functions as a generator for informal visual styles, allowing developers to create illustrations and diagrams that mimic the appearance of human-drawn sketches. The library distinguishes itself by using procedural rendering to calculate randomized offsets for lines and curves, simulating natural imperfections. It employs deterministic seeding to ensure that these variations remain consistent across renders, while providing hachure-based texture filling to apply stylized shadin

Motion Canvas is a TypeScript-based framework for creating programmatic animations and motion graphics. It functions as a code-based animation tool that allows developers to define visual transitions, element properties, and timing through scripts rather than traditional timeline-based interfaces. The library renders frame-accurate motion graphics directly in the browser using web technologies. The project utilizes a virtual scene graph to manage visual objects and their transformations, which are then rendered to an HTML5 canvas. It employs generator functions to sequence animations and reac

Lightweight Charts is a specialized library for rendering interactive time-series financial data visualizations within web applications. It provides a high-performance, responsive component designed to display historical and live market trends through various graphical formats, including candlesticks, histograms, and line series. The library distinguishes itself through a canvas-based rendering engine that decouples visual representation from raw data, enabling efficient updates and real-time monitoring of large datasets. It includes built-in support for accessibility, ensuring that interacti

Cytoscape.js is a JavaScript library designed for rendering interactive node-link diagrams and analyzing complex network structures directly within a web browser. It functions as a comprehensive framework for building responsive graph interfaces, providing the tools necessary to visualize relational datasets and manage hierarchical data models. The library distinguishes itself through a modular architecture that supports custom layout algorithms and rendering styles, allowing for the integration of physics-based engines to organize complex network structures automatically. It utilizes an even

Zdog is a JavaScript graphics library designed for rendering pseudo-three-dimensional geometric models within web browser environments. It functions as a lightweight engine that draws flat, vector-based shapes onto HTML5 canvas or SVG elements by utilizing a scene graph to manage object relationships and spatial transformations. The library distinguishes itself through a unique approach to volumetric modeling, where three-dimensional depth is simulated on flat shapes by dynamically adjusting stroke thickness. This technique allows for the creation of rounded, plump visual effects without the

uPlot 是一个高性能 Canvas 时间序列图表库，旨在以高帧率渲染数百万个数据点。它作为一个高频数据可视化工具和实时数据流绘图仪，利用 HTML5 Canvas API 在绘制大型时间数据集时保持响应性。 该项目的独特之处在于其基于插件的可视化框架，允许自定义渲染器创建专门的视觉效果，如热力图和箱线图。它还作为一个交互式金融图表工具，专门支持 OHLC 图表、柱状图和面积带。 该库涵盖了广泛的功能，包括具有线性、对数和均匀刻度的轴管理，以及通过缩放、平移和跨多个链接视图的同步光标进行的交互式导航。它提供了用于动态数据流式传输的滑动窗口缓冲系统，以及用于管理缺失数据和时区感知处理的工具。附加功能包括堆叠图表聚合以及将可视化导出为静态图像格式的能力。

react-native-skia is a cross-platform graphics framework that provides a high-performance 2D graphics engine for rendering shapes, paths, and images. It functions as a vector graphics engine and UI animation toolkit, allowing for hardware-accelerated visuals across mobile and web platforms. The project is distinguished by its integration of the Skia 2D graphics library, enabling a shader and filter pipeline for complex pixel-level effects. It supports the rendering of Lottie animations exported from After Effects and the execution of animations directly on the UI thread to maintain fluid moti

billboard.js is a JavaScript charting library built on D3.js that renders interactive data visualizations from a single declarative configuration object. It supports a wide range of chart types including bar, line, pie, scatter, area, spline, step, candlestick, funnel, gauge, heatmap, radar, polar, treemap, bubble, donut, and sparkline charts, and can overlay multiple chart types within a single visualization. The library offers an opt-in Canvas rendering mode for improved performance with large datasets and high-density axis displays, alongside its standard SVG-based rendering. The library d

XCL-Charts 是一个原生 Android 图表库，设计为用于渲染复杂、交互式数据可视化的高性能图形引擎。它提供了一个全面的框架，用于直接在原生 Canvas 上绘制各种 2D 和 3D 图表，从而能够为移动应用程序创建自定义用户界面组件。 该库通过处理坐标映射和面向对象组合的稳健架构脱颖而出，允许构建复杂的、多轴布局。它通过手势驱动的转换（包括缩放和平移）支持实时数据探索，并利用基于状态的插值在数据更新时提供流畅的动画过渡。 除了核心渲染功能外，该项目还提供了对视觉美学和布局管理的精细控制。用户可以组合多种图表类型、参考线和复杂数据层，以构建详细的仪表板和交互式分析界面。该库作为原生组件分发，提供对绘图原语的直接访问，以实现定制的视觉样式。

This project is a high-performance library for rendering interactive, force-directed network visualizations within an HTML5 canvas. It provides a physics-based engine that calculates node positioning through simulated attraction and repulsion forces, enabling the representation of complex relational data structures as dynamic, navigable graphs. The library distinguishes itself through its ability to handle large-scale datasets containing thousands of nodes and links while maintaining interface responsiveness. It offers granular control over the visual representation of data, allowing for cust

This project is a browser-based arcade game engine implemented in JavaScript. It provides a foundational framework for developing grid-based maze games, utilizing HTML5 canvas for immediate-mode rendering and structured data objects to define level layouts and item placements. The engine manages core interactive mechanics, including player navigation, collision detection, and real-time pathfinding for computer-controlled entities. It incorporates a state-machine game loop to handle transitions between active gameplay, paused states, and level progression, while tracking scores and item collec

Tower Game is a browser-based JavaScript engine designed for building physics-driven stacking simulations. It provides a framework for developing interactive arcade-style challenges where players align blocks to build structures, with core systems that manage collision logic, health tracking, and precision-based scoring. The engine distinguishes itself through a modular architecture that allows for deep customization of gameplay mechanics. Developers can inject custom functions to override default movement speeds, oscillation angles, and scoring triggers at runtime. Additionally, the system s

Canvas-datagrid is a web component designed to render and manage large-scale datasets within a browser-based spreadsheet interface. By utilizing an immediate-mode rendering approach on a single canvas element, it bypasses the performance limitations associated with traditional document object model structures, allowing for the display of millions of rows and columns without the need for pagination. The component distinguishes itself through its ability to handle complex, nested data structures by flattening hierarchical relationships into a single coordinate system. It incorporates a virtual

这是一个专为 React 应用设计的高性能数据网格组件。它提供了一个声明式框架，通过使用基于 Canvas 的绘图引擎而非传统的 DOM 节点，来渲染大规模数据集和复杂的表格结构。 该库的核心优势在于其窗口化虚拟化引擎，通过仅渲染网格的可见部分来保持恒定的内存占用。它通过基于坐标的映射将指针交互转换为特定的单元格引用，并支持将外部应用状态和主题直接注入 Canvas 环境，以确保自定义单元格渲染器之间的数据访问一致性。 该网格支持复杂的布局配置，包括冻结行和列、合并单元格以及可调整大小的表头。它还提供了将信息组织成层级化树状结构的工具，以表示嵌套的数据关系。该库以一组 React 原语的形式分发，可集成到现有的 Web 应用中，用于管理复杂数据界面的滚动状态和布局协调。