Heygen HyperFrames: video editing where the timeline is an HTML file
Updated on August 17, 2026
Heygen HyperFrames is an open-source video rendering framework from HeyGen that lets AI agents and developers produce MP4s by writing HTML, CSS and JavaScript. Released under the Apache 2.0 license, the project has passed 41,000 GitHub stars and costs nothing, with local rendering consuming zero HeyGen credits. Claude Code, Cursor, Codex and Gemini CLI plug into it through skills shipped in the repository, so your coding agent becomes a video editor without learning a new format.
- Free and open source under Apache 2.0
- Deterministic rendering, the preview matches the final MP4
- Ready-made skills for Claude Code, Cursor, Codex and Gemini CLI
- No install step, everything runs through npx
- Best suited to people comfortable in a terminal
- Documentation available in English only
- Still a young project, updates land at a fast pace
From an HTML file to an MP4, how Heygen HyperFrames renders
HyperFrames treats every element of an HTML page as a clip on a timeline, with data attributes setting each clip's start, duration and track. The engine then loads the page in a headless browser, steps through time frame by frame, captures each image and encodes the result with FFmpeg. The same file therefore produces the same MP4 on every render, on any machine.
Your web habits carry over too. GSAP, Lottie, Three.js and CSS animations work as they are, while the browser-based Studio lets you tweak text and colors right on the preview before kicking off the encode.
Built for Claude Code, Cursor and terminal agents
Language models write HTML far more reliably than any proprietary video format, and that observation is the founding idea here. The HeyGen team first ran its agents on React pipelines and watched the output grow repetitive, then switched back to plain HTML and got the variety back. Remotion, the long-standing rival in this space, expects React components where a simple web page is enough on this side.
The repository ships around twenty skills you install with a single command, and HeyGen open-sourced the compositions behind its own launch videos as remixable examples, shaders and footage compositing included, ground long held by traditional video editing software. Typical output includes
- product videos and launch clips
- animated explainers and motion graphics
- captions, overlays and lower thirds
- animated data visualizations
Getting HyperFrames running, from npx to cloud rendering
Nothing gets installed, everything runs through npx with Node.js 22 or later. In practice, you paste the quickstart prompt into your agent, it installs the skills, writes the composition and opens the local preview (the first draft usually lands before you have time to alt-tab away). For bigger volumes, a HeyGen-hosted cloud render and an AWS Lambda mode sit alongside local rendering.
| Step | Command | Outcome |
|---|---|---|
| Create a project | npx hyperframes init | Ready-to-edit composition folder |
| Preview | npx hyperframes preview | Studio opens in your browser |
| Check | npx hyperframes lint | Report of composition issues |
| Render locally | npx hyperframes render | MP4 encoded in the renders folder |
| Render in the cloud | npx hyperframes cloud render | Render hosted on HeyGen infrastructure |
Frequently asked questions
Is HyperFrames free?
Yes, HyperFrames is fully free and open source under the Apache 2.0 license. Rendering on your own machine consumes no HeyGen credits at all. The only possible costs come from your coding agent and from optional hosted services such as voice, avatars or cloud rendering that you decide to wire in.
Do I need coding experience to use HyperFrames?
Some technical comfort helps. Coding agents write and fix the compositions for you, but you still run commands in a terminal and must have Node.js 22 or later on your machine. For making videos without touching any code, the classic HeyGen editor is the path the team itself recommends.
What is the difference between HyperFrames and Remotion?
Both render video from a browser, but Remotion expects a React component while HyperFrames only asks for an HTML file. Since AI models have read vastly more HTML than React across the web, an agent writes correct scenes more easily here, and libraries such as GSAP slot in without friction.
Is HyperFrames part of the regular HeyGen editor?
No, it is a separate framework aimed at developers and AI agents, independent from HeyGen's main application. It is driven from the terminal and documented on hyperframes.heygen.com. Your HeyGen-generated avatars and voices can still be dropped into a composition like any other media file.
Verdict: Shipping launch videos in batches without ever opening an editing suite is what Heygen HyperFrames does best. Developers and product teams already living inside a coding agent will feel right at home, with HeyGen's no-code editor covering everyone else.
