Introduction
Canvas UI is an open source library of creative components drawn on canvas. Real HTML, rendered inside a canvas element, with WebGL effects running over it. Copy, paste, and ship.
What is this?
A collection of canvas effects for the web: fluid simulations, shaders, and other visual experiments. They render over real HTML, so the content underneath stays interactive.
Most of the library is built on the html-in-canvas API, an experimental browser capability that lets a canvas element lay out and paint live DOM content. Your components become a texture that shaders can sample and distort, without screenshots, iframes, or DOM-to-image hacks. Some effects skip the API entirely and are pure 3D and shader work that runs everywhere today.
Framework agnostic
Every component ships in six flavors: React, Solid, Preact, Vue, Svelte, and vanilla TypeScript. Each one is a single standalone file, built on the same engine with the same options. Pick your framework once in the docs and every install command and code example follows.
You own the code
Components are distributed through a shadcn registry. Installing one drops the source file into your project, where you can read it, change it, and version it like anything else you wrote. There is no package to update and nothing to lock you in.
Browser support
The html-in-canvas API is an experimental Chrome feature, currently in origin trial. Components detect support at runtime and degrade gracefully: without it, your content renders as normal HTML and the parts of the effect that can still run, still do. Nothing breaks for users on other browsers.