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. The Reference Project used in the beginner path starts with this real composition root:
The project template supplies the composition root, viewport, and duration. HTML and CSS control what appears; data-* attributes control when it appears. You can inspect the complete project before choosing an integration surface. 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.

Related topics

Build on HyperFramesHyperFrames or Remotion?What is HyperFrames?