I Built a Free Browser Video Editor with WebGPU, WebCodecs & Optional AI Generation

#opensource #ai #webdev #javascript

Every time I needed to edit a quick video - trim an AI-generated clip, layer some music, export for social media - I had to open a desktop app. Or worse, upload everything to a cloud editor and wait.

So I built KubeezCut - a professional video editor that runs entirely in your browser. No install, no uploads, no subscription. MIT licensed.

What It Actually Does

KubeezCut is a full multi-track NLE (non-linear editor) built with WebGPU and WebCodecs. Everything runs client-side - your media never leaves your device.

Timeline editing:

Multi-track support: video, audio, text, images, shapes
Trim, split, join, and rate-stretch clips
Pre-compositions for complex scenes
Keyframe animation with a Bezier curve editor
Undo/redo with full history

GPU-accelerated effects:
All visual effects run as WebGPU shaders - zero CPU overhead during preview:

Blur, sharpen, color correction
Distortion, keying (chroma key)
25 blend modes
Layer masks

Export:
Real video export in the browser via WebCodecs - not screen recording, actual encoding:

Containers: MP4, WebM, MOV, MKV
Codecs: H.264, H.265, VP8, VP9, AV1
Quality presets: 2?20 Mbps
No watermarks

Media import:
Drag in files up to 5 GB via the File System Access API:

Video: MP4, WebM, MOV, MKV
Audio: MP3, WAV, AAC, OGG, Opus
Images: JPG, PNG, GIF, WebP

Social-Ready Presets

One thing that bugged me about other editors - you always have to manually set the canvas size. KubeezCut has built-in presets for every major platform:

Preset	Resolution	Aspect Ratio
YouTube	1920�1080	16:9
Shorts / TikTok / Reels	1080�1920	9:16
Instagram Square	1080�1080	1:1
Instagram Portrait	1080�1350	4:5
Twitter/X	1200�675	16:9
LinkedIn	1200�627	~16:9
Custom	Any	Any

Pick the platform, start editing. No math.

The AI Part (Optional)

This is where it connects to the bigger picture. KubeezCut optionally integrates with Kubeez.com - an AI platform with 90+ models for generating video, images, music, and speech.

The workflow:

Add your Kubeez API key in KubeezCut Settings
Generate AI media directly inside the editor - images, video clips, music tracks, voiceovers
Drop them onto the timeline
Edit, trim, layer, and export

Generate ? Edit ? Export, all in one browser tab. No downloading files, no switching apps.

The AI generation uses models like Kling 2.6/3.0, Veo 3.1, Flux 2, Imagen 4, Suno V5, and more. But the editor works perfectly fine without any of that - it's a standalone video editor first.

Tech Stack

For anyone curious about the internals:

React 19 + TypeScript 5.9 - UI layer
WebGPU - GPU-accelerated compositing and effects
WebCodecs - browser-native encoding/decoding
Tailwind CSS 4 + shadcn/ui - styling
Zustand 5 + Zundo - state management with undo/redo
TanStack Router - type-safe file-based routing
Vite 6 - build tooling
OPFS + IndexedDB - local storage for projects and media
Whisper - transcription support

Browser Requirements

This uses bleeding-edge web APIs, so you need:

Chrome 113+ or Edge 113+
WebGPU, WebCodecs, OPFS, and File System Access API support

Firefox and Safari don't support WebGPU yet, so they're out for now.

Why Not Just Use CapCut / Clipchamp / DaVinci?

	KubeezCut	Cloud editors	Desktop editors
Price	Free, forever	Free tier + upsell	Free or $300+
Install	No	No	Yes
Upload required	No	Yes	No
Privacy	100% local	Your media on their servers	Local
Open source	MIT	No	No
AI generation	Optional (90+ models)	Limited/none	None
Export formats	MP4, WebM, MOV, MKV	Usually MP4 only	Everything
Watermark	Never	Often on free tier	Varies