Miao Yang
02166dad9f
Rework of the original `preview --detach` PR on top of the `--background/--status/--stop` lifecycle that landed in #2384: instead of a parallel detached-server implementation (state files, launch nonces, a --detached-child internal mode), the two capabilities main lacks become first-class preview flags that ride the existing argv forwarding into the background child. - `--idle-timeout <minutes>`: the server shuts itself down after this long with no requests. An open Studio tab counts as activity (it polls the project signature), so "idle" means nobody — human or agent — is looking. `--background` children default to 60 minutes (injected by buildBackgroundPreviewArgs unless the caller pinned a value; `--idle-timeout 0` opts out), so background servers no longer outlive their usefulness. Foreground default stays disabled. - `--owner-pid <pid>`: the server exits when that process does — an agent session can tie the preview to its own lifetime instead of leaking servers when it is killed. The watcher checks both conditions every 30s and SIGTERMs itself, reusing the exact Ctrl+C shutdown path (browser-pool drain, ffmpeg kill, hard deadline). Flags parse and fail loudly in the launching process, not inside a detached child's log file. Vite dev/local-studio modes warn that lifecycle flags apply to the embedded server only. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
hyperframes
CLI for creating, previewing, and rendering HTML video compositions.
Install
npm install -g hyperframes
Or use directly with npx:
npx hyperframes <command>
Requirements: Node.js >= 22, FFmpeg
Commands
init
Scaffold a new Hyperframes project from a template:
npx hyperframes init my-video
cd my-video
preview
Start the live preview studio in your browser:
npx hyperframes preview
# Studio running at http://localhost:3002
npx hyperframes preview --port 4567
render
Render a composition to MP4. Run from the project directory; the positional
argument is the project directory (not a file), so render the project's
index.html directly, or point at a specific composition file with -c:
npx hyperframes render -o output.mp4
npx hyperframes render -c ./my-composition.html -o output.mp4
lint
Validate your Hyperframes HTML:
npx hyperframes lint ./my-composition
npx hyperframes lint ./my-composition --json # JSON output for CI/tooling
npx hyperframes lint ./my-composition --verbose # Include info-level findings
By default only errors and warnings are shown. Use --verbose to also display informational findings (e.g., external script dependency notices). Use --json for machine-readable output with errorCount, warningCount, infoCount, and a findings array.
compositions
List compositions found in the current project:
npx hyperframes compositions
benchmark
Run rendering benchmarks:
npx hyperframes benchmark ./my-composition.html
doctor
Check your environment for required dependencies (Chrome, FFmpeg, Node.js):
npx hyperframes doctor
browser
Manage the bundled Chrome/Chromium installation:
npx hyperframes browser
info
Print version and environment info:
npx hyperframes info
docs
Open the documentation in your browser:
npx hyperframes docs
upgrade
Check for updates and show upgrade instructions:
npx hyperframes upgrade
npx hyperframes upgrade --check --json # machine-readable for agents
Documentation
Full documentation: hyperframes.heygen.com/packages/cli
Related packages
@hyperframes/core— types, parsers, frame adapters@hyperframes/engine— rendering engine@hyperframes/producer— render pipeline@hyperframes/studio— composition editor UI