How to build a browser video editor with Bolt

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 and bolt.new, checked August 2026.

The GitHub step comes before Bolt exists for you at all. Everything after it happens inside the browser tab Bolt opens, with no install.

1. 01

   Create the repository, import it, then prove the encoder

   Bolt has no upload button, so the project has to exist on GitHub first. Once it is in, spend the first real prompt on the encoder rather than on scaffolding you can already see.

   PromptSet up and prove FFmpeg worksCopy

   This project is a browser video editor. Set it up as React 18 + Vite + TypeScript with Tailwind, and keep this vocabulary throughout: projects, videos, clips, exports. One standing rule for the whole build: all video processing happens in the visitor’s browser using FFmpeg compiled to WebAssembly, never on a server. Prove that now with one throwaway page: pick a local video, set a start and end time, press a button, and get a trimmed file back. Use the single-threaded core loaded through a blob URL so CORS does not block it, and show real progress.

   Keep the repository private. Bolt commits to it automatically as you build.

2. 02

   Talk the timeline through in Plan Mode before it is written

   This is the largest and most expensive-to-redo screen in the build. Agreeing the state shape before Bolt writes a line is exactly what Plan Mode is for.

   PromptBuild the timelineCopy

   Use Plan Mode for this one. I need the editor screen: a horizontal timeline of clips laid end to end, each draggable to reorder and trimmable from both edges, with a playhead, a ruler in seconds, and a preview above that stays in step while scrubbing. Everything should derive from one piece of timeline state so a clip’s in-point, out-point, and position can never disagree with the screen. Talk me through the state shape first, then build it with placeholder clips.

   Plan Mode costs a message and can save a rebuild. A timeline whose state is spread across three places is the rebuild it saves.

3. 03

   Clear the context, then add the database

   The database conversation has nothing to do with the timeline conversation you just had, so clear the context first. Bolt reloads the whole project each message, and a clean slate makes this one cheaper.

   PromptConnect a database and design the tablesCopy

   Connect a database and build the tables. Projects, each owned by one account. Videos, each belonging to a project. Exports, each recording one finished render with the settings used and the output length. Add a profile row per account, and make the editor able to load and save a project. The media files themselves stay on the visitor’s device. Only project state and exports they choose to keep are stored.

   Clearing the context between unrelated features is Bolt’s own advice, and it is the single easiest way to slow the token burn.

4. 04

   Point one prompt at the database layer and lock it down

   Name the layer rather than letting the prompt range over the whole project. The rule is simple here, which means there is no excuse for getting it wrong.

   PromptAdd auth and access rulesCopy

   Working on auth and the database layer only. Add email-and-password sign-up, login, logout, a persisted session, and a profile per account, with signed-out visitors sent to the login screen. Add three roles (visitor, user, admin) in their own table rather than on the user account, because anything on the account is editable by its owner, plus a helper the access rules can call without recursing. Then row-level security on projects, videos, and exports: a person reaches only their own rows, an admin reaches everything, and every insert and update carries an explicit check that the row is not being filed under someone else. Show me how to verify a second account comes back empty.

   Naming the layer keeps the prompt narrow, which Bolt charges you less for and which makes the result easier to check.

5. 05

   Wire the export and check it in the live preview

   Join the timeline to the encoder, then export something real in the preview. The preview is the running app, so the file it produces is a file you can actually open.

   PromptBuild the export flowCopy

   Connect the timeline to the encoder. Export should turn the timeline state (trims, clip order, and the chosen shape) into a real ffmpeg run in the browser, report honest progress, and hand back a finished file. Offer widescreen, vertical, and square as presets rather than free cropping. Write each completed export to the exports table with its settings, and generate a thumbnail per clip locally. Handle the awkward cases plainly: a file that is too large, a format that is not supported, and a tab that runs out of memory mid-export.

6. 06
   Destination

   Add demo mode and admin, then ship it

   Demo mode is what turns the link you send someone into a trial. Add it, click the whole thing through as a stranger, then publish, to Bolt’s own hosting by default, or to Netlify if you would rather keep the domain there.

   PromptAdd demo mode, admin, and publishCopy

   Add the last two pieces. A demo mode where a signed-out visitor gets a throwaway workspace with a sample clip, backed by its own demo tables so nothing they do reaches real data. And an admin view of storage used, exports run, and accounts, restricted to the admin role. Then walk me through the full flow in the preview: open it signed out and cut the sample, sign up, load a real video, trim and reorder it, export vertically, and confirm the export lands in the dashboard and the admin view, and once it holds up, publish 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.

Pick a lighter model for the high-volume prompts above and save a stronger one for wherever the reasoning actually matters. That is the same token-budget logic as the rest of this page, applied to the app’s own AI calls instead of the build itself. When Bolt flags a missing secret, add the key through its secrets settings instead of pasting it into the chat, and keep every AI feature behind one server-side function so there’s only one key to manage.