HyperFrames CLI
npm install -g hyperframes # or use npx
Commands
init
npx hyperframes init <name> [--template blank|product|explainer|slideshow] [--fps 30] [--width 1920] [--height 1080]
lint
npx hyperframes lint [file] [--fix] [--strict] [--json]
Checks: valid data-hf-* attrs, time formats, overlapping clips, missing durations, unreachable assets, TTS length limits.
preview
npx hyperframes preview [file] [--port 3000] [--open] [--scene <name>] [--time <t>]
Live dev server with scrubber, scene picker, and hot-reload.
render
export HEYGEN_API_KEY=your_key
npx hyperframes render [file] [--out output.mp4] [--format mp4|webm|gif] [--quality 85] [--scene <name>]
doctor
npx hyperframes doctor
Checks Node ≥ 18, API key, network, asset paths, config syntax.
hyperframes.config.json
{
"version": 1,
"entry": "index.html",
"output": "./output.mp4",
"canvas": { "width": 1920, "height": 1080, "fps": 30 },
"render": { "quality": 85, "format": "mp4" },
"tts": { "defaultVoice": "en-US-neural-f1", "speed": 1.0 },
"assets": { "baseUrl": "./assets" }
}
Environment Variables
| Variable | Description |
|---|---|
HEYGEN_API_KEY | required for render |
HEYGEN_REGION | us (default) or eu |
HF_LOG_LEVEL | debug, info, warn, error |
Dev Loop
npx hyperframes init my-video --template product
cd my-video
# edit index.html
npx hyperframes lint
npx hyperframes preview --open
npx hyperframes render --out output.mp4