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

FlagDefaultDescription
-o, --output <path>output.mp4Output file path
--url <url>—URL to render (bypasses directory/server startup)
-d, --data <json>—Custom render data (JSON string)
--data-file <path>—Custom render data from JSON file
--fps <number>30Frame rate
--scale <number>1Resolution scale (0-1)
--include-audiotrueInclude audio track
--no-include-audio—Exclude audio track
--from-ms <number>—Start time in milliseconds
--to-ms <number>—End time in milliseconds
--capture <strategy>autoFrame capture strategy: auto, native, foreign-object, painter
--experimental-native-render—Alias for --capture native (enables Chrome's canvas-draw-element flag)
--profile—Enable CPU profiling
--profile-output <path>./render-profile.cpuprofileProfile output path

How it works

  1. Launches headless Chrome and loads your composition HTML.
  2. Steps through time at the specified fps, capturing each frame.
  3. 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}'