Lovable — Quick reference
Chat to build a full-stack React + TypeScript + Tailwind app with a Supabase backend, then export the code to your own GitHub. lovable.dev · docs.lovable.dev
The golden rule of a chat builder: plan before you prompt, then iterate in small, scoped batches. A specific, detailed first prompt beats a vague one — and small requests give smarter responses.
At a glance
Builds
Full-stack web apps from a chat prompt, with a live preview that updates as you type.
Stack
React + TypeScript + Tailwind front end; Lovable Cloud (Supabase) for database + auth.
You own it
One-click GitHub two-way sync — clone and run anywhere (Netlify / Vercel / your editor).
Free budget
Free 5 credits/day (~30/mo) + a free $25 Cloud / $1 AI balance per month.
Prompt recipes
| Goal | Prompt to paste |
|---|
| First app | "Build a personal task tracker web app. Users can add tasks with a title, due date, and status (todo / doing / done), see them in three columns, and mark them complete. Clean, modern design with a calm colour palette." |
| Add a feature | "Add a search box above the task columns that filters tasks by title, and add a small count badge to each column header." 2–3 changes max |
| Connect a database | "Add a database so tasks are saved permanently and reload when I come back. Store each task's title, due date, and status." |
| Add login | "Add email and Google sign-in. Each user should only see and edit their own tasks. Show a login screen to logged-out visitors." |
| Change the design | Use the preview toolbar — point at an element and describe the change — instead of re-prompting layout in chat (more precise, often cheaper). |
Smaller is smarter. "The smaller the part, the smarter the response." Send 2–3 related changes, review, then continue. Avoid giant "do everything" prompts — they make the result worse and burn credits faster.
Iterate & refine
Inline text edit
Free copy tweaks
In the preview toolbar, point at text and edit it directly. Free ≤100/day — no credits.
Try to Fix
Auto-recover
When a change breaks something, click it — Lovable scans the logs and attempts a fix. If a try or two doesn't clear it, switch approach instead of repeating.
Restore / revert
Roll back a version
Every message's ··· menu has Restore — roll the whole project back to that version. Reverting is free.
Ordering rule Wire the backend only after the front end is stable. Reverting to a pre-database version after the DB is wired can break the schema.
Add data & integrations
Backend
Lovable Cloud (Supabase)
Built-in Postgres + auth, auto-wired from a prompt — or connect your own Supabase project from the integrations panel.
Built-in AI
No API keys
Describe a feature (summaries, chat, classify, image gen). Runs server-side in an edge function via LOVABLE_API_KEY — never exposed in the browser. Default model: Gemini 3 Flash (preview); ask to switch to a deeper Gemini Pro / GPT or an image model.
Payments
Stripe
Lovable can create a Stripe sandbox for you, build the checkout, and show a test-mode banner. Test with Stripe's test cards before going live.
Email
Resend
Connect Resend to send branded confirmations and notifications from your own domain.
Connectors
50+ integrations
Supabase, Notion, Slack, HubSpot, Twilio, ElevenLabs, Firecrawl… plus MCP servers that give the chat agent access to your own tools and data.
Security
Scan before you ship
From the Security view: Basic scan lints RLS policies + audits deps; Deep scan reads code for access-control gaps, exposed secrets, unsafe input. Findings graded Error / Warning / Info. Both scans free (no credits).
Deploy & own the code
| Action | How |
|---|
| Publish | Click Publish (top-right) → pick a subdomain → live at [name].lovable.app. Deploys a snapshot of the current version. |
| Push edits live | Later edits don't auto-go-live — push them with Publish → Update. |
| Custom domain | Connect your own URL. Paid plan |
| Test / Live | Use Test and Live environments (Beta) — try risky changes in Test, then promote to Live. |
| GitHub sync | Connect GitHub for two-way sync (one branch at a time, usually main). Sync is free. |
| Code mode | Browse/edit the real React+TS source in-browser; reference an exact line like Button.tsx:42 in chat. Viewing & cloning free; editing code needs a paid plan. |
Cost & limits
Free
5 credits/day
Reset midnight UTC, max ~30/month, no rollover. Every chat build consumes credits.
Pro — $25/mo
100 monthly credits
Credits roll over, plus the 5 daily (capped 150/mo; scales to 10,000). Adds custom domains, badge removal, user roles, Code-mode editing.
Business — $50/mo
100 credits + SSO
Adds SSO, restricted (invite-only) projects, data-training opt-out, reusable design templates.
Cloud + AI balance
Free $25 + $1 / mo
Every workspace (incl. Free) currently gets a free $25 Cloud + $1 AI usage balance for hosting and built-in AI. Lovable lists this as temporary. Track it in Settings → Cloud & AI balance.
Free vs paid moves. Free inline text edits (≤100/day) · security scans & "Try to fix all" · revert · GitHub sync · viewing/cloning code · publishing to a lovable.app URL. Paid editing in Code mode · custom domains · restricted projects. Student discount up to 50% off Pro — verify at lovable.dev/pricing.
Tips & gotchas
• Plan first, then prompt — sketch the screens and who sees what before spending the day's credits.
• Watch credit drain — features cost 1–2 credits, but stubborn debugging loops can burn 50–150 before a fix lands. Use Try-to-Fix sparingly, then revert rather than digging deeper.
• Connect the backend after the UI is stable — a post-DB revert can break the schema.
• Use the toolbar for visual/text edits, chat for logic — it's cheaper and more precise.
• Re-run the security scan before every publish, especially once the app holds personal or lab data.
• Remember Publish → Update — edits don't go live until you push them.