100% free — always
The complete free Lovable guide
This is the whole journey in one place: what to decide before you prompt, how to get Lovable to build what you actually pictured, how to wire in data and logins, and how to publish something you're happy to put your name on. Every step links through to a detailed answer — 260 of them, all free, all dated.
Step 1
Getting Started
Understand the platform, credits and ownership before you build anything real.
- What is Lovable?Lovable is an AI app builder: you describe the website or app you want in plain English and it writes and runs the real code for you, in the browser.
- How does Lovable work?You send a prompt, Lovable plans and writes real code files, runs the project, and shows you a live preview — repeating that loop for every change you ask for.
- Is Lovable good for beginners?Yes — beginners can ship a real website on day one, as long as they build in small steps and accept a learning curve once databases, logins and payments enter the picture.
- Do I need to know how to code to use Lovable?No. You can build and publish a working site without writing a line of code — but understanding a few concepts (components, databases, permissions) makes you dramatically more effective.
- What can I build with Lovable?Anything that runs as a web app: marketing sites, SaaS products, dashboards, CRMs, booking systems, directories, internal tools, AI apps and lightweight ecommerce.
- Can Lovable build a complete website?Yes — a complete, publishable multi-page website with forms, content, SEO metadata and a custom domain is well within scope.
- Can Lovable build a SaaS app?Yes. Accounts, per-user data, roles, dashboards and Stripe billing are all standard Lovable territory — but build them one layer at a time, not in one prompt.
- Can Lovable build an ecommerce website?Yes for small, focused stores — a handful of products, Stripe checkout and order records. For large catalogues, put Shopify or a commerce platform behind it instead.
Step 2
Prompting & Building
Most build problems are prompt problems. Learn the structure that works.
- How do I write a good Lovable prompt?Describe one concrete outcome, give real content and constraints, and say what NOT to touch. Plan first for anything non-trivial, then build in small steps.
- How do I get Lovable to follow my design properly?Give Lovable concrete references — a screenshot, a site to draw from, exact colours and fonts — and store them in Project knowledge so every prompt is checked against the same design rules.
- How do I give Lovable a website to use as inspiration?Paste the site's URL in your prompt and describe which parts to borrow — layout, spacing, tone — Lovable can't literally browse and clone it, so be specific about what you want copied.
- How do I get Lovable to copy a design style without copying the website?Ask for the underlying pattern — layout, spacing, type scale — in your own words and colours, not the site's actual assets, text or exact visual identity.
- How do I upload images to Lovable?Attach images directly in the chat message box — Lovable can use them as design references or as assets to place in your app (e.g. a logo or product photo).
- How do I get Lovable to use my logo?Attach your logo file in chat and tell Lovable exactly where to place it (header, favicon, footer) — it won't guess sizing or position from the file alone.
- How do I give Lovable my brand colours?Give exact hex codes in your prompt or Project knowledge, name which role each colour plays (primary, accent, background), and ask Lovable to apply them via the Tailwind/shadcn theme, not one-off styles.
- How do I get Lovable to use a specific font?Name the exact font (e.g. from Google Fonts) and tell Lovable to load it and apply it across the theme, not just the current page.
Step 3
Design & Mobile
Make it look deliberate on every screen size.
- How do I make my Lovable website look less AI-generated?Set a real colour palette, a font pairing and spacing scale up front, then ask Lovable to remove generic gradients, stock-photo hero clichés and default shadcn styling so the site reads as bespoke.
- How do I improve the design of a Lovable website?Audit one page at a time in Preview, fix typography/colour/spacing consistency first, then use the preview toolbar to select and adjust individual elements rather than re-prompting the whole page.
- How do I make my Lovable website look professional?Professional usually means restrained: a small consistent palette, two fonts, generous whitespace, real content instead of placeholders, and working links — not extra visual effects.
- How do I fix spacing problems in Lovable?Point Lovable at specific sections with exact spacing values (in Tailwind units or pixels) rather than saying "fix the spacing" — vague requests get vague, inconsistent results.
- How do I fix inconsistent fonts?Tell Lovable exactly which two fonts to use for headings and body text, add it to Project knowledge, and ask it to sweep the whole app and replace any font that doesn't match.
- How do I make my Lovable website mobile-friendly?Lovable's Tailwind output is responsive by default, but you still need to explicitly review and prompt fixes at mobile breakpoints — ask Lovable to check every page in a mobile viewport and fix overflow, tap targets and stacking order.
- Why does my Lovable website look different on mobile?Tailwind renders layouts differently at each breakpoint by design, but if the difference looks broken rather than intentional, it usually means an element uses a fixed width, an unhandled grid, or missing responsive classes for that breakpoint.
- How do I fix horizontal scrolling on mobile?Horizontal scroll on mobile almost always comes from one element wider than the viewport — a fixed-width box, an un-wrapped table, or negative margins — ask Lovable to find and fix the specific overflowing element rather than the whole page.
Step 4
Forms & Email
Capture enquiries reliably and make sure the email actually arrives.
- How do I create a contact form in Lovable?Describe the form fields you want in chat (name, email, message) and ask Lovable to build a contact form; it will generate the React form with validation and wire it to a submit handler.
- Where do Lovable form submissions go?Nowhere, by default — a form only exists on the front end until you connect a destination: a database table (Lovable Cloud/Supabase) and/or an outgoing email via an integration like Resend.
- How do I save form submissions to a database?Connect Lovable Cloud (or your own Supabase project), then ask Lovable to create a table for submissions and wire the form's submit handler to insert a row into it, with row-level security limiting who can read the data.
- How do I email form submissions to myself?Connect an email integration (Resend is the standard option), then ask Lovable to trigger a server-side function that emails you the form data whenever it's submitted.
- Why isn't my Lovable contact form working?Check, in order: whether a submit handler is actually wired up, whether a backend (Lovable Cloud/Supabase) is connected if you're saving data, whether client-side validation is blocking submission, and the browser console for errors.
- Why aren't form emails being delivered?Most delivery failures trace back to an unverified sending domain, spam-folder filtering, or a server function that's failing silently — check your email provider's logs (e.g. Resend's dashboard) first.
- How do I stop spam form submissions?Add a honeypot field, rate-limit submissions server-side, and validate inputs strictly; for public-facing high-traffic forms, add a CAPTCHA on top.
- How do I add CAPTCHA to Lovable?Ask Lovable to integrate a CAPTCHA provider such as Google reCAPTCHA or Cloudflare Turnstile, including the site key on the front end and server-side verification of the token before accepting the submission.
Step 5
Cloud, Database & Supabase
Where your data lives, and how to keep it private by default.
- What is Lovable Cloud?Lovable Cloud is a Supabase backend (Postgres database, authentication, storage, edge functions) that Lovable provisions and manages for your project automatically, with no separate account or dashboard needed.
- When should I use Lovable Cloud?Use Lovable Cloud for most new projects needing a backend — it's the fastest path with no separate account; connect your own Supabase project instead if you already have one, need direct dashboard access, or must integrate with existing Supabase infrastructure.
- How do I connect Supabase to Lovable?In your Lovable project, open the Supabase integration and authorise Lovable to connect to an existing Supabase project (or create a new one), then Lovable can read and write to it the same way it does with Lovable Cloud.
- How do I create a database in Lovable?Ask Lovable to set up Lovable Cloud (or connect your own Supabase project) and describe the tables you need — Lovable provisions the Postgres database and creates the tables from your description.
- How do I create database tables?Describe the table's purpose and fields in plain language to Lovable — including which fields are required, their types, and any relationships to other tables — and Lovable generates the table with appropriate row-level security policies.
- How do I view my database data?Open the Cloud tab (or ask Lovable) to browse tables, edit rows and run SQL directly inside your project — no separate Supabase login needed.
- Why isn't Lovable saving data?Most commonly this is a missing or misconfigured RLS policy blocking the insert/update, an unconnected database, or a form that never calls the backend at all.
- Why is Supabase returning a 403 error?A 403 means Row Level Security blocked the request — the current user's role doesn't match any policy allowing that read or write on that table.
Step 6
Login & User Accounts
Accounts, sessions, protected pages and admin roles.
- How do I add login to Lovable?Ask Lovable to add authentication — it enables Lovable Cloud (if not already on), then generates sign-up/login pages and wires them to email, Google, or other providers.
- How do I add user registration?Ask Lovable to add sign-up with the fields and verification behaviour you want — it builds the form, creates the user in Lovable Cloud's auth system, and can store extra profile details in your database.
- How do I add Google login?Ask Lovable to add Google sign-in — it can use Lovable's managed Google OAuth for a quick setup, or your own Google Cloud OAuth credentials if you need custom branding or scopes.
- How do I add password reset?Ask Lovable to add a "forgot password" flow — it uses Lovable Cloud's authentication to email a reset link and lets the user set a new password.
- Why isn't my login working?Check the browser console for the actual error first — common causes are unconfirmed email, a redirect URL mismatch, RLS blocking the post-login profile read, or a provider (like Google) misconfigured for the current domain.
- Why does my app keep redirecting to login?This is almost always a session or route-guard bug: either the auth session isn't persisting, or a protected route checks auth state before it's loaded, so it bounces back to login even when signed in.
- Why are verification emails not arriving?Usually the email lands in spam, the sending rate limit on Lovable Cloud's default mailer has been hit, or you haven't connected a proper email provider yet.
- How do I restrict pages to logged-in users?Wrap the routes in a protected-route component that checks the current auth session and redirects signed-out users to login, and back this up with row-level security on any data those pages fetch.
Step 7
Domains & Publishing
Publish, connect your domain and keep environments straight.
- How do I publish a Lovable website?Click Publish in the top-right of the Lovable editor; it deploys your current version to a live `*.lovable.app` URL (or your connected custom domain) in under a minute.
- How do I connect my own domain to Lovable?In Project settings, go to Domains, add your domain, and create the DNS records Lovable gives you (usually an A record or CNAME) at your domain registrar or DNS host — then wait for verification, which can take anywhere from minutes to a few hours.
- Can I use a .com.au domain with Lovable?Yes — Lovable's custom domain feature works with any domain you own, including .com.au, as long as you can add DNS records at wherever the domain's nameservers point.
- How do I connect a Cloudflare domain to Lovable?Add the DNS records Lovable gives you in Cloudflare's DNS panel, and set the proxy status to 'DNS only' (grey cloud) rather than proxied (orange cloud) so Lovable can verify and serve the domain correctly.
- What DNS records does Lovable need?Lovable shows the exact records to add when you connect a domain — typically an A record for the root/apex domain and a CNAME for `www` (or a subdomain), plus any verification record it asks for.
- Why isn't my custom domain connecting?Most failures come down to DNS records that don't exactly match what Lovable asked for, edits made in the wrong place, or not waiting long enough for DNS to propagate — check the records first, then give it time.
- How long does a Lovable domain take to connect?Usually a few minutes to a couple of hours once the DNS records are correctly added, but full global DNS propagation can technically take up to 48 hours in rare cases.
- Why does my domain show a 404 or 403 error?A 404/403 on a connected domain usually means DNS is pointed correctly but the app hasn't been published, the domain is linked to the wrong project, or the SSL/routing hasn't finished setting up yet — it's a different problem from DNS not resolving at all.
Step 8
SEO & Google
Get indexed, get titles right, get found.
- Is Lovable good for SEO?Lovable apps can rank well — Lovable now runs an SEO/AI-search review and lets you set titles, descriptions, sitemaps and structured data — but you still have to do the SEO work; it isn't automatic just because the site is built with Lovable.
- How do I SEO a Lovable website?Set unique titles and meta descriptions per page, add a sitemap.xml and robots.txt, use Open Graph tags, add alt text to images, connect a custom domain, and submit your sitemap to Google Search Console.
- Does Lovable automatically create a sitemap?No — a sitemap.xml isn't generated automatically for a typical project. You need to ask Lovable to add one, or it may be included as part of a dedicated SEO setup/review feature on newer projects.
- How do I create a sitemap.xml?Ask Lovable to generate a sitemap.xml listing your public routes and place it in the public folder, or ask for a dynamically generated one if your pages come from a database.
- How do I create robots.txt?Ask Lovable to add a robots.txt file in the public folder that allows crawling of public pages, blocks private/admin routes, and points to your sitemap.xml.
- How do I change meta titles?Ask Lovable to set a unique <title> tag per page (or edit it directly in the head/layout code) — each important page should have its own descriptive, keyword-relevant title rather than sharing one site-wide title.
- How do I change meta descriptions?Ask Lovable to set a unique meta description per page — a one to two sentence summary in the <meta name="description"> tag that Google may show under your title in search results.
- How do I add canonical URLs?Ask Lovable to add a <link rel="canonical"> tag to each page pointing to its preferred URL — this tells search engines which version to index when the same content is reachable at more than one address.
Step 9
GitHub & Code
Sync to GitHub, read your own code and roll back safely.
- How do I connect Lovable to GitHub?Open your project's Settings, go to the GitHub/Git sync integration, authorise Lovable's GitHub app, and choose or create the repository to sync with — Lovable then keeps code in sync both ways automatically.
- Should I connect my Lovable project to GitHub?Yes for most real projects — it gives you a free, portable code backup and lets developers or other tools work on the code, with no real downside beyond one extra setup step.
- When should I connect GitHub?Connect it as soon as the project is more than a throwaway experiment — ideally at the start, and definitely before involving another developer, going to production, or relying on the app for a real business.
- Does Lovable automatically sync with GitHub?Yes — once connected, Git sync is automatic and two-way: changes made in Lovable push to GitHub, and commits pushed to GitHub pull back into Lovable, with no manual export step required.
- Why isn't GitHub syncing with Lovable?Usually a permissions/authorisation issue, a disconnected integration, or a conflicting edit on both sides at once — reconnect the GitHub app and check recent commits on both ends.
- Can I edit Lovable code directly in GitHub?Yes — once Git sync is connected, you (or a developer) can edit code directly in GitHub or your own IDE, and those changes sync back into Lovable automatically.
- Will editing GitHub break my Lovable project?Not inherently — Git sync is designed to handle two-way edits, but structural mistakes, conflicting simultaneous edits, or breaking the build can cause problems that show up back in Lovable.
- How do I restore an older version?Open Version history in your Lovable project, find the version you want, and revert to it — this restores the project's code (and, if bookmarked, is easy to find again) without needing GitHub.
Step 10
Integrations & APIs
Payments, third-party APIs and keys handled properly.
- How do I connect an API to Lovable?Describe the API and what you want it to do in Chat; Lovable will typically wire the call through a server function (Edge Function) so any API key stays off the client.
- How do I connect Stripe?Use Lovable's built-in Payments feature where available; for anything it doesn't cover, ask Lovable to wire Stripe through a server function that keeps your secret key off the client.
- How do I accept payments?Ask Lovable to add its built-in Payments feature (backed by Stripe) for checkout; it handles one-time payments and subscriptions without you managing raw API keys in the UI.
- How do I create subscriptions?Set up recurring prices in Stripe, then ask Lovable to create checkout for those prices and store each user's subscription status in your database so you can gate features accordingly.
- How do I connect OpenAI?For most cases, use Lovable AI (the built-in AI Gateway) so users don't need their own key; if you specifically need OpenAI, ask Lovable to store your API key as a secret and call it from a server function.
- How do I connect Google Maps?Get a Google Maps API key restricted to your domain, store it as a secret, and ask Lovable to embed the map component using that key server-side where possible.
- How do I connect Google Analytics?Ask Lovable to add your Google Analytics measurement ID as a script/tag in the site's head, or install it via Google Tag Manager for more flexibility.
- How do I install Google Tag Manager?Ask Lovable to add your GTM container snippet to the site's shared head and body, then manage individual tags (analytics, ads, pixels) from within Tag Manager itself.
Step 11
Errors & Troubleshooting
A repeatable diagnostic sequence instead of re-prompting blindly.
- Why is Lovable not working?Usually it's not Lovable itself but one specific failure — a build error, a stuck message, a Supabase hiccup, or a browser issue. Diagnose in order rather than guessing.
- Why is my Lovable project stuck?A stuck project usually means a message is still processing, a build failed silently, or you're in a fix loop. Check the chat status, the build/error banner, and version history before assuming it's frozen.
- Why is Lovable chat stuck loading?Chat usually gets stuck loading due to a network blip, a very large/complex request, or a backend timeout. Refresh first, then check the console before resending the same prompt.
- Why is my Lovable preview blank?A blank preview almost always means a JavaScript error is stopping the app from rendering. Open the browser console to find the exact error, then ask Lovable to fix it.
- How do I fix a white screen in Lovable?A white screen is a rendering crash — check the browser console for the error, paste it back to Lovable verbatim, and revert to a working version if repeated fixes don't clear it.
- Why did Lovable break my website?Something in a recent prompt likely had a side effect on shared code, styles or data. Check version history to see exactly what changed, then decide whether to revert or fix forward.
- How do I undo Lovable changes?Open Version history, find the last version before things went wrong, and revert to it — this restores the whole project to that exact state.
- How do I fix a Lovable build error?Read the exact error message and file it points to, paste it back to Lovable, and let it fix that specific error rather than describing the symptom vaguely.
Step 12
Speed & Performance
Faster pages, smaller images, better Core Web Vitals.
- Why is my Lovable website slow?Slowness is usually caused by large unoptimised images, too much data fetched at once, or heavy client-side rendering — profile it with Lighthouse/DevTools before asking Lovable to fix anything.
- How do I speed up a Lovable website?Compress and lazy-load images, fetch only the data each page needs, remove unused dependencies, and ask Lovable to run a performance/codebase audit to find the highest-impact fixes.
- Why does my Lovable app get slower as I add features?Each new feature can add its own data fetches, dependencies, and re-renders that compound over time — without periodic clean-up, an app accumulates weight even if each individual change seems small.
- How do I improve Lighthouse scores?Run Lighthouse to find your worst-scoring category, fix the top 2-3 flagged issues (usually images, unused JavaScript, or render-blocking resources), and re-run it to confirm before moving on.
- How do I improve Core Web Vitals?Focus on the three metrics Google measures — LCP (loading), INP (interactivity), and CLS (visual stability) — and fix the specific one flagged as poor, usually starting with images for LCP.
- How do I improve LCP?Largest Contentful Paint is almost always slowed by an oversized hero image or a render-blocking resource — compress/preload the largest above-the-fold element and defer everything not needed for first paint.
- Why are images loading slowly?Images usually load slowly because they're uploaded at full camera/design resolution, in an uncompressed format, and without lazy-loading or a CDN — the fix is compression, correct sizing, and modern formats.
- How do I optimise images?Resize images to their actual display size, compress them, convert to WebP/AVIF where practical, and lazy-load anything below the fold — ask Lovable to apply this across the project, not just one page.
Step 13
Security
Lock down data access before you invite real users.
- Are Lovable websites secure?Lovable includes built-in security scanning and API-key protection, but real security also depends on you setting up row-level security and role checks correctly — it isn't automatic just because you used Lovable.
- How do I run a security audit on Lovable?Open your project's Security view in Lovable to see automated scan results, then ask Lovable in chat to review RLS policies, role storage, and any exposed secrets in detail.
- How do I secure a Lovable app before launch?Before launch, verify RLS on every table, move roles into a dedicated user_roles table, confirm no secrets sit in front-end code, and run Lovable's Security view scan.
- How do I check Supabase RLS?Ask Lovable to list every table and its row-level security status and policies in plain language — Lovable Cloud users don't have Supabase dashboard access, so this has to go through chat.
- Can users access my database?Only through the access rules you (or your row-level security policies) allow — Lovable Cloud's database isn't publicly browsable, but a table without RLS enabled is effectively open to anyone with your app's public key.
- Can users access other users' information?Only if your row-level security policies are missing or too permissive — with correct RLS, a query for 'my orders' can only ever return rows owned by the logged-in user, regardless of what the front end sends.
- How do I protect admin pages?Check the user's role server-side (in the database query or Edge Function) using a dedicated user_roles table — hiding an admin link in the navigation menu doesn't stop someone visiting the URL directly.
- How do I protect API keys?Never put API keys in front-end code — store them as secrets used only inside server functions (Edge Functions), where the browser never sees them.
Step 14
Before Launch
The final pass that catches the embarrassing stuff.
- What should I check before launching a Lovable website?Run through security, forms, auth, payments, mobile display, browser compatibility, speed, SEO basics and broken links before you hit Publish.
- How do I test my Lovable app?Work through core user flows manually in Preview and on a published link, on desktop and mobile, as a logged-out user and as a normal account — not just as the builder.
- How do I test mobile devices?Open the published site on a real phone (or use your browser's device toolbar as a fallback) and check layout, tap targets, forms and navigation at common breakpoints.
- How do I test forms?Submit every form with valid, invalid and empty data, confirm error messages appear, and check that submitted data actually lands where it should (database, inbox or integration).
- How do I test user registration?Sign up with a real and a duplicate email, confirm verification emails arrive, check password rules, and confirm a new account only gets the access it should.
- How do I test password reset?Request a reset with a real account, confirm the email arrives with a working link, complete the reset, and confirm the old password stops working and the reset link can't be reused.
- How do I test payments?Run a real Stripe test-mode transaction end to end — checkout, webhook, database update and confirmation email — before switching to live keys.
- How do I test admin permissions?Log in as a non-admin account and try to reach every admin action directly (URLs, buttons, API calls) to confirm the server — not just the UI — blocks it.
