render

Render a composition to MP4 locally using a headless browser and FFmpeg.

Renders a composition file locally using a headless Chrome instance and FFmpeg.

npx editframe render

By default this renders index.html in the current directory to output.mp4.

Basic usage

# Render index.html to output.mp4
npx editframe render -o output.mp4

# Specify a different input file
npx editframe render path/to/composition.html -o output.mp4

# Render from a URL
npx editframe render --url https://mysite.com/composition -o output.mp4

# Pass custom data to the composition
npx editframe render --data '{"title":"My Video"}' -o output.mp4

Flags

Flag	Description	Default
`-o, --output <path>`	Output file path	`output.mp4`
`--fps <number>`	Frames per second	`30`
`--scale <number>`	Scale factor for HiDPI renders (e.g. `2`)	`1`
`--url <url>`	Render from a URL instead of a local file	—
`--from-ms <number>`	Start rendering from this timestamp (ms)	—
`--to-ms <number>`	Stop rendering at this timestamp (ms)	—
`--data <json>`	Custom render data as a JSON string	—
`--data-file <path>`	Custom render data from a JSON file	—
`--include-audio`	Include audio in the output (default on)	`true`

How it works

Launches headless Chrome and loads your composition HTML.
Steps through time at the specified fps, capturing each frame.
Pipes frames to FFmpeg, which encodes the final file.

Note: FFmpeg must be installed and available on your PATH. Install it from ffmpeg.org or via your package manager (brew install ffmpeg, apt install ffmpeg).

Examples

# 60fps render
npx editframe render -o output.mp4 --fps 60

# HiDPI (2x) render
npx editframe render -o output.mp4 --scale 2

# Render only the first 5 seconds
npx editframe render -o output.mp4 --to-ms 5000

# Render seconds 2–7
npx editframe render -o output.mp4 --from-ms 2000 --to-ms 7000

# Pass JSON data to a data-driven composition
npx editframe render -o output.mp4 --data '{"name":"Alice","score":42}'