DavidHDev/canvas-ui

An open source library of creative, framework-agnostic components drawn on canvas.
Fluid simulations, shader effects, and 3D scenes that run over your live, fully interactive interface. WebGL or WebGPU via vgpu, your choice.

canvasui.dev · Docs · Components · Playground · Installation · Rendering

Most components use the experimental HTML-in-canvas API to read and redraw your live DOM. Text stays selectable, links stay clickable, and the page becomes a texture that fire, fluid, and glass distort in real time.

Where it is not supported, components fall back to GPU overlays, so every visitor gets a working page.

Add a component with the shadcn CLI (run npx shadcn@latest init first if you have not):

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

Swap liquid for any component, react for solid, preact, vue, svelte, or vanilla. Source lands in components/canvasui/, yours to edit.

import { Liquid } from "@/components/canvasui/Liquid";

export default function Page() {
  return (
    <Liquid>
      <YourEntirePage />
    </Liquid>
  );
}

Most components wrap your content. The subtree stays live and interactive; the effect runs on top.

See the installation guide for manual setup.

Every effect ships in two renderer builds. The WebGL build is the default: raw WebGL2 and GLSL, zero dependencies except three for the object effects. The WebGPU build renders through vgpu with WGSL shaders, keeps the same props and public API, and installs with the -webgpu registry suffix:

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

WebGPU builds ship for all six frameworks. They need a browser with WebGPU, Chrome/Edge 113+, Safari 26+ / iOS 26, or Firefox 141+. If WebGPU is missing, the wrapped content renders unchanged. Details in the rendering guide.

Every component ships for all six frameworks in both renderer builds. Compare them in the playground.

Html-in-canvas needs Chrome with the chrome://flags/#canvas-draw-element flag. An origin trial token lifts that for your visitors. That is how canvasui.dev runs in a plain Chrome install. Details in the docs.

Chrome 150's changes to texElementImage2D() and copyElementImageToTexture() do not require a migration in Canvas UI. The HTML effects capture content with the 2D drawElementImage() API, then upload the canvas with standard texImage2D() (WebGL) or copyExternalImageToTexture() (WebGPU). Those upload methods keep their existing signatures. This also applies to the generated registry components for all six frameworks.

The later HTML-in-Canvas changes also affect capture markup and hit testing. Canvas UI synchronizes the captured element's geometry when the browser requires it, keeping scrolling, clicks, and cursor effects working in Chrome 154. It also selects content="drawable" and drawable when the newer API is available, while preserving support for layoutsubtree and automatic 2D geometry synchronization.

Both renderers follow pinch zoom through visualViewport, increasing capture and rendering resolution while preserving the HTML's position and interactions. The normal 2× device-pixel-ratio budget is multiplied by the zoom scale, subject to GPU limits, an 8192-pixel maximum dimension, and a 16-megapixel buffer budget. Particle Scroll uses plain HTML without a GPU overlay when HTML-in-Canvas is unavailable, including in Safari.

The registry is MCP ready, so your assistant can browse and install components:

npx shadcn@latest mcp init --client claude

Works with Claude Code, Cursor, VS Code, Codex, and OpenCode. Then just ask: "add the Liquid component from Canvas UI".

This repo holds the library source, the docs site (Next.js 16, Tailwind v4, on Cloudflare Workers), and the registry build.

npm install
npm run dev        # builds the registry, then starts next dev
npm run build      # production build
npm run deploy     # build and deploy to Cloudflare

Each component is plain TypeScript with thin framework wrappers. WebGL builds use raw WebGL2 and GLSL. WebGPU builds use vgpu and WGSL. Nothing depends on another Canvas UI component, and each engine defines its own props.

Issues and pull requests welcome. See CONTRIBUTING.md.

MIT + Commons Clause. Free in your own projects, commercial or not. The Commons Clause only restricts selling the library itself.