HTML-in-Canvas Lands: Introducing the First GPU‑Level UI Component Library

HTML‑in‑Canvas was created to solve the long‑standing problem of why DOM and Canvas cannot be fused: DOM excels at layout, text and interaction, while Canvas excels at GPU rendering, shader effects and 3D scenes. The goal is to let real HTML flow through the Canvas rendering pipeline, i.e., write UI with HTML and drive its presentation with the GPU.

Canvas UI – the first GPU‑level UI component library

David Haz, the creator of the popular React Bits animation library, has released an open‑source project called Canvas UI based on HTML‑in‑Canvas. Within a few days of launch the repository gathered over 2300 GitHub stars, indicating strong community interest.

Why Canvas alone is too low‑level for UI

When building a simple button with the DOM the browser automatically handles layout, font, interaction and state:

<button>
  Click me
</button>

With Canvas the same button requires manual drawing, positioning, event handling and state management:

ctx.fillStyle = "#333";
ctx.fillRect(20, 20, 120, 40);
ctx.fillStyle = "#fff";
ctx.fillText("Click me", 50, 45);
canvas.addEventListener("click", (e) => {
  // manually determine click area
});

All of these low‑level tasks need to be implemented by the developer.

Canvas UI abstracts the low‑level work

Canvas UI packages the complex parts—WebGL, shaders, Canvas rendering and animation logic—into reusable components, so developers do not need to write GLSL or set up WebGL manually; they simply compose components.

Component catalog

Currently Canvas UI offers more than 25 components, including:

Liquid : dynamic containers with fluid effects.

Glass : real‑time refraction, distortion and lighting.

Shatter : glass‑like breaking effects.

Blaze : flame effects.

VHS : retro CRT style with scanlines, noise and color offset.

Particle Reveal : particles that aggregate, disperse and re‑assemble content.

Previously such effects required a stack of Three.js, GLSL shaders and WebGL code; Canvas UI provides them as ready‑made components.

Installation and usage

Canvas UI follows a source‑code installation model similar to shadcn/ui. To add a component, run:

npx shadcn@latest add @canvas-ui/liquid-react

The component source is added directly to the project, allowing free modification, secondary development, and even AI‑driven optimization.

Framework support

Canvas UI is framework‑agnostic and provides bindings for:

React

Solid

Preact

Vue

Svelte

Vanilla JS

This means the underlying GPU capabilities belong to the web platform, and each framework is merely a different entry point.

Current limitations

Canvas UI relies on the experimental HTML‑in‑Canvas feature, which currently requires enabling the Chromium flag chrome://flags/#canvas-draw-element. In environments where the flag is unavailable, Canvas UI automatically degrades to a WebGL overlay mode.

Outlook

Canvas UI represents an early exploration of future Web UI that combines HTML, GPU, shaders and AI, moving web presentation closer to game‑engine capabilities. The project’s website is https://canvasui.dev and the source code lives at https://github.com/DavidHDev/canvas-ui.