Title: I built a browser-native video editor using WebCodecs and WebGL2

Paul Spaurgen — Tue, 09 Jun 2026 21:28:05 +0000

Building heavy utility tools for the browser is a battle against resource limits. For the past while, I’ve been working on Elah (elah.dev), an engine and SDK for building frame-accurate video editors on the web.

The Architecture
I wanted to keep the dependency budget incredibly strict. Elah doesn't rely on a massive WASM runtime. Instead, it leans on:

WebCodecs for a push-based decode pipeline.

WebGL2 for rendering and compositing layers via a shared quad pipeline.

Web Workers & OffscreenCanvas for the export pipeline so the main thread doesn't freeze.

State Management
To keep React from needlessly re-rendering, the TimelineEngine is decoupled from the UI. It acts as the single source of truth using Immer for structural sharing. React just subscribes to a reactive mirror of that state.

Get Started:

Live Playground: https://elah.dev

GitHub Repo: https://github.com/elahlabs/elah

React/Next.js Integration Guide: https://github.com/elahlabs/elah/tree/main/playground/react

Demo: https://vimeo.com/1199899188?fl=ip&fe=ec

I'd love to hear your feedback on the architecture!

DEV Community: Paul Spaurgen

Title: I built a browser-native video editor using WebCodecs and WebGL2