berkantay/gpucanvas

What it does

gpucanvas places live DOM or React nodes on an infinite canvas and draws them with WebGPU. Nodes remain real elements: state, events, CSS and accessibility keep working, while panning and zooming no longer touch the DOM layout on every frame. It targets design tools, dashboards and agent-driven interfaces that need thousands of live screens on one surface.

The library groups nodes into pages, rasterizes them into a texture atlas, and renders visible nodes in one instanced draw call. A fallback backend uses a CSS-transformed container with the same API when WebGPU or HTML-in-Canvas is unavailable.

Beyond rendering, it provides:

• An editor for selecting, drilling into, moving and resizing elements with snapping guides, available through bindEditor and the React useEditor hook.
• WGSL shader effects such as glass, frost, shockwave, glitch and VHS, plus defineEffect for custom shaders.
• Snapshots, pixel diffs and filmstrip history for any node.
• Transitions such as dissolve, wipe and fade between live nodes.
• An agent view that serializes what is in view as JSON and captures images of elements or regions.
• Marks (arrows, pins, notes, cursors) drawn above the canvas and attached to elements.

Quick start

The demo runs in Chrome 157 or later. The GPU path requires enabling chrome://flags/#canvas-draw-element and relaunching Chrome; without it, the demo uses the DOM fallback with 1,000 screens. Open the live demo and click a screen to select it, double-click to go deeper, or press b to run the benchmark tour. The toolbar switches shader effects and interaction modes.

To use the package in a React project:

npm install gpucanvas

import { GpuCanvas, CanvasNode } from 'gpucanvas/react';

<GpuCanvas style={{ width: '100vw', height: '100vh' }}>
  {cards.map((card) => (
    <CanvasNode key={card.id} x={card.x} y={card.y} width={240} height={150}>
      <Card {...card} />
    </CanvasNode>
  ))}
</GpuCanvas>;

This is the same snippet shown in the React usage section. To run the demo locally:

bun install
bun run dev        # http://localhost:5199/?mode=gpu&n=10000

The development mode accepts mode=auto|gpu|dom, and n sets the number of screens.

Constraints

• The GPU backend depends on WebGPU and HTML-in-Canvas, which at the time of writing is a Chrome 157 flag. Other browsers and configurations fall back to the CSS-transformed DOM backend.
• Snapshots, capture and the full shader path require the GPU backend; the DOM backend rejects snapshots and approximates effects with CSS filters.
• The project is at version 0.4, and the API may change.
• Component-aware picking uses React internal fibers; production builds usually minify component names, so mark components with custom attributes if names matter.
• Parked nodes use content-visibility: hidden, so Tab skips them. Keyboard focus across pages is listed as an open problem.
• The benchmark figures are single runs on an M-series Mac in Chrome 157, so differences of a few percent are within noise.
• The license is MIT.

HotRepo's take

The repository entered HotRepo's new-project board for TypeScript with 107 stars and 5 forks in its first recorded window (November 12–13, 2026). That is a single early snapshot, not evidence of sustained adoption. The interesting part is the approach: rather than reimplementing a UI toolkit on canvas, it keeps the DOM as the source of truth and adds a GPU presentation and tooling layer around it. The README also documents Chrome 157 behavior that differs from the WICG explainer, which is useful for anyone evaluating HTML-in-Canvas today.