Build on HyperFrames - HyperFrames
Skip to main content
Use this path when you want to write a composition yourself, automate a project, or add HyperFrames to another product. If you only want an agent to make a video, start with the first-video guide.

​
Write and render a project yourself

Create a blank project and open it in Studio:
The project is ordinary HTML. A composition starts with this root:
The project template supplies the composition root, viewport, and duration. HTML and CSS control what appears; data-* attributes control when it appears. When the project is ready:

​
Add HyperFrames to an application

Choose the smallest surface that completes the job:

CLI

Run checks and renders from a script or CI job.

SDK quickstart

Inspect and change composition HTML from an application.

Player

Embed a composition and control playback.

Rendering infrastructure

Render from a Node service, managed cloud, or infrastructure you operate.
Start with the CLI for project-level automation. Add the SDK only when code must inspect or edit the source, and add the Player only when a page needs live playback. Producer and Engine are lower rendering layers, not required setup.

​
Understand the architecture

The developer overview explains how the composition, CLI, SDK, Player, Producer, and Engine fit together. Use the HTML schema when generating source directly.