hyperframes/docs/studio/index.mdx

---
title: "Edit in the browser editor"
sidebarTitle: "Browser editor"
description: "The browser editor: open any HyperFrames project with one command and edit what you see, the timing and the motion by hand."
---

import { DocsVideo } from "/snippets/docs-video.jsx";

There are two editors. **The [Studio app](/studio-app/index)** is the desktop app with an agent beside the
preview: you say or draw what to change. **The browser editor**, on this page, opens any project folder in your
browser for editing by hand while your own agent works in its terminal. Both edit the same files.

```bash
npx hyperframes preview
```

<Frame caption="The browser editor today: files on the left, the preview in the middle, Design on the right, the timeline below. Open in desktop app moves the project to the Studio app.">
  <img src="/public/images/studio/editor-overview-v2.jpg" alt="The HyperFrames browser editor with the Inkwell project open: compositions, preview, Design panel and timeline" />
</Frame>

## Where to start

| You want to change | Start with |
| --- | --- |
| Something you can see in this frame | Click it in the preview, then **Design** or **Layers** |
| When something appears or how long it stays | The **Timeline** |
| One movement | The animation controls and keyframes |
| The story, several scenes, the structure | Your agent. **Describe a change to the agent** (⌘K) copies a ready request to paste into it |

Panels can be dragged anywhere; **Window** reopens a closed one or resets the layout.

## Edit what you see

Pause where the problem is, click the element (or pick it in **Layers** when things overlap), and change only that.
Drag to move, resize, rotate or crop; use **Design** for text, layout, style, media, motion and color. Then play
through the moment: a frame that looks right can still collide in motion.

<Warning>
  **Auto-record manual edits as keyframes** is on by default, so a change you make at the playhead becomes animation.
  Turn it off in the timeline toolbar for a fix that should stay the same all the way through.
</Warning>

More: [Edit the frame](/studio/canvas).

## Change the timing

Drag a clip to move it, drag an edge to make it longer or shorter, and use **Split at playhead** to cut one clip in
two. Scrub across the cut after each change. More: [the timeline](/studio/timeline).

## Scrub the preview

Click or drag the seek bar above the preview's playback controls to move through
the video. It stays available with the timeline hidden and in fullscreen. Use
the arrow keys while the seek bar has focus, or Home and End to jump to the
start and end. Seeking pauses playback, just like moving the timeline playhead.

## Check and export

Run **Lint** (bottom left) and fix what it reports, then the full check before you deliver:

```bash
npx hyperframes check
```

Choose **Export** in the header, or render from your agent or the command line, and watch the file once before you
share it.

## Keyboard shortcuts

Shortcuts depend on the active area. The table below covers the shortcuts
implemented by the browser editor's player, canvas, and timeline.

### Playback

| Shortcut | Action |
| --- | --- |
| Space | Play or pause |
| J / K / L | Play backward, stop, or play forward |
| Left / Right arrow | Step one frame, or nudge a selected canvas element horizontally |
| Up / Down arrow | Nudge a selected canvas element vertically |
| Shift + arrow | Step ten frames horizontally, or nudge a selected element farther |
| M | Mute or unmute |
| Shift + L | Toggle loop playback |
| I / O | Set the work-area in or out point |
| Shift + I / Shift + O | Clear the in or out point |
| A / E | Jump to the in or out point |
| F | Toggle fullscreen |

### Editing

| Shortcut | Action |
| --- | --- |
| V | Selection tool |
| B | Toggle the razor tool |
| S | Split the selected eligible clip at the playhead |
| N | Toggle timeline snapping |
| Command/Ctrl + Z | Undo |
| Command/Ctrl + Shift + Z, or Ctrl + Y | Redo |
| Command/Ctrl + C / V / X | Copy, paste, or cut the selected element |
| Command/Ctrl + G | Group selected elements |
| Command/Ctrl + Shift + G | Ungroup |
| Delete / Backspace | Delete the selected keyframe or element |

The focused area decides what a shared shortcut does. Arrow keys nudge a selected
canvas element, step through frames when nothing nudgeable is selected, or move
between timeline targets when the timeline has focus (see [Timeline
navigation](#timeline-navigation) below). `K` adds or removes a keyframe at the
playhead when a canvas element is selected, starting an animation on a static
element, and otherwise stops playback. `J` always drives playback.

### Timeline navigation

Tab into the timeline before using these commands. The browser editor keeps one logical timeline target in the Tab order and moves that target without requiring every row or clip to stay mounted.

| Shortcut | Action |
| --- | --- |
| Left / Right arrow | Move to the previous or next target in the focused row |
| Up / Down arrow | Move to the nearest target at the same time in the previous or next logical row |
| Home / End | Move to the start or end of the focused row |
| Command/Ctrl + Home / End | Move to the first or last logical row |
| Page Up / Page Down | Move by one visible page of logical rows |
| Enter / Space | Expand or collapse keyframe property lanes on a focused track row |
| Context Menu or Shift + F10 | Open the focused target's context menu when available |

On an expandable track row, Right arrow expands collapsed keyframe lanes and Left arrow collapses expanded lanes. From a keyframe property row, Left arrow returns to its parent track row. When no disclosure or parent action applies, those arrows continue moving within the row.

If the destination is outside the virtualized viewport, the browser editor scrolls it into view and restores focus after it mounts.

### Keyframes and recording

| Shortcut | Action |
| --- | --- |
| K | Add or remove a keyframe at the playhead when the current selection supports it |
| R | Start or stop gesture recording |

During gesture recording, drag records position, scroll records depth,
Shift-drag records 3D rotation, Option/Alt-drag records rotation, and
Command/Ctrl-drag or scroll records opacity or scale.

### Canvas and panels

| Shortcut | Action |
| --- | --- |
| G | Toggle the canvas grid |
| Command/Ctrl + 1 | Open Compositions |
| Command/Ctrl + 2 | Open Assets |
| Option/Alt + drag | Move an entire animation path |
| Shift + drag a resize handle | Resize uniformly |

<Warning>
  A shortcut should not fire while you are typing into a text or source field. If the wrong area has focus, click the canvas or timeline before using an editing shortcut.
</Warning>

Use the **Shortcuts and tools** button beside the playback controls for the
built-in shortcut list, work-area controls, and jump-to-frame field.

## Related topics

- [Edit the frame](/studio/canvas)
- [Edit timing on the timeline](/studio/timeline)
- [The Studio app](/studio-app/index)
- [Edit animation and keyframes](/studio/canvas#animate-with-keyframes)