How to build an AI subtitle generator for your business with Lovable
Build a working subtitle studio in a browser tab, message by message. Videos transcribed on the viewer’s own machine, a timeline where lines are fixed and styled, translation on your own AI key with a limit per account, and exports as subtitle files or a captioned video, with Lovable designing the tables and the access rules in the same chat that builds the editor.
Lovable
$ Build a subtitle studio: a video is transcribed in the viewer’s own browser into timed captions, they fix and style the lines on a timeline, translate them into another language, and export a subtitle file or a captioned video. Save videos per account so nobody sees anyone else’s.
- Transcription running in the preview
- Editor and translation built
- Ready to preview
Overview & core architecture
An AI subtitle studio turns a spoken video into timed, editable, translated captions, and it does the expensive part, the transcription, on the visitor’s own computer rather than on a server you pay by the minute.
The usual version of this is a service. You upload a video, a server somewhere listens to it, and captions come back with a bill attached, priced by the minute of audio. Every product in the comparison further down works that way, and the minute is the line they all meter.
This version downloads a speech model into the browser once and runs it there, in the background, while the page stays usable. A minute of transcription costs you nothing, and only the finished text and the video the person chose to upload reach your database. What you build instead is everything around that moment: a library, a timeline editor, caption styling, translation through your own AI key, and an export that produces a subtitle file or a captioned video.
The honest trade is written into every page of this guide. The model that runs in a browser is the smallest one, its accuracy sits below what the rented services return, and the first run downloads it, which the app says can take thirty to sixty seconds. A larger model buys accuracy at the cost of a longer download. Deciding where you sit on that line is the first decision below.
The timeline editor is the product
A raw transcript is a start, and nobody ships one. The screen where a person drags a caption to the right second, splits a line that runs too long and sees the result over the video is what they judge the app on, and it is where most of the build time goes.
Transcription minutes cost nothing
The speech model runs on the visitor’s own processor, so a thousand hours of video transcribed this month costs you the same as one. What you pay for is storage for the videos people keep and the translation calls that leave your app.
Translation is the only metered line
Translating a finished track goes through your own AI key at the provider’s per-token price, a few cents for an hour of speech at the default model’s rates. It is the one line that grows with use, so the app logs every call and caps each account.
Essential subtitle studio components
Six building blocks make up the studio, and the transcription is the one to prove first. Each is something you can ask your AI coding tool to build or rework in plain words.
In-browser speech-to-text
A speech model that downloads once and runs on the visitor’s own machine, in the background, so the page stays usable while it listens. It returns lines with a start and an end time, which is what everything else on this list is built on. No server hears the audio and nobody bills you for the minute.
Timeline caption editor
Every line on a track under the video, draggable to retime, editable in place, splittable when it runs too long and mergeable when it is choppy. Undo and autosave, because a caption editor is used for hours at a stretch.
Caption styling & live preview
Font, size, colour, background and position, shown over the actual video rather than in a settings form. What the person sees here is exactly what the export produces.
One-click translation
The finished track sent to your AI provider a batch of lines at a time, with every timestamp kept, and progress shown while it runs in the background. Each translated track becomes its own export.
Subtitle file & captioned video export
Three plain subtitle formats for uploading to a video platform, and a captioned video recorded in the browser for the platforms that cannot take a separate file. Export is where a subtitle tool either feels finished or does not.
Video library, quotas & admin console
Every upload with what has been done to it, hourly limits per action so one account cannot run up your translation bill, a demo account that wipes itself, and an admin view over users, videos and usage.
Own the subtitle studio or rent it by the minute
Most subtitle apps charge you based on audio minutes processed. They set monthly limits, charge per team member, and bill extra when you run out. Running the AI inside the user’s browser removes these minute limits entirely instead of just reducing them: that is the main difference to keep in mind.
Build your own
Own your platform completely. Transcription runs on your users’ devices, videos stay in your own database, and your only recurring cost is optional translation. With modern AI coding tools, building this takes a few weeks instead of months.
- Zero minute costs: Transcribe unlimited audio because processing happens directly on the user’s device
- Cheaper translations: Pay wholesale rates for AI translations and easily set monthly spending caps per user
- 100% custom branding: Keep your own brand, logins, and design without third-party restrictions
- Full feature control: Decide your own caption styles, export formats, and limits without paying for plan upgrades
- Complete data ownership: Store videos and captions in your database with full control over privacy and deletion
- Total code freedom: Own all source code outright and host your application on any server you choose
Rent the minutes
Rev · Descript · Kapwing · Happy ScribeRenting an existing tool gives you higher accuracy, an editor ready to use today, and automatic software updates. However, you pay a fee for every minute of video processed, plus extra monthly fees per user.
- Higher accuracy out of the box: Powerful cloud models offer higher accuracy with no initial setup or load time
- Ready to use today: Launch immediately, with options for human proofreading when accuracy matters most
- Zero maintenance: External companies handle all system updates, model upgrades, and bug fixes
- Pay-per-minute pricing: Every provider meters audio minutes, and many charge additional fees per user seat
- Use-it-or-lose-it plans: Monthly minute allowances expire whether your team actually uses them or not
- Restrictive free tiers: Free plans only cover occasional usage, forcing active teams onto expensive paid tiers
The clearest example of the seat-plus-allowance meter. A single person captioning under 45 minutes a month never pays, and a team pays per seat every month whether or not anybody captioned anything. The Pro tier is "$47.99 per seat/month" annually for "10,000 verbatim AI transcription minutes/seat/month", and human captions start at "$1.99 /min.", which is the rate to compare the browser model against when accuracy is the whole point.
rev.com · checked September 2026
An editor with transcription inside it, priced by media hours per person per month. The allowance is generous for one creator and resets whether it was used or not, so the bill is a function of headcount rather than of output. Descript is the row to read if what you actually want is a video editor that happens to caption.
descript.com · checked September 2026
Two meters at once, per member: subtitle minutes and translation minutes are separate allowances, and the free tier caps the exported video at four minutes. It is the closest product to this template in shape, which is what makes it the fairest comparison. Everything this template does for one account with no allowance, Kapwing does per member with two.
kapwing.com · checked September 2026
The row with the cleanest per-minute figure: once the allowance is gone, each extra minute is "$0.20/min", so an hour of video is $12 in top-ups. Multiply that by the hours your users would actually caption in a month and compare it to zero, then remember the honest half of the comparison: the rented model is more accurate than the one that fits in a browser tab.
happyscribe.com · checked September 2026
Rule of thumb: if you caption a handful of your own videos a month, do not build this. Rev’s 45 free minutes or Descript’s free hour covers you, and the rented models are more accurate than the one that runs in a browser. If you caption for clients, for a team or for other people’s uploads, the minutes are the bill, and owning the studio turns a meter into a fixed cost. The honest middle case is a product whose users need high accuracy on difficult audio, and there the right answer is to build the studio and swap in a larger speech model, accepting a longer first download in return.
Why build with Lovable
Skip the speech-recognition engineering. Describe the library, the editor and the translation you want, say who may use them, and every video, caption track and export is saved under its owner’s account without you writing server code.
Lovable turns that work into a conversation: describe a screen or a rule in plain language and watch it appear in the live preview, in the same tab:
Prompt
Say what you want to add or change, in plain language.
Watch
The live preview rebuilds in the browser as Lovable writes the code.
Try it
Click through the real app, with real buttons, forms and data rather than a mockup.
Refine
Select what’s off and describe the fix, or ask for what’s next.
None of that requires a computer science background or writing code, and the whole build happens in one browser tab, one request at a time.
Data & backendhandled automatically
Connect your database in a single step, right from the chat. Lovable builds the tables, sets up the logins, writes the server-side functions, and turns on live updates, each one an ordinary request in plain language, not a separate tool to learn.
Click to point instead of describing where
Select any element in the live preview with Lovable’s Select elements tool, and your next message applies to exactly that piece.
Full ownership and complete privacy
The app and the records in it are yours. Every change is saved automatically, and the repository Lovable syncs to GitHub is private on every plan, with no technical setup and not one Git command.
Pay a developer, or do it with AI
When you own your subtitle app, there are no per-minute processing fees. Your only real costs are constructing the code, video storage, and optional translations. Here is a clear breakdown of hiring a developer versus building it yourself using AI.
Hire a developer
Custom build, from scratch- Developer
- ~$11k-$42k
- Supabase (backend)
- Free tier · $25/mo (Pro plan)*
- Hosting
- $0 free tier
- AI translation
- Per token on your own key
- Build time
- ~210 hrs of their work
~$11k-$42k to build, then from $25/mo after launch
Our ~210-hour estimate, costed against the rate survey linked below, whose bands run from $45-$75/hr for North American contractors up through $100-$150+/hr for senior US developers, before the 20-40% an agency adds, which brackets the range at roughly $50/hr and $200/hr. Most of those hours are the speech model and the timeline, and neither shows in a screenshot. Then read the translation row: it is the only line that grows with use, and at the default model’s rates an hour of speech costs a few cents.
Build it with Lovable
From scratch, with Lovable- Lovable
- Free (30 credits/mo) to $25+/month (Pro, from 100 credits)
- Backend (Supabase)
- Free tier · $25/month (Pro plan)*
- Hosting
- $0 on a Lovable subdomain
- Your time
- ~101 hrs
Free to try the idea, ~$25-$50+/month on Pro while you build a real one, then whichever credit tier you keep using
Lovable bills by credits, so what you pay tracks what you build: importing the pre-built template can fit inside the Free plan’s 30 credits a month, while a full from-scratch build burns through Free fast and usually needs Pro. Pro’s entry rung is $25/month (or $250/year, roughly $21/month effective) for 100 credits, the bottom of a ladder where 200 credits runs $50/month (or $500/year, about $42/month), and a multi-session build often lands on that rung or higher rather than the entry price.
* Unlike most apps in this catalogue, this one keeps large files: the videos people upload live in storage until you delete them. Supabase Free includes 1 GB of file storage and 5 GB of egress a month, and pauses a project after a week without activity. 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, and keeps a daily backup for 7 days. A retention rule that deletes a video a month after its last export is the cheapest decision on this page.
Prices and rates from supabase.com, developex.com and docs.lovable.dev, checked September 2026.
Decide before you build
Six decisions to make before writing code. Three of them decide what your users’ videos cost you to keep, and one decides how long they wait for the first caption.
Which speech model, and how long will people wait for it?
The smallest model downloads in under a minute and gets ordinary speech mostly right. Larger ones are more accurate and take longer to arrive on the first visit. Decide now which you ship and what the screen says while it loads, because a silent wait looks like a broken app.
How long a video will you accept?
The transcription runs in a browser tab with finite memory, and the template already warns itself above thirty minutes of audio. Decide the ceiling by length or by file size, say it before the upload rather than after, and refuse politely. A limit stated up front reads as a feature, and a tab that dies at 80% reads as a broken product.
Do you keep the videos, and for how long?
Uploaded videos are the only large thing in this app, and storage is the one bill that grows quietly. Decide whether a video lives until the person deletes it, expires a month after its last export, or is never kept once the captions exist. Build the deletion now rather than after the storage bill arrives.
Which languages, and who pays for translation?
Transcription costs $0, but AI translation costs money for every translated word. Decide upfront which languages to support and set strict usage limits per account (for example, 5 free translations per month). Adding a hard limit now prevents surprise bills later when user activity spikes.
Is video storage public or private?
By default, uploaded videos are accessible to anyone with the link so the browser can process exports smoothly. Switching to private storage with expiring links keeps user content secure, but requires setting up server-side rendering for video exports. Decide on your privacy model before your first user uploads sensitive content.
Who gets an account, and what does a demo get?
Open sign-up, invitations, or a demo account that anyone can try. The template gives demo accounts their own role and wipes them after an hour of inactivity, which is the right shape for a public trial. Whatever you choose, limits attach to the account rather than the visitor, because accounts are free to create.
Comparing your build options
Building a box that shows a transcript is fast. The hard part is everything behind it: a speech model running in the visitor’s browser, a timeline that stays in step with the video, translation that keeps every timestamp, and a captioned file at the end. Here are three ways to build the exact same product.
Getting a speech model to run inside a browser tab, without freezing the page, is where the first weeks go. Then the caption you dragged has to stay in step with the video, the translated line has to land at the same second as the original, and the captioned file has to come out of a browser that was never designed to render one.
A kit gives you a login page, a file table and a settings screen. It has never heard of a caption, a timestamp or a speech model, so the editor, the transcription and the export, which are the whole product, start from nothing.
You describe a screen or a rule and watch the running app change in the same tab, while Lovable designs the tables and the access rules behind it. The check that matters: drag a caption in the preview and confirm the video, the list and the export all agree on where it landed.
Estimate your exact build timeframe
Customize your feature list below to see how build time changes. If you only need subtitles in one language, or nobody will export a captioned video, uncheck those rows to reduce the estimate.
Your estimate
101 hrs
start to finish
Based on the 7 of 7 features you’ve selected, plus ~21h of groundwork. Toggle any on the left to watch the number move, and open the groundwork row to untick what you have already, such as a database that is already running or going live if you are only building a mock-up for now.
A rough estimate, not a quote. Real time depends on how much you customize and how clean your data is.
Let’s set up the tools you need
Nothing gets installed, because the whole workspace is a browser tab. Three things to sort out before step 01, and a fourth worth adding once the project matters to you. After that, you build by describing what you want.
Lovable account
Nothing to download. Sign up with an email, Google, or GitHub account and you land straight in the chat where you describe what to build.
Sign up for LovableLovable subscription
Lovable bills by build credits, so the plan you need follows what you build. Free gives you 5 credits a day, capped at 30 a month, which is enough to try it rather than to finish an app. Pro is $25/month for 100 credits ($250/year, about $21/month), and that is the bottom rung: a build spread over several sessions usually lands on 200 credits at $50/month, or higher.
Compare Lovable plansSupabase project
Where your app keeps its data. Connect your own Supabase project from the chat, or let Lovable create one for you. Either way it designs the tables, adds the logins, and wires the screens to them from there.
Connect Supabase to LovableGitHub connection
Not needed to build anything, since Lovable keeps its own history of every change. Link a GitHub account and it also keeps a private repository in sync, so a copy of the real code exists outside the browser tab. Worth doing before the project is one you would hate to lose.
Set up GitHub syncOnly the first three are needed to start, and none of it touches your computer. From here, you describe what you want and Lovable builds it in the browser.
Build your subtitle studio, message by message
Everything below happens in one browser tab. Send a message, watch the preview rebuild, click through what changed, then send the next. One deviation from the usual order: the speech model comes before the database here, because it is the part worth proving early.
- 01
Set the ground rules, then get transcription running
Unusually, the database can wait. Start by proving the speech model loads and captions a clip inside the preview, because everything else assumes it does.
PromptGet the speech model running in the previewBefore we build anything else, note the ground rules for this project: it is a subtitle studio, the vocabulary throughout is videos, tracks, captions and exports, transcription always happens in the viewer’s browser rather than on a server, and the only call that ever leaves the app is translation through one server-side function. Now prove the first rule works: build one simple page with a file picker for a local video and a button that transcribes it in the browser using the whisper-tiny model from @huggingface/transformers, running in a Web Worker so the page stays responsive, using the graphics chip where the browser allows it and falling back where it does not, in thirty-second chunks. Show the model download and the transcription as two separate progress bars, and list the lines with their start and end times when it finishes.
If this does not work in the preview, nothing built afterwards will help. It is the one step worth doing before the parts that feel more like progress.
- 02
Connect Supabase, then describe what gets saved
Now the database, with a real transcript to design around rather than an imagined one. Uploads go to storage, and the rest is small rows of text.
PromptConnect the backend and design the tablesConnect this project to Supabase. Once it is linked, design the tables: videos, each owned by one person, with the file’s storage path, duration and detected language. Subtitle tracks, one per video and language, holding the captions as timed segments plus a status and a progress figure for translation. Usage records, an activity log, a settings table, and a rate-limits table keyed by account and action. Create a private storage bucket for uploads where an account can read and write only its own folder. Every screen from here should read and write real data rather than placeholder content.
Keep the bucket private for now. Step 05 explains why a captioned-video export may push you to make it public, and that is a decision to take with the trade-off in front of you.
- 03
Add logins and the access rules, then check them with the audit prompt
Ownership here is simple (each video belongs to one person) which makes it easy to get right and inexcusable to get wrong.
PromptAdd logins and access rulesAdd authentication: email-and-password sign-up, login, logout and a profile row per person, with signed-out visitors sent to the login screen. Then four roles (visitor, user, admin and demo) stored in their own table rather than on the user account itself, because anything on the account can be edited by the person it belongs to, plus a helper the access rules can call without recursing. Then turn on row-level security for every table: a person reaches only their own rows, an admin reaches everything, and every insert and update needs an explicit check that the new row is not being filed under someone else. Then show me how to confirm a second account gets nothing back for the first account’s videos.
- 04
Bookmark, then ask for the library and the editor
The editor is the biggest single piece of interface in the build, and the one you will iterate on most. Bookmark first so a bad direction is one click back.
PromptBuild the library and the editorBookmark the current version first. Then build the library: an upload that stores the video in the bucket and creates its row, a list of the signed-in person’s videos with their status, and a detail page that runs the transcription from step 01 and saves the result as the video’s first track. Then the editor: the video playing above a horizontal timeline of captions, each draggable to retime and editable in place, with split and merge, keyboard shortcuts, undo and redo, and autosave a few seconds after the last change. Keep all of it driven by one piece of caption state so the timeline, the list and the preview never disagree. Add a styling panel (font, size, colour, background, position) whose changes show over the video immediately.
Expect to send several follow-up messages on this one screen. That is normal for a timeline, and it is exactly why the bookmark matters. Select the element in the preview to point at what should move rather than describing where it sits.
- 05
Add translation and the exports
Translation is the first and only call that leaves the app, so it comes with the key handling and the logging built in. Then the four ways a finished track gets out.
PromptAdd translation and exportAdd one server-side "ai" function that calls my AI provider with the key held where the browser cannot reach it, refuses any caller who is not signed in, and logs every call with the account, the video and the token counts. Add a "Translate" action on a track that sends its captions to that function ten at a time with their timestamps, asks for the same lines in the chosen language with the timestamps untouched, returns immediately, writes progress to the new track as batches finish, and shows that progress in the editor. Then exports: .srt, .vtt and .txt produced from any track with no AI involved, and a captioned-video export in the browser that draws the styled captions over the video and records the result as a WebM. Tell me plainly what the captioned export needs from the storage bucket to work, and what making the bucket public would mean for who can open a video by its link.
Ask that last question on purpose. The template this guide sits beside made its bucket public for exactly this reason, and the right answer for you depends on whose videos these are.
- 06Destination
Add limits, admin and the demo account, then publish
Finish with the pieces that keep the bill and the trial honest, try the whole thing as a stranger in the preview, then publish from the same tab.
PromptAdd limits, admin, demo, and publishThree more pieces. Rate limits of ten uploads, twenty transcriptions, thirty translations and fifty exports per account per hour, counted in the rate-limits table rather than in memory, with quota costs read from the settings table. An admin console over users, videos, usage and settings, visible only to the admin role. And a demo role: any sign-up ending in @demo.com receives it automatically and a function wipes that account’s videos, tracks, logs and usage after an hour of inactivity. Then walk me through the whole thing in the preview: sign up as a demo account and caption a short clip, translate it, export a .srt and a captioned video, then sign up as a second real account and confirm it sees none of the first account’s videos. When it holds up, publish it.
Protecting user content and translation keys
A subtitle studio manages three critical assets: your users’ videos, their saved captions, and your paid translation keys. Follow these essential security rules before launching.
Secure login & password protection
Sign-up, sign-in, sessions and password resets come from the authentication service attached to your database. Use it as it comes, because a subtitle studio gives you no reason to build identity logic of your own, and a hand-written version that is subtly wrong fails silently until somebody’s videos are exposed.
User access levels & safe demo mode
The template ships visitor, user and admin, plus a demo role that any sign-up with a demo address receives automatically. A demo account can do everything a real one can, and everything it did is wiped after an hour of inactivity, which is how a public trial stays harmless.
Private user data protection
The template ships 31 access policies, and the rule they enforce is simple: a video, its subtitle tracks, its usage records and its activity log belong to one account, and an admin reaches all of them. The database applies that on every read and write, so a screen that forgets to filter still cannot show one person another person’s captions.
AI access for logged-in users only
All three server functions refuse a caller without a valid session, so an anonymous visitor cannot spend your translation key by finding the address. Check this first on any function you add, because an open AI endpoint is an invoice rather than a data leak.
Abuse protection & spending limits
Ten uploads, twenty transcriptions, thirty translations and fifty exports an hour per account, counted in the database rather than in one server’s memory, with quota costs you can change in settings. This is the part that keeps one enthusiastic afternoon from becoming your whole month’s AI bill.
Video & file protection
A later migration makes the uploads bucket readable by anyone holding a link, because the captioned-video export draws the video onto a canvas in the browser and that only works with a public file. Listing and writing still require the owner. If your users’ videos are sensitive, make the bucket private and move the captioned export to a server, and say which you chose.
Paid API key security
The provider key lives in the function’s secrets and never in the app, where anyone could lift it. Then the part people skip: the caption text goes to your provider for translation, and the file name goes to it for language detection. Say so to whoever signs in, and read your provider’s terms on what it does with what it receives.
Data backups & recovery
The free tier keeps no backups, so during the build your database is the only copy of every caption anybody fixed by hand. Daily backups kept for seven days start on Supabase Pro at $25/mo. Move to it before the first stranger uploads, because a lost afternoon of caption edits is not something you can regenerate.
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.
Paste this into the chat before launch so Lovable checks nobody can see data they shouldn’t.
One rule outranks everything above it: the database service key and your AI provider key live on the server and nowhere else, which means never inside the app people download and never inside a repository. If either gets out, treat it as compromised and rotate it the same day.
What speeds the build, and what slows it
Speeds the build
- One small request per message, such as a field, a screen or a rule, rather than the whole app at once
- Connecting your database before building screens that need real data, not after
- Using Select elements to point at the exact thing that should change, instead of describing its location in words
- Bookmarking a known-good version before a redesign or a change to the data model
- Reading each response before sending the next request, so small mistakes don’t stack up
Slows the build
- Asking for an entire app in one message instead of one screen at a time
- Building screens for data your database does not hold yet
- Describing which button or section to change instead of selecting it
- Skipping bookmarks, then scrolling far back through history to undo a bad change
- Approving several messages in a row without previewing what actually changed
Connecting GitHub (Optional)
Every change in Lovable is saved automatically without any technical setup. You only need to link GitHub if you want a private copy under your own control or plan to hand the codebase over to external developers.
What Git actually is
A recorder for a project: every change becomes a version you can go back to, and nothing is ever overwritten. GitHub is the service that keeps those versions online.
Lovable already saves every change
A new version is created each time Lovable changes your project. No save button, no Git command, and the full history is there to scroll back through.
Version history, Lovable docsReverting undoes the code, not your data
One click restores an earlier version of your code and redeploys it, but nothing already written to your database rolls back with it. A UI or logic change is safe to undo. A change that touched real records is not.
Bookmark before a big change
Before a redesign or a change to your data model, bookmark the version you are on: one click back instead of a long scroll through history.
Connecting it, if you want to
Open your project settings, pick GitHub, and authorise the account. Lovable creates a private repository and keeps it in sync both ways: changes in Lovable reach GitHub, and anything pushed to that branch comes back in. Free on every plan.
GitHub integration, Lovable docsIt’s also how you leave, if you ever want to
The synced repository is a standard Vite and React project: clone it, hand it to a developer, or deploy it yourself.
Deployment, hosting, and ownership, Lovable docsWhere to host your application
Hosting gives your app a home on the internet so anyone can open it via a web link. Choose a service below to make your site live. (Your database, logins, and business records are stored separately in Supabase, covered below).
| Host | Best for | Notes | Free tier |
|---|---|---|---|
| LovableBuilt in | Publishing from the chat | The project you have been previewing publishes itself, with nothing to configure and no account to open anywhere else. Free on any plan at a lovable.app address. Paid plans put it on your own domain: buy one through Lovable and the DNS is done for you, or point one you already own at it using the two records the setup screen shows. Certificate issued automatically either way. | Free on a lovable.app subdomain · own domain on paid plans |
One button, and the app you have been previewing is live.
Hosting it somewhere else
Only for a setup Lovable does not offer: a host you already pay for, or the exported code on your own account. None of it is needed to go live.
| Host | Best for | Notes | Free tier |
|---|---|---|---|
| Vercel | One-click deploys | Connect the repository and it publishes on every push, and the template already carries the one routing file a link straight to a video needs. The free Hobby tier is personal and non-commercial, so a studio that clients or customers sign in to belongs on Pro at $20/user/mo. | Pro from $20/user/mo (Hobby is non-commercial) |
| Netlify | Drag-and-drop or Git | Connect the repository or drag the built folder onto the page. Accept the redirect rule it prompts you for, or a link to one video opens a not-found page instead of the editor. | Free tier |
| Cloudflare Pages | Users in more than one country | Serves the app from wherever the person opening it is. The app itself is small, because the speech model arrives from its own home rather than from your host, so the first paint is fast almost anywhere. | Generous free tier |
| GitHub Pages | Not really this app | Publishes from a GitHub project once one routing setting is changed. Here to be ruled out: free means a public repository, and the client sits beside a project that holds function secrets you do not want browsed. | Free from a public repo only |
| Firebase Hosting | Teams already on Google | One setup, then a single command per release, with the rewrite for deep links in its own config file. Worth it mostly if Google is already your stack. | Free Spark tier |
| AWS Amplify Hosting | Teams already on AWS | Deploy from the AWS console with a rewrite rule for deep links. Sensible when AWS is already where your billing goes, never because the app asked for it. | Free tier (build + hosting) |
| Surge | Publish from the terminal | One command puts the built folder online with no repository in the loop. Fine for showing a colleague the editor, wrong the moment real people upload their own videos. | Free - unlimited publishing |
| DigitalOcean App Platform | DigitalOcean users | Builds and serves from the account you already have, which in a small company means one fewer supplier beside your database and your AI provider. | Free - 3 static sites, 1 GB/mo transfer |
Two questions decide this, and speed is not one of them. Does the plan allow commercial use, which Vercel’s Hobby tier does not. And does a link straight to one video open the editor for somebody who has never visited, because a link to a specific video is exactly what a person pastes to a colleague. The speech model does not touch your host at all: the browser fetches it from its own home on the first visit and keeps it.
The first transcription downloads the speech model, and on a slow connection that looks like nothing is happening. The template says thirty to sixty seconds and gives up after two minutes. Before you launch, try it on a phone on mobile data rather than at your desk, keep the progress message on screen the whole time, and decide what the app says if the download fails rather than letting a spinner run forever.
Keep your data in Supabase
Videos, captions, accounts and usage, plus the one function that talks to your AI provider, which is where the key belongs and the only place it should ever be.
| Service | Best for | Notes | Free tier |
|---|---|---|---|
| Supabase | Data, auth, files and the translation call | Captions and usage in Postgres, accounts from its auth service, uploaded videos in storage, and one function per AI job with the provider key in its secrets. Make a free project, hand over the URL and publishable key, and it is connected. The line to watch is storage, because this is one of the few apps here that keeps large files, and the decision to watch is whether the video bucket stays public. | Free tier, then usage-based |
Add AI capabilities in one simple step
Securely route your AI API keys through a lightweight serverless function. Use simple prompts to automatically translate a subtitle track, detect the spoken language, and tidy the lines before export.
Translate a finished track
The feature people buy a subtitle tool for. Send the captions to your provider a batch at a time, keep every timestamp, and show progress while it runs, because a long video takes a while and a blank screen looks broken.
Add one server-side "ai" function that talks to my AI provider, with the key held in server secrets and never anywhere the browser can reach, and make it refuse any caller who is not signed in. Then add a "Translate" action on a subtitle track: send the lines to that function ten at a time with their timestamps, ask for the same lines in the target language with the timestamps untouched, and save the result as a new track linked to the original. Return immediately, write progress to the track row as batches finish, and have the editor poll it so the person sees a bar rather than a spinner. Log every call with the account, the video and the token counts.
Detect the language from the audio, not the file name
Guessing the spoken language from a file name works until somebody uploads recording_final_v2.mp4. Use the first minute of the transcript instead, and let the person correct it before anything else runs.
Change language detection to work from the first thirty seconds of the transcript rather than from the file name. Send that text to the ai function and ask for a two-letter language code, show the result in the editor as an editable field with a note saying it was detected, and use the person’s choice for translation from then on. Fall back to the file name only when no transcript exists yet.
Tidy the lines before export
A raw transcript has no punctuation worth the name, runs sentences together and keeps every um. One pass through the model turns it into captions a person would have written, and the editor keeps the original in case it overreaches.
Add a "Tidy captions" action that sends the track to the ai function and asks for the same lines with punctuation and capitalisation fixed, filler words removed, and any line longer than 42 characters split at a natural break, keeping every start and end time and never changing the meaning. Show the result as a proposal the person accepts or rejects line by line, and keep the original track untouched until they accept.
Chapters and a summary from the transcript
The description, the chapter markers and the short summary a video platform asks for are all in the transcript already. Drafting them is the chore that stops people publishing.
Add a panel on the export screen that sends the finished transcript to the ai function and returns a short summary, five to eight chapter markers with timestamps, and a handful of tags. Present all of it as editable drafts the person can copy, and let them regenerate any one part on its own without redoing the rest.
You bring no key and pick no provider: Lovable manages an API key per project, and if you do not name a model it chooses one from what you describe. Match the model to the job: fast and cheap for anything that runs on every record, stronger only where the reasoning matters. Send every feature above through that one integration.
Get a head start with our template
Everything above starts from an empty folder, and it does not have to. The same studio exists already built: the speech model runs, the timeline works, translation runs in the background and the exports come out, so your time goes on the languages, the styles and the name on the door.
AI Subtitle Studio
The exact subtitle studio this guide builds, packaged so you can open it, point it at your own backend, and make it yours from there. A subtitle workspace that takes a video from spoken words to a finished file. Transcribe it locally with no per-minute cost, fix and style the lines on a timeline, translate into other languages, and export a captioned video - so one upload reaches a much wider audience.
The key benefits of starting with a template
The speech model, the timeline editor, translation and the exports already work. Behind them, the roles, the hourly limits, the demo account and the admin console are done too.
Building the core from scratch
~101 hrs
Opening the template, already built
~1 hr
Pay Once, Own Forever. Build exactly what your team needs without renting a monthly SaaS subscription, paying per-seat fees, or dealing with platform lock-in.
Transcription in the browser, already wired
The speech model loads in a background worker, uses the graphics chip where the browser allows it and falls back where it does not, and chunks long audio so the page stays usable. That is the part a first attempt gets wrong, and it is done.
A timeline editor with undo and autosave
Captions on a track under the video, retimed by dragging, edited in place, with keyboard shortcuts, undo and autosave, plus a styling panel whose preview is what the export produces.
Translation in the background, progress on screen
Send a track to your own AI key and the function works through it in batches while the editor shows progress. Each translated track saves as its own version and exports on its own.
Four export paths
Three plain subtitle formats generated on the server with no AI involved, and a captioned video recorded in the browser for the platforms that cannot take a separate file.
Roles, limits and an admin console
Visitor, user and admin roles plus a self-resetting demo role, 31 access policies holding each account to its own videos, hourly rate limits on uploads, transcriptions, translations and exports, and an admin view over users, videos, usage and settings.
From founders who build on our templates
We needed a working product in front of users fast. I started from one of these templates instead of a blank repo, customized it in our AI tool, and shipped in days - not the weeks it usually takes.
Jeevan ThomasFounder & CEO, Hado.aiCommon questions
The transcription minute is, yes. The speech model downloads into the visitor’s browser on first use and runs on their own processor, so no service bills you for the audio. What you pay for is storage for the videos people keep and, if you offer it, translation through your own AI key, which costs tokens rather than minutes.
Less accurate than the rented services, and honestly so. The model that fits in a browser is the smallest one, and it gets clear speech mostly right and difficult audio less so, which is why the timeline editor exists. A larger model is a one-line swap and buys accuracy at the cost of a longer download on the first visit.
Yes, to your own storage, so it can sit in the library, play under the editor and be exported later. The transcription itself still happens in the browser rather than on a server. Decide how long uploads live, because they are the one large thing this app keeps.
A browser tab has finite memory, so this is a decision rather than a fixed number. The template chunks audio into thirty-second pieces and warns itself above thirty minutes. Short talks and lessons are comfortable on ordinary hardware. Set a ceiling you can defend, say it before the upload, and fail politely.
The speech model transcribes many spoken languages, and translation into any target language goes through your own AI key. One honest note: the template guesses the spoken language from the file name rather than the audio, so the editor lets a person correct it, and the AI section shows the prompt that fixes it properly.
Yes. The browser draws the styled captions over the video and records the result as a WebM file, with no server rendering. It needs the uploaded video to be readable by the browser, which is why the template’s storage bucket is public, and it is slower than a desktop editor because it plays the video through in real time.
No. Describe what you need in plain language and your AI coding tool writes the tables, the accounts, the access rules and the storage rules. Your own job is creating a free Supabase project for it to point at, so the records end up somewhere you own.
Less than a subtitle service, because the metered minute is missing. What is left is Supabase and a host, both starting free, with Supabase Pro from $25/mo once real people upload and you want backups, plus storage for the videos you keep and a translation bill on your own AI key that runs to cents per hour of speech at the default model’s rates.
Inside the app, nobody: every video, track and usage record belongs to one account and the database enforces it on every query. Outside it, be honest with yourself about the storage bucket, which the template ships readable by anyone holding a link so the captioned export works. Make it private and render on a server if your users’ videos are sensitive.
Not without an account, but the template makes accounts cheap to try: any sign-up with a demo address gets a demo role, can do everything a real account can, and is wiped after an hour of inactivity. That is the right shape for a public trial of a tool that spends your translation key.
Nothing here is proprietary. Captions live in ordinary PostgreSQL and export as standard subtitle files, videos come out of storage as the files they went in as, and a standard database dump gives you everything in a form any Postgres host accepts.
Yes. Every host here connects a custom domain with free HTTPS in a few clicks. Worth doing before you invite anyone, because a tool that asks people to upload their own videos should look like it belongs to you.
No. Everything happens in a browser tab: you describe what you want in the chat, and Lovable writes and previews the code. The setup section above covers the handful of things you connect first: an account, a plan, and your own Supabase project.
A sketch on the Free plan is fine for testing an idea, with no real backend behind it. A project connected to your own Supabase account is the one you can actually launch, with real logins, real data, and your own domain.
Build credits reset every day (Free) or on your billing cycle (paid plans). If you run out mid-session, the app you’ve built stays exactly as it is. You either wait for the reset or move up a credit tier to keep going right away.
References
Sources checked September 2026- 01Pricing (AI minutes per seat, human captions), Rev. rev.com
- 02Pricing (media hours per person), Descript. descript.com
- 03Pricing (subtitle and translation minutes per member), Kapwing. kapwing.com
- 04Pricing (minutes per month, top-up rate), Happy Scribe. happyscribe.com
- 05Transformers.js documentation (running models in the browser). huggingface.co
- 06whisper-tiny model card (the browser speech model). huggingface.co
- 07API pricing (per-token rates for the default translation model), OpenAI. developers.openai.com
- 08Pricing (Pro plan, storage, egress, backups), Supabase. supabase.com
- 09Web developer hourly rates 2026 (freelance and agency benchmarks). developex.com
- 10Row Level Security, Supabase docs. supabase.com
- 11Storage access control, Supabase docs. supabase.com
- 12Sign up, Lovable. lovable.dev
- 13Subscription plans (Free, Pro, Business), Lovable docs. docs.lovable.dev
- 14Connect Supabase, Lovable docs. docs.lovable.dev
- 15GitHub integration, Lovable docs. docs.lovable.dev
- 16Deployment, hosting, and ownership, Lovable docs. docs.lovable.dev
- 17Version history and reverting, Lovable docs. docs.lovable.dev
- 18Preview toolbar (Select elements), Lovable docs. docs.lovable.dev
- 19AI features and model selection, Lovable docs. docs.lovable.dev
- 20Custom domains, Lovable docs. docs.lovable.dev
This guide is general information. Third-party prices, plan limits and market rates are quoted from the sources above and were last checked on the date shown. Vendors change them without notice, so confirm before you budget. Transcription accuracy, speed and the practical file limit depend on the visitor’s own device and browser, so treat any performance expectation here as a starting point to test rather than a specification. Build hours and the cost estimates derived from them are our own estimates, not quotes. Lovable is a product of Lovable Labs. Verify current capabilities and pricing before relying on them.