A selected headline exposes canvas handles and the Design controls that apply to it.
Select it
Pause where the element is fully visible and click it. If the wrong thing gets selected (or it’s hidden, off-frame or inside a group), pick it in the Layers tab instead. The selection is the same in the preview, the panels and the timeline.Change it
On the preview: drag inside the selection to move it, drag a handle to resize, use the rotation control, crop an image or video without moving its box, nudge with the arrow keys. Guides show when it snaps. For exact values, use Design. Its sections depend on what you selected:
Make one kind of change at a time, play it, then decide on the next.
Layers, groups and nested scenes
Drag in Layers to change what sits in front. Timeline tracks are about time, not stacking. Group things that move together with ⌘G (ungroup ⌘⇧G). Open a nested scene to change the scene itself; stay in the parent to change only where or when it appears.Replace media
Select the image, video or audio and swap the file from Media in Design or from Assets. Then check the crop, the length, and the cut in and out: a new file can have another shape or duration.Check it playing
Play from before the edit to after it: still readable at the final size, not covering anything important, entrances and exits still working, text readable over every background it crosses. ⌘Z undoes.When it isn’t editable here
Some generated or nested elements don’t expose every property. Try selecting the exact parent or child in Layers, or open the nested scene. Otherwise choose Ask agent about this element in Design (it copies the element and your request for your agent), or ask for the bigger change directly:Animate with keyframes
A keyframe is a value at a moment; the motion is what happens between two of them. Keyframes show as diamonds on the timeline.Select an element, place the playhead, and add a keyframe.
Read the motion first
Select the element, expand its animation lanes on the timeline, and play from before the move to after it. Name the real problem first: it starts late, takes too long, takes the wrong route, or speeds up the wrong way. Each needs a different fix.Add, move or delete keyframes
Put the playhead on the moment, choose Add keyframe at playhead (or press K with the element selected), and change the property. Drag a diamond to retime it (closer together is faster), change its value, or press Delete. With Auto-record manual edits as keyframes on (the default), any change you make at the playhead becomes a keyframe. That’s the quick way to pose two moments: set the first, move the playhead, set the second, play. Turn it off for a fix that should hold the whole clip.Easing and paths
- Easing is how it speeds up and slows down between keyframes. Start from a preset; use the speed curve when the start or the stop still feels wrong; use a hold for a jump with no in-between. Judge it playing, not from the curve.
- Paths: position keyframes draw a route on the preview. Drag a point to change it, bend a segment to curve it, hold Option while dragging the element to move the whole path. Turn on auto-rotate only when the element should face where it’s going.
Record a gesture
When a move is easier to perform than describe: select the element, press R (Record a gesture), move the pointer, press R again. Drag records position, scroll records depth; the shortcuts panel lists the keys for rotation, opacity and scale. Treat it as a first take: simplify the path and retime it.Motion the agent wrote
Some motion comes from a loop or helper in the code. Unroll to edit turns supported cases into ordinary keyframes. When a value says Computed value. Edit it in the Code tab., it can only be changed in the code, or ask your agent:Edit the source
The browser editor, your agent and the CLI all work on the same files. Use Code for a small change you understand; use the agent when it crosses files, changes the structure or starts from an error you don’t recognize. (In the Studio app the agent sits beside the preview, so none of the copying below is needed.)Choose the smallest safe surface
The choice is about the change, not a permanent workflow. You can move between
the surfaces without exporting or converting the project.
Make a focused source edit
- Open Code in the left panel column.
- Select the exact file in the project tree.
- Find the value responsible for the visible result.
- Make one focused change.
- Wait for the preview to refresh, then play the affected moment.
Ask about the selected element
When a visible element needs source work, select it and choose Ask agent about this element. The browser editor prepares the element and project context, combines it with your instruction, and copies the prompt to the clipboard. Paste that prompt into your agent chat.
The browser editor prepares a prompt for the selected element; you paste it into your agent chat.
Run Lint
Choose Lint at the bottom of the left panel column. The browser editor opens HyperFrame Lint Results with errors, warnings, file locations, and fix hints when they are available. Fix a simple, understood issue directly, then run Lint again. Use Copy to Agent when the source location is unfamiliar or the fix may affect other files. Add what happened before the error and what you expected:Use the project-level gates before delivery
Lint is a quick in-editor pass. The project-level commands remain the final gate, especially when the project contains nested compositions:lint checks the composition structure. check adds browser, runtime, layout,
motion, and WCAG contrast verification.
Passing checks do not approve the story or the final encode. Play the project
after a source fix, then watch the rendered file before sharing it.
When the preview and source disagree
- Stop editing until the latest save finishes.
- Keep the first exact error or save warning.
- Reload the project only after checking whether another tool changed the file.
- Run the project checks.
- Ask the agent with the error, project path, action that caused it, and result you expected.