Skip to main content
Studio is the visual editor for the same HTML project your agent and the CLI use. The Reference Project from the first-video guide opens here without an import or conversion. Open any project folder, then run:

​
Know the workspace

HyperFrames Studio Preview showing project tools, a live composition, the Inspector, and the timeline

Preview keeps project files, the live frame, the Inspector, and time-based editing in one workspace.

  • Storyboard shows the planned sequence, direction, voiceover, status, and comments. Use it to review the story.
  • Preview shows the built project. The live frame is in the middle, the timeline is below, project tools are on the left, and the Inspector is on the right.
  • Code, Comps, Assets, and Catalog expose the project source, compositions, media, and reusable visuals. Design, Layers, Variables, and Renders control the selected work.
You do not need to learn every panel. Choose the surface that matches the problem in front of you.

​
Make one safe edit

Pause where the problem is visible. Click the element on the canvas, or choose it in Layers when several elements overlap. Then change only the property you meant to change.

The canvas selects the visible element; Design exposes the properties Studio can edit safely.

Use the canvas to move, resize, rotate, or crop a supported element. Use Design for text, layout, style, media, motion, 3D, or color controls that apply to the selection. Play through the surrounding moment before accepting the change; a correct still frame can still create a collision in motion.
Auto-keyframe starts enabled. Turn it off before a normal layout correction that should stay constant. Leave it on only when the change at the current playhead time should become animation.
For the complete visible-edit workflow, continue to Edit the frame.

​
Change time on the timeline

Drag a clip to move it earlier or later. Drag an edge to change its duration. Use the razor only when one supported clip must become two.

Timing changes stay visible beside the frame and neighboring tracks.

Move the playhead through the surrounding cut after every timing change. Use the timeline guide when you need trimming, splitting, beats, nested scenes, or multi-item editing.

​
Hand a broader change back to the agent

Studio is best for a change you can point at. Ask the agent when the request affects the story, several scenes, source research, or unfamiliar project code. Use Ask agent or Copy to Agent when Studio offers it, then add the human intent that the copied context cannot know:
The agent and Studio edit the same source. There is no export or conversion between them.

​
Check and render the version

Watch the project from the beginning, run Lint, and fix the reported issues. Before delivery, run the project-level browser gate as well:
Then render through Studio, your agent, or the CLI. Open the exported file and watch it once before sharing it.

Studio queues and monitors a render from the same project.

Edit the frame

Select, style, arrange, group, and replace visible elements.

Edit timing

Trim, split, move, and retime clips on the project timeline.

Finish and share

Review, validate, render, and deliver the project.

Related topics

How a HyperFrames project worksHyperFrames or Remotion?@hyperframes/studio