← WorkSC.03 / 09

VideoKit

Browser-based video editor

Role
Frontend Developer
Context
Tekab.dev
Period
2023
Live
Private product
00:00:12:08 · 4 TRACKS · 60 FPS
Illustration · no public screenshotFig. 03

01 — Overview

A video editor that runs in the browser, built around a drag-and-drop multi-track timeline.

The challenge

Media processing is heavy, and a timeline must stay perfectly smooth while the user drags clips and keeps audio and video aligned.

Stack

  • React
  • Vue 3
  • TypeScript
  • Web Workers

02 — Architecture

What I built, layer by layer.

  • ■ Interface
  • □ API & logic
  • □ Data
  • □ Cloud & delivery
  • ■ Quality & security
  1. InterfaceTimeline UIInterfaceEditor state
  2. InterfaceEditor stateInterfaceWeb Workers
  3. InterfaceWeb WorkersQuality & security60 FPS main thread
Interface
Drag-and-drop multi-track timeline with audio/video alignment.
Quality & security
Media work moved off the main thread: rendering holds at 60 FPS.

03 — What I did

  1. 01

    Built the drag-and-drop multi-track timeline in React and Vue 3, with audio/video alignment.

  2. 02

    Moved media processing to Web Workers so the main thread stays free and rendering holds at 60 FPS.

  3. 03

    Designed a complex, state-driven multi-step user journey.

04 — Results

  • 60 FPS rendering while processing media

Next project · SC.04Dinertia →