---
title: "Timeline Editor Reference"
description: "Understand the editor layout, transport bar, timeline lanes, tools, and timing controls."
canonical_url: "/docs/timeline-editor-reference"
markdown_url: "/docs/timeline-editor-reference.md"
---

# Timeline Editor Reference

Understand the editor layout, transport bar, timeline lanes, tools, and timing controls.

Canonical URL: /docs/timeline-editor-reference
Markdown URL: /docs/timeline-editor-reference.md

The editor combines preview, inspector, transport controls, and timeline lanes in one workspace. Use this page when you need to find a control or understand how timing changes affect the project.

## Editor Layout

- Preview shows the current composed frame, including webcam, overlays, watermark, cursor, keyboard HUD, subtitles, redactions, and background.
- Inspector changes based on the selected tab, clip, overlay, or preview element.
- Timeline lanes hold screen video, webcam, audio, subtitles, cursor, keyboard, IDE context, zoom, 3D punch, overlays, webcam layout, and privacy redactions.
- Transport controls handle play/pause, playhead position, project length, tool mode, undo/redo, and timeline zoom.

Select a timeline item or preview element first when a setting seems missing. Many inspector controls are scoped to the current selection.

## Transport Controls

The transport bar includes the current playhead time and the project end time.

- The left time display follows the playhead.
- The right time display is editable and sets the project End, also called project length.
- Play/pause previews the current timeline state.
- Jump controls move to the start or end of the current project range.
- Timeline zoom changes how much time fits on screen; it does not change the exported video.
- Undo and redo apply to timeline edit operations.

## Edit the Project End Time

To change the project length with the End number:

1. Click the right-side End time in the transport bar.
2. Enter the new time in segmented time format, such as `1:20.00`.
3. Press Return or click away to apply it.
4. Press Escape to cancel while editing.

Changing the End time sets the exportable project end. It does not automatically ripple-trim clips, subtitles, overlays, or redactions. After shortening the project, scrub near the new ending and make sure important elements still finish where expected.

Use clip trimming when the source content itself is too long. Use the project End field when the overall project should stop at a specific time.

## Timeline Tools

Fraime.it has several timeline interaction modes:

- Select moves clips, trims handles, selects items, and lets you adjust preview elements.
- Blade splits clips at the playhead. Review related subtitles, overlays, audio, redactions, and webcam layout after splitting.
- Draw Rect creates manual privacy masks in the preview.
- Draw & Replace creates text replacement overlays for sensitive strings.

Use Blade when the middle of a clip needs work. Use trim handles when only the start or end is too long.

## Lane Visibility

The Screen inspector includes lane visibility controls. Hide lanes you are not actively editing so the timeline stays focused, then show them again before final review.

Common lanes include:

- Screen video and webcam
- Audio
- Subtitles
- Cursor and keyboard
- IDE context
- Zoom and 3D punch
- Overlays, visual assets, and watermark
- Redactions and text replacements
- Webcam layout

Hidden lanes can still affect preview and export if the underlying feature is enabled. Lane visibility is for editing clarity, not necessarily final render control.

## Media Library

The Media inspector tab manages source videos in the current project. Use it to import videos, record additional screencast segments, append media to the end of the screen track, or insert media at the playhead with timeline ripple behavior.

See [Media Library And Segments](/docs/media-library-segments) for the full workflow.

## Move and Trim Timeline Items

Most timeline items use drag handles for timing:

- Drag the body of a selected item to move it.
- Drag the left or right edge to trim start or end.
- Use timeline zoom when you need precise handles.
- Play a few seconds before and after any edit to judge pacing.

Screen, webcam, audio, subtitles, zoom segments, 3D punch segments, redactions, text replacements, cursor visibility, webcam layout, annotations, and visual assets all follow this general timeline model, though each item has its own minimum duration. The project watermark is different: it is positioned in the preview and applies across the whole timeline.

## Numeric Timing Fields

Some selected elements expose exact timing in the inspector:

- Annotation overlays include Start, Duration, and End fields.
- Imported visual assets include Start, Duration, and End fields.
- The project watermark uses placement and opacity fields instead of timing fields.
- The project End field in the transport bar sets the overall project length.

Other timing displays are read-only and should be adjusted by dragging timeline handles. Redaction cards, cursor ranges, and subtitle time labels show where the item lives, but the timeline lane is the primary way to change those spans.

## Project Workflow

Fraime.it stores edits in the `.fraimeit` package and renders them during preview and export. Duplicate a project before making a substantially different version, such as a full tutorial and a short launch clip. Agent-created working copies use a visible `.agent` naming convention so experiments stay separate from source material.

## Final Timeline Review

Before export, review:

- Project End time and final seconds.
- Cuts, speed changes, and split points.
- Audio continuity around edits.
- Subtitle timing and placement.
- Redactions and text replacements through the whole affected range.
- Overlays, watermark, webcam layout, cursor, keyboard HUD, zoom, and 3D punch during motion.

## Sitemap

See the agent-readable sitemap at [/sitemap.md](/sitemap.md).