Browser video editor

Azelify's editor runs in a browser tab: it decodes footage, draws every frame and mixes the sound on your own machine, with nothing to install. This series explains how an editor like that is built, one part at a time, for a reader who knows some JavaScript but has never worked with video.

The parts follow the order you would build them in. The architecture overview maps the whole system first. Then come the document every feature reads and writes: the project file, undo and redo and the timeline data model. The middle parts turn media into pictures: importing files, decoding frames with WebCodecs, frame-accurate playback, compositing, text and on-canvas handles. The last parts cover sound, exporting an MP4, keyframe animation, testing a renderer and a comparison of FFmpeg.wasm, WebCodecs and MediaRecorder.

Each part defines its terms the first time it uses them, includes code you can run, and cites the specification or browser documentation behind each claim. Where we describe our own editor, we say what we chose and what it cost, so you can make a different call for yours.