> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tryflowy.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Timeline & Editing
> Arrange clips and tracks, cut with precision, and animate with keyframes.
export const VideoPlayer = ({src, poster, aspectRatio = "16 / 9", title, className = ""}) => {
const [playing, setPlaying] = useState(false);
if (playing) {
return
;
}
return ;
};
The timeline sits below the preview player and is where your edit takes shape: clips laid out across tracks, cut and trimmed against the playhead, with keyframe rows for animation.
## Tracks and clips
Each row on the timeline is a track, labeled by what it holds — `V1` for video, `A1` for audio, `T1` for text and other overlays. Hover a track's sidebar to reveal **Add track above** and **Add track below** buttons, drag the handle to reorder tracks, or use the trash button to delete one. Dropping an asset below the last row creates a new track automatically.
Clips show a preview inside the bar — a frame strip on video clips, a waveform on audio clips, and a thumbnail strip on images — so you can line up cuts against the actual content.
* **Move** a clip by dragging it along its track; drag vertically to move it to another track. A ghost outline shows where it will land before you drop.
* **Select multiple** clips with ⌘/Ctrl + click, then drag to slide the whole group in time.
* **Right-click** a clip for quick actions: **Split at playhead**, **Duplicate**, **Lock**, **Show**/**Hide**, **Mute**/**Unmute**, and **Delete clip**.
## Trim, split, and snap
Drag either edge of a clip to trim it — the cursor changes at the edge, and the preview follows the moving edge so you can see the exact frame you're cutting to. To split a clip in two, park the playhead inside it and press ⌘K, or use the scissors button in the transport bar.
Snapping is always on: as you move or trim, edges snap to other clips' edges within a few pixels, and a dashed guide line marks the alignment.
## Keyframes
When a clip has animated properties, a chevron appears in its track sidebar — click **Expand keyframes** to open a sub-row per property (position, scale, rotation, opacity, volume, and more). Each row shows keyframes as diamonds; click a diamond to jump the playhead to it, and drag it horizontally to retime it.
Expand a property row again to open the **keyframe graph**, where you shape the motion itself:
* Select a diamond to reveal its curve handles, then drag them to sculpt a custom bezier ease.
* Right-click the segment between two keyframes to pick an easing preset: **Linear**, **Ease In**, **Ease Out**, **Smooth**, **Hold**, or **Custom curve**.
* Right-click a diamond to **Delete keyframe**.
You add keyframes from the [inspector](/studio/inspector): click the diamond next to a property to set its value at the current frame.
## Playback and transport
The transport bar under the player covers playback, editing shortcuts, a **Scene** switcher, playback speed (0.5×–4×), a loop region, fullscreen, and timeline zoom (25%–200%). The header shows the current timecode and your project's frame rate.
| Action | Shortcut |
| ------------------------- | ------------------------------------------------------------------ |
| Play / pause | Space |
| Previous / next frame | ← / → |
| Back / forward one second | ↓ / ↑ |
| Skip to start / end | ⌘↓ / ⌘↑ |
| Split at playhead | ⌘K |
| Duplicate clip | ⌘J |
| Delete clip | Delete |
| Undo / redo | ⌘Z / ⌘⇧Z |
| Export current frame | ⌘⇧X |
| Set / clear loop region | ⇧W |
| Fullscreen | ⇧F |
On Windows and Linux, use Ctrl wherever a shortcut shows ⌘.
## Scenes
Every Composition node on your canvas is a scene with its own timeline. Switch between them with the **Scene** dropdown at the left of the transport bar — useful for building a longer piece as separate cuts, or keeping alternate versions side by side. [Export](/studio/export) renders one scene at a time.