gpucanvas renders 5,000 React nodes on WebGPU, agents can read the layout

A new browser-based infinite canvas appeared on GitHub this week. It is called gpucanvas and the author is berkantay. The repository held 254 stars on 14 November. It ranked 22nd on Trendshift's daily list that day. The project opened on 12 November, a day before the ranking.

The demo opens 5,000 React screens at once on a single canvas. Each screen is still real DOM, so clicks, typing and browser state keep working. Pan and zoom never redraw the DOM tree. The author recorded it running in Chrome on a MacBook Pro. The code is MIT licensed. The package installs from npm as gpucanvas.

What the canvas does

The README lists eight parts. The fast path uses WebGPU plus HTML-in-Canvas, a feature that lets a canvas draw live HTML. Each node is captured into a GPU texture. The canvas draws every texture in one batch. Where the browser lacks either feature, the code falls back to a CSS layer with the same API. The editor selects a node, drills in one layer at a time, moves and resizes with snapping guides. WGSL shaders, small GPU programs written in a web shader language, run on top of live components. The README names six: a glass lens, frost, shockwaves, glitch, VHS, and a custom slot. Any node saves as a PNG, pixel-diffs against an earlier version and plays back as a filmstrip. The canvas can dissolve or wipe one node out and another in while both stay live.

How an AI agent reads the canvas

The project calls this feature Agent view. A console call to agentView.describe returns a short JSON tree of the ids and positions of everything in view. It can also return an image of any region. The README's own words are that this is for an AI agent to read and point at. A separate marks layer draws arrows between elements, comment pins, notes and cursors. An agent can leave a mark on the canvas that stays attached to its element when a person zooms out.

The repository's GitHub topics are ai-agents, canvas, design-tools, editor, html-in-canvas, infinite-canvas, react, shaders, transitions, typescript, webgpu and wgsl.

What to check before adopting

The GPU path needs Chrome 157 or later. In Chrome 157 and later, WebGPU and HTML-in-Canvas are both on by default. Earlier Chromium browsers need a flag at chrome://flags/#canvas-draw-element. Firefox, Safari and every iPhone or iPad browser have no HTML-in-Canvas. They run the DOM fallback. The demo says so on the page. The DOM fallback starts at 1,000 screens on a computer and 250 on a phone. The author labels the project early at version 0.4 and writes that the API can still change.

The feature a new design-tool team will care about is the agent read view. The library pairs a GPU-drawn live-DOM canvas, an editor and the read view in one package. Most design-tool libraries do not publish that read view yet. A new design tool can try it today. A team releasing to the general public still needs a DOM path. Most browsers cannot run the GPU one yet.

Source

Primary source: berkantay/gpucanvas on GitHub. Live demo: berkantay.github.io/gpucanvas. Author's explainer: gpucanvas: 5,000 live React screens on a WebGPU infinite canvas.