Skip to main content
← Back to Blog
Engineering

How We Built the Connected Timeline

The timeline is the heart of any video editor. When we started building AIVE ONE Beta, we knew we needed to get this right — not just functionally, but architecturally. The result is a constraint-based connected timeline that eliminates accidental gaps and keeps your edit tight from first cut to final export.

The Problem with Traditional Timelines

Most NLEs use a free-placement model: clips sit at absolute positions on a track, and if you move one, everything else stays put. This gives you total control, but it also means every ripple edit, every insert, every delete creates potential gaps and sync problems that you have to fix manually.

Connected-timeline approaches solve the gap problem — but prior implementations made trade-offs in flexibility. We wanted the best of both worlds: smart connection behaviour that prevents accidents, with the predictability of track-based editing when you need it.

Why a Magnetic Timeline?

The magnetic (connected) timeline model offers several fundamental advantages for modern video editing workflows:

How AIVE ONE Beta Compares to Traditional NLE Timelines

Capability Track-Based NLE AIVE Connected Timeline
Gap prevention Manual Automatic via constraint solver
Sync maintenance Manual lock/unlock Semantic connections with detach option
Track organization Numbered tracks (V1, V2, A1, A2...) Seven semantic lanes with defined roles
Insert edits Ripple optional, can create gaps Automatic ripple with constraint propagation
Overwrite edits Replaces content at position Replaces content, solver adjusts neighbours
AI integration Separate layer, no timeline awareness AI reads and writes the constraint graph
Performance at scale Varies by implementation Under 2ms solve for 500+ clips

Semantic Lanes

Instead of generic numbered tracks, AIVE ONE Beta uses seven semantic lanes — each with a defined role:

Titles Lower Third End Card
Overlay Logo Bug Subscribe PIP
B-Roll Product Shot Screen Rec Aerial
Primary Intro Segment 1 Segment 2 Outro
Dialog Voiceover Interview
Music Intro Theme Background
SFX Whoosh Click Ding

The Primary lane is the spine. When you ripple-edit the primary storyline, linked clips in other lanes move with it — maintaining sync without you having to think about it. Non-primary lanes are connected by default but can be detached for independent positioning.

Semantic lanes also enable smarter AI behaviour. When Gap Filler looks for B-roll to cover a jump cut, it knows to place footage in the B-Roll lane, not the Primary or Dialog lane. When Smart Trim removes silence, it only affects the Dialog and Primary lanes — your music and SFX stay untouched.

The Constraint Solver

Under the hood, the timeline runs a lightweight constraint solver. Every clip has a set of constraints: its start time, its duration, its connections to neighbouring clips, and its lane assignment. When you perform an edit, the solver propagates changes through the constraint graph.

Think of it like a spreadsheet: change one cell, and dependent cells update automatically. But instead of numbers, the cells are clips, and instead of formulas, the dependencies are spatial and temporal relationships.

The solver runs in under 2ms for timelines with up to 500 clips — fast enough to feel instantaneous during interactive edits. For larger projects, we use incremental solving that only recomputes the affected portion of the timeline.

Constraint Types

Collision Resolution

When two clips would overlap, the solver applies a priority-based collision resolution strategy:

This mirrors the three-mode editing model that professional editors expect, but with the added safety of the constraint system preventing accidental gaps. The collision resolver also handles edge cases that trip up simpler systems: partial overlaps, cross-lane conflicts, and group-level collisions where moving one clip in a group would cause another clip in the same group to collide.

Canvas Rendering

The timeline is rendered entirely on an HTML Canvas element. We chose Canvas over DOM for two reasons: performance at scale (thousands of clips, waveforms, thumbnails) and pixel-perfect control over the rendering pipeline.

Each frame, the renderer draws:

Scrolling and zooming are handled via transforms, so the renderer only draws clips that are currently visible — keeping frame times consistently under 16ms even on complex timelines.

Performance Benchmarks

Workflow Examples

YouTube Talking Head Video

The most common workflow for solo creators. The connected timeline makes this significantly faster than track-based alternatives.

  1. Import your camera footage into the Primary lane
  2. Run Smart Trim to remove silence and filler words — clips automatically close gaps
  3. Run Gap Filler to propose B-roll at jump cuts — inserts go to the B-Roll lane
  4. Add your intro music to the Music lane — it syncs to the Primary lane's start point
  5. Drop lower thirds into the Titles lane at the appropriate points
  6. If you cut a section from Primary, all connected clips shift automatically

Multi-Camera Interview

Connected lanes excel at keeping multiple camera angles and audio sources in sync during multi-cam editing.

  1. Import all camera angles. AIVE auto-syncs them using audio fingerprinting
  2. Primary lane holds the selected angle at each moment
  3. B-Roll lane holds alternate angles for cutaways
  4. Dialog lane holds the interview audio (constant reference track)
  5. Switch angles by swapping clips between Primary and B-Roll — the solver maintains sync

Short-Form Content (Reels / Shorts)

For fast-paced vertical content where every frame counts and timing must be precise.

  1. Drop your clips into Primary — the connected behaviour keeps everything tight
  2. Add SFX to the SFX lane at specific beat points
  3. Sync-lock SFX clips to visual moments in Primary so they move together
  4. Use the Overlay lane for text overlays and stickers
  5. Pacing Coach verifies your cut rhythm matches short-form benchmarks

Documentary or Long-Form Narrative

Complex projects with hours of footage and multiple narrative threads benefit from the semantic lane structure.

  1. Build your primary narrative in the Primary lane using selects from your footage
  2. Layer archival footage and graphics in Overlay
  3. Place interview audio in Dialog, with the corresponding video in Primary
  4. Use Group constraints to bind related clips across lanes into scenes
  5. Reorganise scenes by moving groups — all internal sync relationships are preserved

What's Next

We are working on compound clips (nested timelines), multicam sync editing, and a more expressive connection model that lets AI agents propose structural edits while preserving your manual work. The constraint solver is also being extended to support transitions as first-class constraint objects rather than overlaid effects.

Follow along on our release notes page, and if you are interested in the technical details, we publish engineering deep dives on a regular schedule.

ET

AIVE Engineering Team

Core Timeline and Rendering

The team behind AIVE ONE Beta's timeline engine, constraint solver, and canvas rendering pipeline. Obsessed with sub-frame performance and edit-time correctness.

← Introducing AIVE ONE Beta 5 Ways to Speed Up Your Edit →

Engineering Deep Dives

Get technical articles about timeline architecture, rendering, and AI integration delivered to your inbox.

Technical Questions?

Discuss timeline architecture and implementation details with the engineering team.

Contact the Team

Try the connected timeline

Open the editor and experience it yourself — drop some clips and watch them snap into place.

Open Editor