Canvas UI, an open‑source library, introduces GPU‑powered effects over live DOM using the experimental HTML‑in‑Canvas API.
Canvas UI, the open‑source JavaScript library, now ships 35 ready‑to‑use HTML‑in‑Canvas components that bring WebGL and WebGPU visual effects to live DOM elements.
What is HTML‑in‑Canvas?
HTML‑in‑Canvas is an experimental API that lets developers render standard HTML markup inside a canvas element, allowing the GPU to accelerate layout, styling, and animation while preserving DOM interactivity.
Key features of Canvas UI’s component set
- Pre‑built shaders for particle systems, fluid simulations, and post‑processing filters
- Support for both WebGL 1.0 and the newer WebGPU backend
- Automatic fallback to CPU rendering when GPU resources are unavailable
- Live DOM event handling so clicks, hover states, and CSS transitions remain functional
Each component is delivered as a lightweight module that can be imported via npm or a CDN, and the library includes a development console for tweaking shader parameters in real time.
Performance and compatibility
Benchmarks shared by the Canvas UI team show up to a 4× speed‑up for complex particle effects compared with pure CSS or JavaScript animations, while maintaining frame rates above 60 fps on modern browsers that support WebGPU. The library degrades gracefully on browsers that only implement WebGL, ensuring broad reach across desktop and mobile platforms.
Getting started
Developers can add Canvas UI to a project with a single command: npm install @canvas-ui/core. After initializing the library, a <canvas‑ui> tag is placed in the markup, and components are attached to existing DOM nodes using a simple JavaScript API.
The documentation includes live examples that demonstrate how to overlay a WebGL‑based particle burst on a button, apply a real‑time blur filter to an image, and render a 3D rotating cube behind a text block—all without leaving the normal HTML flow.
“Canvas UI makes it possible to blend GPU‑intensive graphics with the flexibility of the DOM, opening new possibilities for interactive web experiences.”
For a deeper dive into the library’s architecture and a full list of components, see the official release notes.