canvas ui anywhere – the canvasui.dev playground on any live page

28 effects · the real page · props for your agent

try a landing effect on the real site before anyone writes a line of it.

canvasui.dev shows its effects on a mock page. This extension puts the same playground over the page you have open: the same 28 effects, the same sliders, presets and defaults, running on your own landing, a competitor's site or a draft on localhost. The page stays alive under the effect. When a setting looks right, one button copies the component props as JSON.

01 · panel

the playground sidebar, on any tab

Click the icon or press Ctrl+Shift+Y. Pick a component, drag the sliders, switch presets and colours. The schema is copied from the playground one to one, so what you see here is what the component does.

02 · live page

the site keeps working underneath

Links, buttons, wheel and keyboard scrolling go through. Stop returns the page exactly as it was, scroll position included. Nothing is sent anywhere; the effect runs in the tab you clicked.

03 · copy props

a setting becomes a JSON for the agent

Copy props puts the component name and its current props in the clipboard: colours as RGB, presets expanded, auto values resolved. Paste it to the agent or straight into the React component.

demo · one minute

the extension over apple.com: the panel opens, the sliders move, the menu lists all 28 effects, the page keeps scrolling under Bend, Copy props and Stop. Recorded through the extension itself with the cursor drawn in.

open the demo on youtube ↗

captures · developer.chrome.com

five of the 28 effects over developer.chrome.com, taken through the extension itself; the cursor is drawn in so the interaction reads. The panel on the left is the extension; everything else is the live site. The same captures are in the Chrome Web Store listing.

Shatter effect over developer.chrome.com with the extension panel — **Shatter**the page breaks into glass shards under the cursor

Frost effect over developer.chrome.com — **Frost**a frozen pane that melts under the cursor

Decrypt Reveal effect over developer.chrome.com — **Decrypt Reveal**the page decodes from scrambled glyphs around the cursor

Magnify effect over developer.chrome.com — **Magnify**a lens follows the cursor over the live page

Particle Reveal effect over developer.chrome.com — **Particle Reveal**the page assembles from particles where the cursor passes

install · chrome

one click from the chrome web store, one flag.

turn on html-in-canvasopen chrome://flags/#canvas-draw-element, set it to Enabled and relaunch Chrome. The effects read the page through this experimental API; without it they draw over an empty canvas and the panel says so.
add it from the chrome web storeone button, updates come by themselves. Prefer the source? Clone the repository and load the dist folder unpacked from chrome://extensions with Developer mode on.
```
git clone https://github.com/ai-mindset-org/canvasui-anywhere.git
```
open any site and press the iconor Ctrl+Shift+Y. The panel appears, Liquid starts, the rest is sliders. After a page navigation press the icon again: the extension works on the tab you invoke it on and nowhere else.

add to chrome source on github chrome 154+ · manifest v3 · 0.1.0 · mit · release notes

chrome web store. published 2026-10-14 after review. The store build is the same 0.1.0 as the repository; updates arrive through the store.

why a flag. html-in-canvas is in Chrome's origin trial through Chrome 160. A trial token is bound to one domain, and an extension that works on every domain has none to bind to, so the flag stays until the API ships. Chrome only for now.

for the agent

what copy props gives you.

The component name is the React component of canvas-ui; the props are already in the shape it takes, after the playground's own conversions. The agent installs the component from the canvas-ui registry and spreads the props. The same object works with the vanilla engines.

{
  "component": "Liquid",
  "props": {
    "quality": "medium",
    "force": 1.1,
    "radius": 0.3,
    "curl": 1.9,
    "swirl": 4,
    "pressure": 0.8,
    "intensity": 2,
    "distortion": 0.4,
    "blend": 5,
    "color": [0.26, 0.36, 1],
    "rainbow": false
  }
}

what to expect

honest edges.

28 of the playground's effectsevery html-in-canvas effect is here. The 3D object scenes and ASCII Sweep are not: they draw a model or need two content panels, there is no page to wrap.
scrolling moves a containerwhile an effect runs the page scrolls inside a wrapper. Site scripts that read window.scrollY pause their tricks until Stop. Iframes reload when the page is wrapped.
images from another domain stay blankhtml-in-canvas paints only same-origin content: pictures served from a CDN or another host, and cross-origin iframes, come out as empty boxes under the effect. Text, layout and same-origin images render in full. This is the API’s privacy rule, not a setting.
peel and flame wrapPeel lifts the page off an empty background instead of the playground's second layout. Flame Wrap wraps the whole window, not a card.
gputhe engines need WebGL2 with float render targets. If Chrome's GPU process is down the panel tells you where to look.

it draws, remembers your sliders and sends nothing.

The extension asks for the active tab only when you press the icon. Effect settings live in the extension's local storage on your machine. There is no account, no analytics, no network request of its own.

Effects are the vanilla engines of canvas-ui by David Haz, MIT with Commons Clause, used unchanged. The panel, the page wrapper and this build are by AI Mindset.