> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Work on a project in Studio
> Open a HyperFrames project, make visible changes, adjust timing and motion, and render a finished version.
Studio edits the same HTML project your agent created. Open the project folder:
```bash theme={null}
npx hyperframes preview
```
Use the canvas for visible changes, the Inspector for exact properties, and the timeline for anything that happens over time.
## 1. Select the thing you want to change
Pause on the relevant frame, then click the element on the canvas. A selected element gets an outline and handles. If several elements overlap, find the exact one in **Layers**.
With the element selected:
* drag it on the canvas to move, resize, rotate, or crop it;
* open **Design** to change text, layout, color, media, or other properties;
* undo immediately when the result is not what you intended.
## 2. Fix when something happens
Use the timeline when the right element appears at the wrong moment.
* Drag a clip to move it earlier or later.
* Drag an edge to change how long it remains.
* Move the playhead through the surrounding cut before judging the change.
* Use the razor only when one supported clip must become two.
## 3. Adjust motion or replace media
Select an element and open its motion controls to work with animation and keyframes. Diamonds on the timeline mark values at specific moments. Move the playhead to one, change the value, then play through the complete movement.
For media, select the image, video, or audio element and replace its source from the Inspector or Assets. Recheck its crop, duration, and transition after replacement.
## 4. Decide whether Studio is the right tool
Use Studio for a change you can point at: wording, position, styling, media, timing, or one animation.
Ask the agent when the change affects the story, several scenes, source research, or the project structure. Both edit the same project, so you can move between them without exporting or converting anything.
## 5. Check and render the version
Watch the complete project once. Pay particular attention to the opening, scene boundaries, captions, and audio ending. Run **Check** and fix visible problems before rendering.
Open **Export**, choose the format and resolution required by the destination, and start the render. Watch the exported file itself before sharing it.
Need one control in detail? Use the [workspace tour](/studio/tour), [canvas](/studio/canvas), [timeline](/studio/timeline), [animation](/studio/animation), or [export](/studio/export) reference.