Miguel Angel Simon Sierra
a29a6dca6d
An agent writing a composition, or a replaced image on disk, could stay invisible in the Studio preview until the dev server was restarted, the page hard-refreshed, or the tab reopened in incognito. Three separate server-side sources of staleness, all in the live-authoring path. The preview ETag came from a signature the CLI adapter memoised itself and cleared only from a file-watcher listener. `createProjectSignature` already memoises behind its own stat-only (mtime+size) fingerprint and re-hashes content only when the project actually changed, so the outer memo owned the same invariant a second time and could disagree with the disk. Whenever the single recursive `fs.watch` handle never constructed or died (its 'error' path closes and nulls it), nothing cleared that memo again and the ETag was frozen for the life of the process, which is exactly why restarting the server "fixed" it. Dropping the override and letting the shared helper own its own caching costs 0.3ms per request on a project with 65 source files, since the walk already skips node_modules, dist, renders and outputs. Project media assets were served with `max-age=3600`, so a browser that already had an image, video or font would not ask the server about it for an hour. Replacing one on disk left the old bytes on screen and no server restart could help. They now revalidate; the mtime+size ETag is unchanged, so an unchanged asset still costs one cheap 304. The /api/events SSE route registered a watcher listener per connection and never removed it. Beyond the unbounded growth, the listener consumes a one-shot file-write receipt, so the first accumulated dead listener to fire ate the receipt the live stream needed. The listener is now removed on abort and on callback exit, and the keepalive loop ends on disconnect so hono's own stream cleanup can run at all.
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: http://localhost:3002/#project/my-video
# Server: http://localhost:3002
npx hyperframes preview --port 4567
In an interactive terminal, the preview stays attached until you press
Ctrl+C. In a non-interactive shell such as a coding-agent session, the same
command starts a managed preview that survives after the command returns. Use
--background or --foreground to choose explicitly, and manage persistent
previews with --status, --stop, --list, and --kill-all. Add --json to
managed lifecycle commands for machine-readable output. --foreground --json
prints the ready-session envelope once, then remains attached until stopped.
normalize-audio
Measure two local authored audio clips with integrated LUFS and match the target
to the unchanged reference. The command is a dry run unless --write is passed:
npx hyperframes normalize-audio --reference target-audio --target user-audio
npx hyperframes normalize-audio --reference target-audio --target user-audio --write
It updates only the target element's data-volume and refuses unsafe boosts
that exceed Studio's +12 dB ceiling or would clip.
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