ClipACanvas

Clip.A.Canvas

Clip.A.Canvas transforms HTML/CSS/JS animations into MP4 videos — entirely local, no uploads, no cloud. Powered by Chromium + FFmpeg for high-quality, browser-accurate rendering. Perfect for AI agents generating video content, demos, or visual explanations on-the-fly.

Clip.A.Canvas is a local browser-motion-to-video toolkit.

It includes:

• a desktop app for paste, preview, and MP4 export

• an MCP server for Gemini, Codex, and Claude Code

• a terminal TUI for code-first render workflows

• Website: https://clipacanvas.vercel.app

• GitHub: https://github.com/mechreaper007x/ClipACanvas

• Releases: https://github.com/mechreaper007x/ClipACanvas/releases/tag/v1.0.0

What It Does

• Renders HTML/CSS/JS, SVG, and canvas animations into MP4.
• Uses Playwright + Chromium for browser-accurate capture.
• Encodes locally with FFmpeg.
• Runs as a desktop app through pywebview.
• Exposes the same render engine through an MCP server and a TUI.

Desktop App

Install Dependencies

git clone https://github.com/mechreaper007x/ClipACanvas.git
cd ClipACanvas
pip install -r requirements.txt
pip install -r desktop_requirements.txt
npm install
python -m playwright install chromium

Run the App

On Windows:

launch_desktop.bat

Or directly:

python desktop_app.py

On macOS:

chmod +x launch_desktop.command
./launch_desktop.command

MCP Install

Direct install from GitHub

These commands do not require cloning the repo first. They install the MCP package from the mcp/ subdirectory of this repository.

Gemini CLI:

gemini mcp add clipacanvas -- uvx --from "clipacanvas-mcp @ git+https://github.com/mechreaper007x/ClipACanvas.git#subdirectory=mcp" clipacanvas-mcp

Codex CLI:

codex mcp add clipacanvas -- uvx --from "clipacanvas-mcp @ git+https://github.com/mechreaper007x/ClipACanvas.git#subdirectory=mcp" clipacanvas-mcp

Claude Code on Windows:

claude mcp add -s user clipacanvas -- cmd /c uvx --from "clipacanvas-mcp @ git+https://github.com/mechreaper007x/ClipACanvas.git#subdirectory=mcp" clipacanvas-mcp

Local editable install

Use this path if you are developing the MCP package locally:

cd mcp
pip install -e .
python -m clipacanvas_mcp.server

Notes:

• uvx handles the Python package environment for end users.
• The MCP package auto-installs Playwright Chromium on first render if it is missing.
• After a future PyPI publish, the install command shortens to uvx --from clipacanvas-mcp clipacanvas-mcp.

TUI

The repo also ships a keyboard-first terminal client for code-first render workflows.

Direct install from GitHub

Install the CLI without cloning the whole repo:

pipx install "git+https://github.com/mechreaper007x/ClipACanvas.git#subdirectory=tui"
python -m playwright install chromium
clipacanvas-tui --clipboard --preview

Requirements:

• Python 3.10+
• FFmpeg on PATH, or set CLIPACANVAS_FFMPEG_EXE
• Playwright Chromium installed once with python -m playwright install chromium

Local editable install

Use this path if you are developing the TUI locally:

cd tui
pip install -e .
python -m playwright install chromium
clipacanvas-tui

Notes:

• Load large snippets with clipacanvas-tui path/to/snippet.html --preview or clipacanvas-tui --clipboard --preview.
• On Windows, press F7 inside the TUI if Defender Controlled Folder Access blocks saves to protected folders such as Documents or Videos.

Build Outputs

Windows Portable EXE + ZIP

python build_desktop.py

Outputs:

• dist/ClipACanvas.exe
• dist/ClipACanvas-windows.zip

Windows Installer

python build_installer.py

Output:

• dist/ClipACanvas-Setup.exe

macOS App Bundle

Run this on macOS:

python3 build_mac_app.py

Outputs:

• dist/ClipACanvas.app
• dist/ClipACanvas-macos.zip

Release Workflow

Build the distributables first, then generate release metadata:

python build_release_assets.py --version v1.0.0

This generates:

• dist/SHA256SUMS.txt
• dist/RELEASE_NOTES.md

Ship releases through GitHub Releases. Windows builds are currently unsigned, so SmartScreen or Defender reputation warnings can still appear on first run.

Project Layout

• clipacanvas.html: main app UI
• desktop_app.py: desktop launcher
• serve.py: local backend and render endpoint
• playwright_render.py: Python renderer path used by the desktop app
• playwright_render.mjs: Node renderer fallback
• mcp/: standalone MCP package
• tui/: terminal UI package
• build_desktop.py: packaged desktop build
• build_installer.py: Windows installer build
• build_mac_app.py: macOS app build
• website/: Vercel site
• tests/frontend_render_matrix.py: frontend render regression suite

Notes

• The portable Windows build is a single-file executable that unpacks bundled payloads at runtime.
• The installer is the simplest Windows distribution path for non-technical users.
• macOS packaging must be built on macOS.

License

MIT.