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

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:

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:

1. Add your Kubeez API key in KubeezCut Settings
2. Generate AI media directly inside the editor - images, video clips, music tracks, voiceovers
3. Drop them onto the timeline
4. 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?

The main trade-off: you need Chrome/Edge. That's it.

Try It

• Editor: editor.kubeez.com
• Source: github.com/MeepCastana/KubeezCut
• License: MIT - fork it, self-host it, contribute

If you're also using the AI side, grab an API key at kubeez.com (comes with trial credits) and plug it into Settings.

If you want to generate AI media programmatically with JavaScript instead, check out the ai-media-cli SDK - one package, 90+ models, all media types.

---

Would love feedback. What features would make this actually useful for your workflow? Drop a comment or open an issue on GitHub.