How to build a browser video editor with v0

Rule of thumb: if your users are editing their own short clips (a minute or two, on ordinary hardware) the browser handles it and you never see a compute bill, which makes owning the editor the obvious call. If your product processes long or high-resolution files, or has to render hundreds of videos without anyone present, rent the rendering, because a laptop tab is the wrong machine for that job. The middle case is a product that mostly does short clips and occasionally does not, and the honest answer there is to build the editor and set a file-size ceiling you are comfortable defending.

* What you store is source files people chose to keep and the exports they made, so the number depends entirely on whether you keep either. Supabase Free includes 1 GB of file storage and 5 GB of egress a month. Pro, from $25/mo, includes 100 GB of storage and 250 GB of egress, then charges $0.0213 per GB stored and $0.09 per GB served. Deleting an export a week after it was downloaded is the single cheapest decision available here, and it belongs in your retention rule rather than in a bigger plan.

Whichever column you pick, the running cost afterwards is storage and hosting rather than compute, and it stays that way whether ten people or ten thousand are exporting, because every one of them brings their own processor to the job.

Prices and rates from supabase.com, developex.com, v0.app, v0.app and vercel.com, checked August 2026.

The database step is the one worth not skipping once your screens need real data. Everything else here takes a couple of minutes, and after that you’re just describing what you want.

1. 01

   Generate the timeline before anything else exists

   Start with the screen the whole product is judged on. Placeholder clips are fine, and finding out the interaction is wrong now costs nothing.

   PromptSketch the timelineCopy

   Build an editor screen for a video editor: a horizontal timeline holding clips end to end, each draggable to reorder and trimmable from either edge, with a playhead, a ruler in seconds, and a video preview above that follows the playhead while scrubbing. Add an export panel beside it with presets for widescreen, vertical, and square. Use placeholder clips for now. I will add the real encoder next.

   Placeholder data is fine here, and only here. Everything after this step gets something real behind it.

2. 02

   Add the real encoder to the screen you just built

   This is the step that turns a convincing mock-up into an editor. Do it before the database, because if the encoder does not behave, the rest of the plan changes.

   PromptGet FFmpeg running in the browserCopy

   Add FFmpeg compiled to WebAssembly to this project (@ffmpeg/ffmpeg and @ffmpeg/util) and make the timeline real: a file picker that loads a local video into the first clip, and an Export action that turns the timeline state into an ffmpeg run in the browser and returns a finished file. Use the single-threaded core, loaded through toBlobURL so the CDN assets are not blocked by CORS, and show the genuine progress events. All of this runs client-side. Do not add a server route that processes video.

   Be explicit that no server route touches the video. v0 will otherwise reasonably reach for a route, since routes are how it does everything else.

3. 03

   Start a new chat for the database and its routes

   Saving work is a separate feature from editing, so give it its own chat. Restoring a version later then undoes the persistence work without taking the editor with it.

   PromptConnect a database and design the modelCopy

   In this chat, connect a Supabase database and create the tables and the API routes behind them. Projects, each owned by one account. Videos, each belonging to a project. Exports, each recording a finished render with its settings and output length. Add a profile row per account. Then make the editor load and save a project through those routes. The media itself stays on the visitor’s device. Only project state and any export they choose to keep gets stored.

   Ask for the routes alongside the tables. A schema with nothing reading it leaves the editor exactly as unsaved as it was.

4. 04

   Add auth and roles, checked on the server and in the database

   Two layers, same rule. A route check is the first line, row-level security is the second, and it is the one that still holds when a route forgets to filter.

   PromptAdd auth and access rulesCopy

   Add authentication and the role model. Email-and-password sign-up, login, logout, a session, and a profile row per account, with signed-out visitors sent to the login screen. Then three roles (visitor, user, admin) held in their own table rather than on the user record, since anything on the user record can be edited by that user, plus a helper the access rules can call without recursing. Every API route must check ownership server-side rather than trusting anything the browser sends. Then turn on row-level security for projects, videos, and exports so the database enforces the same thing: a person reaches only their own rows, an admin reaches all of them, and every insert and update carries an explicit ownership check.

   v0 routes run on the server, so the check belongs there. A permission enforced only in the component is a permission anyone can skip.

5. 05

   Build the dashboard, then tidy the editor with Design mode

   The project list is ordinary work and goes quickly. Spend the time you save on a proper visual pass over the editor, which is the screen that has to look right.

   PromptBuild the dashboardCopy

   In a new chat, build the project dashboard: a list of the signed-in person’s projects with a thumbnail, a last-edited time, and actions to open, rename, duplicate, and delete. Add a panel on each project showing its previous exports with their settings. Then generate a thumbnail per clip locally in the editor so the dashboard has something to show.

   For visual fixes on the editor, select the element in the preview and use Design mode rather than describing where it sits. It is faster and it changes the real code.

6. 06
   Destination

   Add demo mode, then open a pull request

   Demo mode last, then walk the whole thing through and merge, which, if that branch is the linked Vercel project’s production branch, also deploys it.

   PromptAdd demo mode and shipCopy

   Add a demo mode: a signed-out visitor gets a throwaway workspace with a sample clip loaded, backed by separate demo tables so nothing they do touches real data. Then help me walk the whole flow: open the demo signed out and cut the sample, sign up, load a real file, trim and reorder it, export vertically, and confirm the export appears in the dashboard. Once it holds up, publish and open a pull request for it.

Review the access rules (row-level security policies) on every table. For each one, tell me in simple terms who can view, add, edit, and delete records, confirm that people can only reach their own data while the right roles can reach more, and flag anything left open that shouldn’t be.

The one rule that matters: the database service key, and any AI provider key you add later, never go into the app or a public repo. If one gets out, treat it as compromised and rotate it the same day.

Pick on two things here rather than one. The usual question is whether the plan allows commercial use. Vercel’s Hobby tier does not. The one specific to this build is whether the host lets you set custom response headers, because the faster multithreaded encoder needs them and the default single-threaded one does not. Building on the default and keeping the option open is the sensible order.

Add a "Generate captions" action on the editor that extracts the audio track from the current cut, sends it to a server-side function that calls a speech-to-text model, and returns timed segments. Render them as an editable caption track on the timeline that the user can fix before burning them into an export, and keep the audio out of long-term storage once the transcript comes back.

Add a "Tighten this" action that analyses the transcript and the audio levels for long pauses, filler, and dead air, then proposes a set of cuts as a preview the user accepts, adjusts, or rejects on the timeline. Never apply them automatically, and always leave the original clip intact so the change can be undone.

Add a panel on the export screen that sends the transcript to your ai function and returns a suggested title, a short description, and a handful of tags, sized for wherever the user says they are publishing. Present them as editable drafts rather than final copy, and let the user regenerate any one of them on its own.

Add a "Suggest a thumbnail" action that pulls several candidate frames from the finished cut (avoiding blur, blank frames, and mid-blink shots) and offers them as a row the user picks from, with the option to scrub for their own frame instead. Generate the candidates on the device using the frames you already have, so no video leaves the browser for this.

v0 doesn’t ship its own model for these prompts, so you bring an API key for whichever provider you want, and v0 writes the route that calls it. Start with a cheap model while you’re still iterating on the prompt itself, then swap in a stronger one for the version that ships, and keep every AI feature behind that one route so there’s only one key to rotate.