Clip browser video editor — quick guide

🎬 Getting started

Clip is a fully local video editor — your footage never leaves your machine. Nothing uploads, nothing is tracked.

• Click ＋ Add video (or drag video files onto the window) to drop clips on the timeline.
• The first video sets the project resolution (shown top-right). Everything composites to that frame.
• Press Space to play / pause. Drag the scrubber under the preview, or click anywhere on the timeline ruler, to move the playhead.
• Click a clip to select it — its properties open in the right-hand inspector.

🎞️ The timeline

• Move a clip: drag it left/right. Dragging to the edge auto-scrolls so you can move a clip from the end to the start. On drop, clips reorder and repack with no gaps.
• Zoom: use the Zoom slider (down to 2 px/sec for a project overview) or hit Fit to frame the whole edit.
• Tracks: the upper track holds video / color clips; the thinner track holds text overlays.
• The orange marker is the playhead. Times are shown as m:ss.cc.

✂️ Trim & split

• Trim: drag a clip's left or right edge. The opposite edge stays anchored — dragging the left edge trims from the start (and may leave a leading gap you can drag the clip back into).
• Or set exact In / Out points (source seconds) in the inspector.
• Split: park the playhead inside a clip and press S (or Split at playhead). Both halves keep their footage.
• Delete: select a clip and press Del or click Delete.
• The Cut ✂ tool lets you click a clip to split it right where you click.

🌗 Transitions & fades

• Transitions (inspector → Transition from previous clip): Crossfade dissolves into the previous clip, Dip to black fades through black. The chosen Duration is how far this clip overlaps the previous one.
• Fades: set Fade in / Fade out (in timeline seconds) to fade a single clip from/to black. Fades show as dark gradients on the clip.

🔍 Zoom / pan keyframes (the Ken Burns effect)

Animate a punch-in or a slow drift across the frame.

• Move the playhead inside a clip, set Scale and Pan X/Y, then click ◆ Add keyframe at playhead.
• Add two or more keyframes and Clip smoothly animates between them. One keyframe = a static crop.
• Keyframe diamonds sit on the clip — drag them to retime, even across clip boundaries (the framing transfers to the new clip). ⧉ duplicates one.
• Park the playhead on a keyframe and the sliders edit that keyframe live.

⏩ Speed

• The Playback rate slider runs 0.1× → 16× on a log scale (1× ≈ centre); type an exact value in the box for anything in between.
• Below 1× is slow motion (the clip gets longer); above 1× is fast-forward. Keyframes stay pinned to the same footage frames when you change speed.

🅰️ Text & color cards

• ＋ Text adds a title overlay at the playhead. Drag it on the preview to position; set font, size, color, alignment, bold and an optional backdrop box in the inspector.
• Drag the text's bar on its track to retime, or drag its edges to change duration. Text can extend past the last clip for a title-on-black card.
• ＋ Color adds a solid-color clip — perfect for intro / outro cards. It takes transitions and text just like a video clip.

📤 Export

• Export MP4 renders frame-by-frame to H.264 + AAC audio (falls back to WebM if your browser lacks WebCodecs). This is frame-accurate, not a screen recording.
• GIF exports a looping, downscaled animated GIF — handy for short shareable loops.
• Export runs entirely in your browser; a progress dialog shows status and lets you cancel.

💾 Save & open

• 💾 Save (Ctrl/⌘+S) stores the project — video bytes and all — in your browser's IndexedDB. 📂 Open lists saved projects.
• Edits autosave as you work; on next launch Clip offers to restore the last session.
• Storage is per browser, per machine — clearing site data wipes saved projects, so keep your source files.

⌨️ Keyboard shortcuts