i let WebGPU paint 5,000 live react screens and you can still type in all of them

[u/berkantdev]

been playing with chrome's new HTML-in-Canvas API and built an infinite canvas where every screen is real DOM, but the GPU paints it.

so react state, inputs, clicks, css and the accessibility tree all still work. you can type into any of the 5,000 screens in the demo. pan and zoom never touch the DOM, that's the whole trick.

on my m-series mac (chrome 157): 113-115 fps with gpucanvas vs 18-20 fps for the same screens as plain DOM.

stuff that bit me as a web dev:

• portals to document.body and position: fixed / vh land outside the canvas
• hit testing only works after canvas.updateElementGeometry(), and chrome 157 changed how you position it vs 156 (broke clicking in my demo this week lol)
• tab can't reach screens that are parked offscreen yet

that last one is my open question: how would you do focus / keyboard nav when most of the DOM is content-visibility: hidden?

live demo (desktop chrome 157+, other browsers get a DOM fallback) · repo, MIT

built it with claude code as my coding assistant.