Canvas UI, a new open-source component library created by React Bits developer David Haz, has launched with 35 visual components built around Chrome’s experimental HTML-in-Canvas API. The technology allows GPU-powered effects to be applied to live webpage content while retaining much of the interactivity associated with standard DOM elements.
Canvas UI Combines Live DOM Content With GPU Effects
Canvas UI includes 35 components covering effects such as pointer-controlled fluid simulations, fire, glass lenses, ASCII filters, VHS-style grain and particle reveals.
Each effect is available in a WebGL version using GLSL and a WebGPU implementation written with WGSL through vgpu. The library also provides wrappers for React, Solid, Preact, Vue and Svelte, alongside dependency-free vanilla TypeScript implementations.
The key technical distinction is how Canvas UI handles webpage content. Instead of converting an element into a static bitmap, most components use Chrome’s experimental HTML-in-Canvas functionality to place live DOM content inside a canvas.
The content is captured using drawElementImage, uploaded as a texture and then manipulated through shaders. Under this approach, text remains selectable, links can remain clickable and content continues to appear in the accessibility tree.
Components Are Installed as Source Code
Canvas UI is distributed through a shadcn-compatible registry rather than as a conventional software package. Developers can copy individual components directly into their projects using the shadcn command-line interface.
Because the source code becomes part of the developer’s own repository, updating a component requires running the installation command again and reconciling any local modifications.
Developers can also switch between WebGL and WebGPU implementations largely by replacing an installed component with its corresponding WebGPU registry version. The WebGPU option adds vgpu and @webgpu/types dependencies.
Full Functionality Currently Depends on Chrome
Canvas UI’s most distinctive HTML-in-Canvas features currently depend on experimental Chrome functionality.
The full experience requires Chrome with the canvas-draw-element flag enabled or an origin trial token. The trial covers Chrome versions 148 through 150, with tokens tied to individual domains.
On browsers where HTML-in-Canvas is unavailable, components can fall back to a standard GPU overlay or display the wrapped webpage content without the effect. Canvas UI’s 3D object components are designed to operate independently of the experimental API.
The project documentation also says changes in Chrome 150 involving texElementImage2D and copyElementImageToTexture do not require developers to migrate their Canvas UI implementations. Capture occurs through the 2D API, while texture uploads rely on established methods including texImage2D and copyExternalImageToTexture.
Performance and Accessibility Remain Key Considerations
The library has attracted attention from web-development communities for both its visual capabilities and implementation details.
Developer Flavio Copes highlighted several performance-oriented decisions in the Liquid component. It uses IntersectionObserver to stop its rendering loop while off-screen, respects the prefers-reduced-motion accessibility preference and releases textures, programs and event listeners when the component is unmounted.
Copes recommended using individual effects selectively rather than filling a page with multiple GPU-intensive visual elements. He also cautioned against deploying such effects in interfaces where clarity and usability are particularly important, including dashboards, checkout experiences and documentation websites.
Accessibility questions surrounding HTML-in-Canvas also remain under discussion within the Web Incubator Community Group, including how drawable DOM subtrees should be represented when their updated geometry is not available.
Browser Support Sparks Standardization Debate
Canvas UI’s reliance on a
Sophie MacKenzie is a contributor to CA News Ottawa, covering news, politics, business, technology, sport, entertainment, and lifestyle. She focuses on clear, accurate reporting and useful information that helps readers stay informed about current affairs and developments that shape their communities. Her work highlights relevant stories, emerging trends, and important issues, presenting them in a balanced, accessible, and reader-friendly manner.
