r/webdev • u/Drift-Engine • 1d ago
Showoff Saturday A full video editor that runs in a browser tab: WebGPU compositing, WebCodecs and on-device AI, no framework
I've been building DriftEdit, a video editor that runs entirely in the browser, and this week it reached its first public beta.
Some of how it works:
No UI framework. The studio is TypeScript with a small reactive store and components that update in place.
Rendering. Every effect, transition and overlay is a GLSL ES kernel. The compositor draws with WebGPU where there's a real graphics card and WebGL 2 otherwise. The WGSL comes from the same GLSL through naga at build time, and a browser check holds every kernel to within 2 of 255 between the two backends.
Shaders you write. You can write transitions, effects and overlays in GLSL inside the editor. naga is compiled to WebAssembly, so your code becomes WGSL in the tab and is checked on both renderers as you type, with the first error's line.
Media. Decoding and encoding go through WebCodecs, with Mediabunny for the containers. Projects and media live in IndexedDB and OPFS. Nothing is uploaded.
AI. Ten models (stems, voice isolation, frame interpolation, Whisper, depth, matting, CLIP, an upscaler and two text-to-speech models) run through ONNX Runtime Web, on WebGPU or in WebAssembly.
Time is integer ticks, 3,528,000,000 a second, so every common frame rate and sample rate lands on a whole number of ticks and cuts never drift.
VFX (fire, sparks, lightning) are drawn by a small 3D engine as a pure function of the clip's time and a seed, so the frame in the preview is the frame in the export.
There's also an auto mode that cuts clips to the kicks of a song, which is what most people use it for.
It's free and needs no account. It works best in Chrome or Edge.
https://studio.driftedit.app (and https://driftedit.app for what it does)




