Building a browser-only mockup and video editor with Next.js, Canvas, and WebCodecs

9oz — Thu, 29 Oct 2026 20:23:13 +0000

I wanted a tool that turns screenshots and screen recordings into device mockups and short product videos, without a subscription. Every tool I tried locked video export or higher resolutions behind a paywall, so I built my own: Sparkshots.

The biggest decision was to do all editing and rendering in the browser.

What it does

Puts screenshots or screen recordings inside phone, tablet, laptop, desktop and browser frames, in portrait or landscape
Supports several devices on one canvas, editable one by one or as a group
Animates with zoom, position, rotation and tilt on an editable timeline
Trims and splits video, and adds a soundtrack with mute controls
Offers custom backgrounds: colors, gradients, uploaded images, Unsplash photos, patterns, overlays, vignette and shadows
Adds annotations: text, arrows, hand-drawn underlines, stickers, emojis, shapes and blur regions
Captures a website from its URL and uses it inside a frame
Exports PNG, JPEG, WebP, MP4 and WebM in HD, 4K or 6K, at 24, 30 or 60 fps, plus an experimental 144 fps mode

Why client-side

No server cost per export, so there's nothing to put behind a paywall
Media stays on your device unless you choose cloud save or a share link
Projects autosave locally, so you can start editing without signing up

The stack

Next.js, React and TypeScript for the app, Canvas and WebGL for rendering, and WebCodecs for video export. Accounts and cloud saves are optional.

Problems worth solving

Video export in the browser. Exporting MP4 and WebM at 4K and 6K on the user's own machine is the heaviest part of the app, so export got its own optimized engine.

MOV files. Screen recordings from iPhones and Macs are often MOV files that browsers don't handle cleanly, so the editor has a compatibility step when you drop one in.

Multiple devices on one canvas. Each device can be edited independently or updated together as a group, so the editing state has to support both without getting confusing.

A timeline that stays simple. Clips can be arranged, resized, trimmed and split, and animation clips stay editable, so the controls had to be usable without instructions.

What's still rough

The 144 fps export mode is experimental
Very high resolutions depend on the device and browser doing the rendering
It's an early project, so some browsers will behave differently than others

Try it and tell me what breaks

It's free and needs no signup: sparkshots.app. I'm planning to open-source it.

I'd like feedback on three things:

Do the multi-device controls make sense without instructions?
Is the animation timeline easy to use?
Does export work smoothly in your browser? Tell me which one you used if it doesn't.