HeyGen Adds Drag and Drop Editing to HyperFrames Video Framework

HeyGenHeyGen

· Updated

HeyGen updated its open-source HyperFrames framework to allow direct manipulation of video elements within its browser-based studio. Users can now drag elements to fix placement and browse a full component catalog, reducing the need for repetitive AI prompting during the fine-tuning phase.

HeyGen, an AI video generation platform, released v0.6.34 of its open-source HyperFrames framework. The update introduces direct manipulation to HyperFrames Studio, allowing users to drag elements within the preview window to adjust coordinates. The drag interaction complements the earlier HyperFrames Inspector workflow, where users tweaked positions through a code panel.
Registry items
78 (58 blocks, 20 components)
Persistence method
Server-side DOM patching
License
Apache 2.0

This shift addresses the prompting tax inherent in agentic coding for visual tasks. While AI agents excel at scaffolding complex timelines, minor layout tweaks often require multiple chat turns. WYSIWYG editing lets developers blend code and direct visual manipulation without losing the deterministic render pipeline.

The update also integrates the full 78-item registry—including HyperFrames 3D device blocks—directly into a sidebar panel. A new server-side patching mechanism ensures visual edits are written back to the source HTML, preserving changes across refreshes. Access these features by running npx hyperframes@latest preview in any project directory.

View the full update on github.com
HeyGen
HeyGen
@HeyGen
X

Creating with HyperFrames just got faster Drag elements in the studio to fix placement instead of prompting We also built the full component catalog right into the studio. Browse and add $ npx hyperframes@latest preview Follow @hyperframes_ for updates https://t.co/AtZu0SyHwY

58retweets302likes
View on X

Still wondering? A few quick answers below.

HyperFrames is an open-source video rendering framework from HeyGen that allows developers and AI agents to create video compositions using HTML, CSS, and JavaScript. Unlike traditional video editors, it treats video as code, enabling deterministic rendering where the same input always produces the identical high-quality MP4 output for automated workflows.

The latest update to HyperFrames Studio allows users to manually adjust the placement of elements by dragging them directly within the browser-based preview window. This visual editing capability automatically triggers server-side DOM patching, which writes the new coordinates back to the source HTML file so that changes persist across refreshes and sessions.

The HyperFrames registry is a collection of 78 pre-built visual items, including 58 blocks and 20 components like social overlays, cinematic effects, and data visualizations. These are now integrated into a dedicated sidebar in the studio, allowing users to browse by category and add them to a video composition via one-click installation.

Yes, HyperFrames is fully open source under the Apache 2.0 license. This allows individuals and companies to use the framework commercially at any scale without paying per-render fees or meeting company-size thresholds. The source code is available on GitHub, and the framework can be run locally or within Docker containers.

While both tools drive headless Chrome for deterministic video rendering, HyperFrames uses standard HTML and CSS as its primary authoring language instead of React components. This makes it specifically optimized for AI agents that already understand HTML, and it allows for a build-free workflow where the index file plays as-is in any browser.

Every HeadsUpAI update is written based on its original source and reviewed before it's published. Read our editorial standards →

HeyGen

See all AI news & updates from HeyGen →

Share this update