Design a Browser Video Editor – Frontend System Design

We’ll walk through the frontend system design for a browser video editor like CapCut or Descript: import clips, arrange them on a multi-track timeline, preview at the playhead, and export an MP4 in the tab. You’ll see why the document is an edit decision list rather than pixels, why the playhead must not live in React state, how WebCodecs seeks from a keyframe, and which export path you propose.

This is not the Twitch or Netflix question. Those play one stream. It is also not Photoshop on the web. Photoshop undoes pixels with copy-on-write tiles. A video editor undoes clip ops: trim, split, move. The pixels stay on disk, or in OPFS, and you only decode the ones under the playhead.

Problem Statement

Design the frontend for a timeline video editor that runs in the browser, like CapCut or Descript.

Requirements:

• Import video, audio, and stills. Arrange them on stacked video and audio tracks
• Trim, split, ripple, and slip clips. Link or unlink a video... premium content.