Multi-Cam Editor Timeline

Unlock high-performance, non-linear video editing inside the web browser. VideoSync utilizes a custom-drawn, hardware-accelerated canvas editor to allow real-time multitrack trimming and slicing with absolute zero lagging.

How it Works

Traditional web video editors load massive DOM components for every timeline frame, resulting in slow renders, browser lag, and timeline crashes. VideoSync implements a game-changing architecture:

1. Hardware Accelerated Canvas Renderer

Our timeline is not built from thousands of raw HTML elements. Instead, it is continuously rendered inside a single HTML5 <canvas> using high-speed vector drawings. This allows VideoSync to render dozens of camera tracks, clips boundaries, and active audio ripples at 60fps.

2. Smart Overlap & Boundary Resolution

A major nightmare of standard editors is clip overlaps (placing one clip over another resulting in cut-offs). VideoSync runs a reactive gap-correction routine: when you drag clip borders, the engine dynamically recalibrates neighboring tracks, splitting and adjusting clip boundaries automatically to preserve a gap-free and overlap-free edit.

3. Svelte 5 Reactive State Loop

Powered by Svelte 5 runes, our canvas hooks directly into the global `$clips` and `$outputClips` state containers. Any changes made inside the editor trigger a frame-accurate RequestAnimationFrame (RAF) update, ensuring immediate visual synchronization with the central video players.

How to Use It

Follow this workflow to trim, rearrange, and inspect your multi-cam tracks:

View Camera Tracks

Aligned camera tracks stack vertically one below the other inside the Edit Timeline. The left column lists each active Camera feed name, while the canvas grid shows video clip boundaries.

Perform Split Cuts & Trimming

Hover over clip boundaries inside the canvas timeline. Grab the tactile edges of a segment to adjust its boundaries, or click anywhere inside a lane to split a clip at that specific frame.

Using Keyboard Shortcuts

Leverage rapid professional editing controls. Press **Spacebar** to toggle global playback, click a segment and hit **Delete / Backspace** to remove it, or use standard **Cmd/Ctrl + Z** to Undo cuts.

Trigger Lossless Export

Review the compiled cut in the primary output video player at the top. Once satisfied, click **"Export Final Cut"** inside the clips status bar to compile and render your timeline losslessly.

Other Modules Docs

Audio Auto-Sync Director Studio

Keyboard Pro Tips

Did you know? You can press numbers `1-8` inside the editor view to instantly switch program angles relative to the active playhead timestamp!