Canvas UI Anywhere

The canvasui.dev playground on any website: pick an effect, tune it, watch it on the live page, copy the props for your agent.

Canvas UI Anywhere puts the canvasui.dev playground over the page you have open. canvasui.dev shows its effects on a mock page. This extension runs the same html-in-canvas effects on a real site: your own landing, a competitor's page, a draft on localhost. Same sliders, presets and defaults as the playground, so you can try an effect on the actual design before anyone writes a line of it. HOW IT WORKS • Click the icon or press Ctrl+Shift+Y on any tab. The panel appears and the first effect starts. • Pick a component from the menu, drag the sliders, switch presets and colours. The control schema is copied from the playground one to one. • The page stays alive under the effect: links, buttons, wheel and keyboard scrolling keep working. Stop puts everything back, scroll position included. • Copy props puts the component name and its current props in the clipboard as JSON: colours as RGB, presets expanded, auto values resolved. Paste it to your agent or straight into the React component from canvas-ui. • Settings per effect, the last effect, the panel side and the panel language (English or Russian) are remembered. All 28 effects of the playground are included, from liquid distortion and glass shatter to frost, glitch and retro video looks. The full list is in the panel menu. REQUIREMENTS The effects read the page through Chrome's experimental HTML-in-canvas API. Turn it on once: 1. open chrome://flags/#canvas-draw-element 2. set it to Enabled 3. relaunch Chrome Without the flag the extension still opens, but the effect draws over an empty canvas and the panel tells you so. The API 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. The engines need WebGL2 with float render targets (any current GPU). WHAT IT DOES NOT DO No account, no analytics, no network requests of its own. The extension gets access to a tab only when you invoke it there (activeTab) and has no host permissions. Nothing is sent anywhere. KNOWN EDGES • While 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. • The peel effect lifts the page off an empty background instead of the playground's second layout; the flame effect wraps the whole window. • Images served from another domain (a CDN, another host) and cross-origin iframes come out blank under the effect: html-in-canvas paints same-origin content only, by the API's privacy rule. Text, layout and same-origin images render in full. • The 3D object scenes and the two-panel ASCII sweep from the playground are not included: they draw a model or need two content panels. CREDITS Effects are the vanilla engines of canvas-ui by David Haz (github.com/DavidHDev/canvas-ui, MIT with Commons Clause), bundled unchanged. The panel, the page wrapper and this build are by AI Mindset. Free, no upsell.