gpucanvas: Put Live DOM Nodes on a WebGPU Infinite Canvas

Overview

gpucanvas is a TypeScript library built on WebGPU and Chrome’s HTML-in-Canvas feature. It puts live DOM or React nodes on an infinite canvas, aiming to keep large collections of interactive screens responsive while allowing users to pan and zoom without transforming the DOM on every frame. The GPU rendering path is available in Chrome 157 and later on computers; other browsers and older Chromium builds use a CSS-transformed DOM fallback.

The project combines canvas rendering with editor and prototyping tools: users can select and transform elements, apply WGSL shader effects, capture snapshots, and expose a structured view of the canvas for AI agents. It is an early-stage library, not a standalone design application.

Key Features

• Render live DOM or React nodes with WebGPU, while keeping their state, events, CSS and accessibility behavior.
• Provide an infinite canvas with panning, zooming, selection, movement, resizing and snapping guides.
• Apply built-in or custom WGSL shader effects and animate node transitions.
• Capture node snapshots, compare images and record a filmstrip of changes.
• Expose visible content as a JSON tree and capture elements or canvas regions for agent workflows.
• Add arrows, pins, notes and cursors that track the canvas and attached elements.
• Fall back to a CSS-transformed DOM canvas when HTML-in-Canvas is unavailable, with some GPU-only features unavailable.

Use Cases

• A frontend team can arrange live React screens into a navigable prototype while retaining working controls and state.
• A design-tool developer can embed canvas editing, selection and resize interactions around existing DOM components.
• An AI-agent developer can provide an agent with a structured view and image captures of a screen, then use marks to indicate elements.
• A team building visual review tools can compare screen snapshots, track changes and attach comments to elements.

Getting Started

Install the package:

npm install gpucanvas

See the README for the React example, API details and demo requirements. Try the live demo.

Alternatives

• tldraw: tldraw provides drawing and diagramming primitives for custom infinite-canvas apps, while gpucanvas places live DOM and React nodes on a canvas.

Considerations

• The GPU renderer depends on WebGPU and HTML-in-Canvas. The README identifies Chrome 157 or later on computers as the default supported path; other browsers and older Chromium builds use the DOM fallback. Snapshots and agent image capture require the GPU backend.
• The project describes itself as early, and its API may change. Recent development is active, but the supplied health data shows that the work is concentrated in one contributor, with no recent issue closures or merged pull requests recorded.
• The README identifies a keyboard and accessibility limitation: parked pages use content-visibility: hidden, so Tab skips their nodes. A focused node stays live, but moving focus across pages still needs a focus model.
• The supplied requirements list Node.js and CI, but no tests. Teams should account for their own validation when integrating or upgrading the library.