hyperframes preview
Hot-reload preview server for HyperFrames compositions, with frame scrubbing, theme switching, and watch globs.
hyperframes preview starts a local server that renders your composition in a real browser, frame-by-frame, with a scrub bar. Edits to HTML, CSS, and watched assets reload instantly. Use it as your inner-loop editor before reaching for render.
Synopsis
bash
hyperframes preview <file> [flags]<file> is the composition's entry HTML. The server binds to 127.0.0.1:5173 and opens your default browser.
Flags
| Flag | Default | Meaning |
|---|---|---|
--port <n> | 5173 | Listening port. |
--host <addr> | 127.0.0.1 | Bind address. Use 0.0.0.0 to expose on LAN. |
--no-open | off | Do not launch a browser tab. |
--watch "<glob>" | **/*.{html,css,js,svg} | Extra files to watch for reload. |
--theme <mode> | dark | Preview chrome theme. light | dark. |
--no-hmr | off | Full reload on every change instead of HMR. |
--inspect | off | Open the composition's inspect panel alongside the canvas. |
Common invocations
$ hyperframes preview comp.html
preview ready on http://127.0.0.1:5173
watching comp.html, assets/**, styles/**0.00s · 0%
JSON output
preview is long-lived. With --json it streams newline-delimited events to stdout.
json
{"event":"ready","url":"http://127.0.0.1:5173","port":5173}
{"event":"reload","file":"comp.html","duration_ms":48}
{"event":"error","file":"styles/main.css","message":"Unexpected token at 12:3"}Exit codes
0— clean shutdown (SIGINT).1— invalid file or flags.5— could not launch chromium for the preview shell.
Tips
- Scrub with the arrow keys; hold shift for 10-frame jumps. Press
jto jump to the inspector. - The preview honors
data-loop, so you can iterate on stickers without restarting. - Run
previewbehind a tunnel (cloudflared, ngrok) for client review without uploading anything. - HMR preserves the playhead position. Disable with
--no-hmrwhen debugging time-dependent bugs.
Next
- HyperFrames CLI — full command index.
hyperframes render— ship the file you just previewed.