html2mp4HyperFrames guide Tutorial

Independent guide. Not affiliated with HeyGen.

HyperFrames guide for HTML to MP4

HyperFrames is HeyGen’s open-source framework that turns HTML, CSS and seekable animations into deterministic MP4 video. This site covers what it is, how to run the CLI, how it compares to Remotion and others, and practical ways to convert HTML to MP4.

Start the tutorial What is HyperFrames?

Apache-2.0Node.js 22+FFmpegGSAP / CSS / Lottie / Three.js

Diagram: HTML composition to frame timeline to MP4 via FFmpeg
HTML composition → seek each frame → encode MP4

Guides by search intent

One deep page per question. Pick what you came for.

How HyperFrames turns HTML into video

Three steps from composition file to MP4.

  1. 01

    HTML is the timeline

    A composition is an HTML file. Attributes like data-start, data-duration and data-track-index place clips on tracks.

  2. 02

    Seek every frame

    Headless Chrome is seeked frame-by-frame instead of recording live playback, so slow machines don’t drop frames.

  3. 03

    Encode with FFmpeg

    Captured frames (plus audio mixing) become MP4. Same input, same output — useful for CI and batch jobs.

terminal
# from the official README
npx hyperframes init my-video
cd my-video
npx hyperframes preview  # live reload
npx hyperframes render   # → MP4

Common questions

What is HyperFrames?

HyperFrames is an open-source (Apache-2.0) framework from HeyGen that turns HTML, CSS, JavaScript, media and seekable animations into deterministic MP4 video. Compositions are plain HTML files with data attributes for timing and tracks. See What is HyperFrames?

Is HyperFrames free?

Yes. The framework on GitHub (heygen-com/hyperframes) is Apache-2.0. HeyGen separately offers a paid Cloud Rendering API. Full answers in the FAQ.

How do I convert HTML to MP4 with HyperFrames?

Run npx hyperframes init my-video, edit index.html, preview, then npx hyperframes render. Step-by-step in the HyperFrames tutorial.

All FAQ answers