Desktop render engine for front-end motion
Paste HTML, CSS, and JavaScript. Export a real video.
Clip.A.Canvas renders motion inside real Chromium, captures frames accurately, and encodes the result locally with FFmpeg. No cloud render farm. No screen recording workaround.
Chromium render path
HTML + SVG + canvas
Desktop + MCP + TUI
Why it feels different
Made for browser motion, not generic video automation.
The product is opinionated around one job: turn front-end animation into clean video output without breaking how the browser actually behaves.
Browser-accurate motion
CSS animation, transitions, WAAPI, SVG, and canvas content are captured through Chromium instead of a fake DOM snapshot pipeline.
Paste first, tweak second
Built for quick testing of snippets from ChatGPT, Claude, Gemini, or your own editor without needing a separate video stack.
No upload step
Rendering and encoding stay local, so you keep the browser result and avoid shipping source code to a hosted backend.
Video you can actually use
Export MP4 files suitable for editing, posting, and iterating without relying on screen recording or timeline hacks.
Workflow
Three steps from snippet to MP4.
Drop in code
Paste HTML, CSS, and JavaScript directly into the editor. The tool is designed around single-file front-end experiments and generated snippets.
Preview in a real engine
Inspect the motion in Chromium before exporting. If the browser can render it, Clip.A.Canvas is built to capture it faithfully.
Export locally
Render frames and encode to MP4 on-device, then save the finished file through the desktop app without a separate recording pass.
TUI
Install the terminal client straight from GitHub.
The TUI is built for keyboard-first snippet testing: load code from the clipboard, a file, or stdin, preview it in Chromium, and render MP4 without leaving the terminal.
CLI from the `tui/` package
pipx install "git+https://github.com/mechreaper007x/ClipACanvas.git#subdirectory=tui"One-time Chromium setup
python -m playwright install chromiumLaunch with preview
clipacanvas-tui --clipboard --previewClipboard, file, or stdin
Use `--clipboard`, pass an HTML file path, or pipe content in when terminal paste limits get in the way of large generated snippets.
Protected-folder setup built in
If Defender Controlled Folder Access blocks saves to `Documents` or `Videos`, press `F7` inside the TUI to open the allow-list helper for the active runtime.
Requirements: Python 3.10+, FFmpeg on your `PATH` or `CLIPACANVAS_FFMPEG_EXE`, and Playwright Chromium installed once.
MCP
Install the render tool straight into your coding client.
The MCP package is published on PyPI and runs through `uvx`, so users do not need to clone this repository or manually set up a Python environment.
Add it in one command
gemini mcp add clipacanvas -- uvx clipacanvas-mcpRegister the same package
codex mcp add clipacanvas -- uvx clipacanvas-mcpClaude Code install
claude mcp add -s user clipacanvas -- uvx clipacanvas-mcpClaude Desktop users can install the MCPB extension from the GitHub release once it is attached.
Download
Get the desktop build.
Windows installer and portable ZIP are available now. macOS packaging is in progress. Release notes, SHA-256 checksums, plus the TUI and MCP package source all live in the GitHub repository.