Clip.A.Canvas TUI — interactive terminal UI for rendering HTML/CSS/JS to MP4
Project description
Clip.A.Canvas TUI
An interactive terminal UI for Clip.A.Canvas — the HTML-to-video renderer.
![layout preview]
Features
- Split-pane layout — code editor on the left, render status on the right
- Live rendering — paste HTML/CSS/JS and export to MP4 without leaving the terminal
- Resolution & bitrate controls — choose from common aspect ratios
- Render estimate + live activity — see a wall-clock estimate, elapsed time, and a small render animation while export runs
- Keyboard shortcuts — full keyboard-driven workflow
- Built with Textual — modern, fast, and pretty
Installation
cd code2video/tui
pip install -e .
Requirements
- Python 3.10+
- FFmpeg (system-wide, or set
CLIPACANVAS_FFMPEG_EXE) - Playwright Chromium:
python -m playwright install chromium
Usage
clipacanvas-tui
# or
python -m clipacanvas_tui.app
The TUI opens immediately in your terminal.
For large HTML that triggers terminal paste warnings, load from a file, stdin, or the OS clipboard instead of terminal paste:
clipacanvas-tui --clipboard --preview
clipacanvas-tui path/to/snippet.html --preview
cat snippet.html | clipacanvas-tui - --preview
Use the Clip selector to switch between Auto and Custom. In Custom,
enter seconds in the Duration field. Typing a duration automatically switches
the TUI to Custom mode. The hard cap is 60 seconds.
Use Output Path in the status pane to choose where rendered videos go.
Enter either:
- a target
.mp4file path - a folder path, which will receive a timestamped MP4 file
The TUI now encodes to a temporary MP4 first and then moves it to your chosen destination. If Windows blocks the selected folder, the TUI stops before render starts and tells you how to fix the destination instead of silently saving somewhere else.
If you want direct saves into protected folders such as Videos or Documents
on Windows, press F7 in the TUI. This opens an elevated PowerShell prompt
that adds the active Clip.A.Canvas runtime to Microsoft Defender's
Controlled Folder Access allow-list.
On Windows machines with Controlled Folder Access enabled, direct saves to
protected folders such as Documents or Videos may be blocked unless the
active Python interpreter or packaged app is explicitly allowed in Windows
Security.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Ctrl+R |
Start render |
Ctrl+P |
Open live preview in browser |
Ctrl+V |
Paste code from local clipboard |
F6 |
Load the entire editor from the OS clipboard |
F7 |
Open Windows protected-folder save setup |
Ctrl+Y |
Hidden compatibility alias for clipboard load |
Ctrl+O |
Open HTML file |
Ctrl+S |
Save code to file |
Ctrl+K |
Clear all code in the editor |
Ctrl+L |
Legacy clear shortcut |
Ctrl+Q |
Quit |
Layout
┌─────────────────────────────────────────────────────┐
│ Resolution: [540x960▾] Bitrate: [5M▾] [▶ Render] │
├──────────────────────────┬──────────────────────────┤
│ CODE │ RENDER STATUS │
│ <!DOCTYPE html>... │ Output: — │
│ │ Resolution: 540x960 │
│ │ Bitrate: 5M │
│ │ Status: Ready │
│ │ [=========> ] 75% │
│ │ Rendered 3.45s | 207 fr │
├──────────────────────────┴──────────────────────────┤
│ Ctrl+R: Render · Ctrl+O: Open · Ctrl+S: Save │
└─────────────────────────────────────────────────────┘
Configuration
Same environment variables as the main app:
| Variable | Default | Description |
|---|---|---|
CLIPACANVAS_FFMPEG_EXE |
auto | FFmpeg path |
CLIPACANVAS_BROWSERS_PATH |
auto | Playwright browsers |
CLIPACANVAS_MAX_DURATION |
12 |
Max render seconds |
Architecture
tui/src/clipacanvas_tui/
├── __init__.py
├── app.py # Textual App + bindings
└── screens/
└── editor.py # Main editor screen (split pane)
The TUI calls playwright_render.render_payload() directly in a background
worker thread — the same rendering engine used by the desktop and MCP
interfaces.
License
MIT
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file clipacanvas_tui-1.0.0.tar.gz.
File metadata
- Download URL: clipacanvas_tui-1.0.0.tar.gz
- Upload date:
- Size: 18.4 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.12.10
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
aa711f2791b1d674eb08937d02a7d71dc81fc10f7680ff2ca101d9bfdffa729f
|
|
| MD5 |
08773edcea3c8271ed7749814d99217a
|
|
| BLAKE2b-256 |
c83e6189329ca958c6414e0cbf6c72dfb4ad7c7f3266570acc18fcdf273660ea
|
File details
Details for the file clipacanvas_tui-1.0.0-py3-none-any.whl.
File metadata
- Download URL: clipacanvas_tui-1.0.0-py3-none-any.whl
- Upload date:
- Size: 21.6 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.12.10
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
eb3c92051f2030791d3f3b90779c072c1445e338a4a082b490975ea039085e7b
|
|
| MD5 |
bf02c50ea0fa203ba503a781909bd313
|
|
| BLAKE2b-256 |
074534c54c81c29fcebed411fdb992e3ec283132496358937e59800e06511f1f
|
