# gpucanvas: Put Live DOM Nodes on a WebGPU Infinite Canvas

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/berkantay-gpucanvas
Generated for open source discovery and AI-assisted research.

gpucanvas uses WebGPU and Chrome’s HTML-in-Canvas to render live DOM and React nodes on an infinite canvas, with editing, shader effects and agent-readable views. It falls back to a CSS-transformed DOM canvas where that GPU path is unavailable.

GitHub: https://github.com/berkantay/gpucanvas
OSRepos URL: https://osrepos.com/repo/berkantay-gpucanvas

## Summary

gpucanvas uses WebGPU and Chrome’s HTML-in-Canvas to render live DOM and React nodes on an infinite canvas, with editing, shader effects and agent-readable views. It falls back to a CSS-transformed DOM canvas where that GPU path is unavailable.

## Topics

- typescript
- react
- library
- web-development
- webgpu
- infinite-canvas
- shader-effects

## Repository Information

Last analyzed by OSRepos: Sat Nov 14 2026 15:26:43 GMT+0000 (Western European Standard Time)
Detail views: 1
GitHub clicks: 1

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## 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.

## Our Take

This is a promising but very new and rapidly changing library, with active releases and commits but development concentrated in one contributor.

**Good fit if:**
- Your product needs an interactive canvas of live DOM or React content and can use the Chrome WebGPU path or accept the DOM fallback.
- You are comfortable adopting an early API and can work with TypeScript and Node.js.
- You want GPU-based effects or agent-facing descriptions and marks alongside canvas editing.

**Look elsewhere if:**
- You need a mature project with contributions and maintenance distributed across a team.
- Your core workflow depends on snapshots or agent image capture in browsers that use the DOM fallback.
- You need keyboard and accessibility behavior across parked pages already addressed, since the README lists cross-page focus as future work.

## Project Health

| Signal | Value |
|---|---|
| Status | **New**: less than six months old and changing fast |
| Last commit | 2026-11-14 (today) |
| Commits, last 90 days | 45 |
| Releases, last 12 months | 7 (latest v0.4.3, 2026-11-14) |
| Contributors | 1 |
| Issues closed, last 90 days | 0 |
| Pull requests merged, last 90 days | 0 |
| Project age | 1 days |

Checked on 2026-11-14 with the GitHub API.

## Project Facts

- Language: TypeScript
- License: MIT
- Stars: 350
- Forks: 23
- Topics: ai-agents, canvas, design-tools, editor, html-in-canvas, infinite-canvas, react, shaders
- Website: https://berkantay.github.io/gpucanvas/
- Archived: no

## What You Need

Detected in the repository:

- Node.js (from package.json)
- Automated checks on GitHub Actions

## Getting Started

Install the package:

```sh
npm install gpucanvas
```

See the [README](https://github.com/berkantay/gpucanvas#readme) for the React example, API details and demo requirements. Try the [live demo](https://berkantay.github.io/gpucanvas/).

## License in Plain Words

**MIT** (permissive).

- Commercial use: yes
- Modify and redistribute: yes
- You must keep: the copyright and license notice
- Share your changes: no

A summary, not legal advice: the LICENSE file is what applies.

## Alternatives

- [tldraw](https://osrepos.com/repo/tldraw-tldraw): tldraw provides drawing and diagramming primitives for custom infinite-canvas apps, while gpucanvas places live DOM and React nodes on a canvas.

| Project | Language | License | Stars | Status |
|---|---|---|---|---|
| **gpucanvas** | TypeScript | MIT | 350 | New |
| [tldraw](https://osrepos.com/repo/tldraw-tldraw) | TypeScript | Other | 50.7k | Active |

## 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.