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!
Top comments (0)