How to Use Lovable: The Beginner's Guide to Building Your First App

CodexFuse Team · 2026-10-28T11:24:16.657Z · 15 min read

Learn how to use Lovable to build your first app without writing code: Plan mode, strong prompts, credits, Supabase, and publishing — in one beginner guide.

Learning how to use Lovable takes about ten minutes, and you do not need to write a single line of code to get there. Lovable is an AI app builder that turns a plain-English description into a working web app, complete with pages, a database, and login. You describe the app you want in a chat box, review what it builds, ask for changes one at a time, and publish it to a live web address. This guide walks through the whole path, from creating a free account to publishing your first app, and it covers the two things beginners get wrong most often: how credits work, and how to add a real database with Supabase.

If the idea of describing software instead of writing it sounds familiar, that is vibe coding: you stay in charge of what the app should do, and the AI does the typing. Lovable is one of the most popular tools in that lane, and it is a good first one because the free plan is genuinely usable and you keep ownership of the code it writes.

How Do You Use Lovable?

To use Lovable, create a free account, start a new project, and describe the app you want in plain English. Lovable builds the first version, you test it in the preview and ask for changes one at a time, then you publish it to a live URL.

1. Create a free account at lovable.dev with email, Google, GitHub, or Apple.
2. Start a new project and give it a clear name, such as “Tutor Booking App.”
3. Plan first in Plan mode and agree the approach before anything is built.
4. Write one strong prompt that names the user, the pages, the data, and what to leave out.
5. Review the first version in the preview, then request small, specific changes.
6. Publish your app and connect GitHub so you own a copy of the code.

The rest of this guide takes each step in turn, then explains credits, pricing, Supabase, and deployment in detail.

What Is Lovable, and What Can It Build?

Lovable is an AI software engineer that builds websites and web apps from chat messages. Its own documentation describes a four-part loop: describe the app, review and iterate, publish to a live URL, then sync the code to GitHub or GitLab when you need your own engineering workflow. What comes out is a real app, not a mockup: pages and navigation, forms and validation, a database, authentication, and integrations.

The realistic first projects are narrow ones. Lovable’s documentation lists SaaS products, customer dashboards, admin panels, marketplaces, booking tools, storefronts, internal workflow tools, educational products, simple web games, and company websites. The pattern that works best for a first app is one user type, one central object, and one complete action: for example, one tutor creates one booking, and an admin confirms it. A team request tracker with sign-in, a request form, a status field, and an admin view is the kind of first project Lovable’s own guides recommend.

Two facts shape everything else in this guide. First, every message you send costs credits, and the cost depends on the size of the job. Second, you own the code Lovable writes, and you can move it to GitHub at any time. Both are confirmed on Lovable’s own pricing page and FAQ, which we checked on October 28, 2026.

What Lovable is not

Lovable is not a website template gallery and it is not a no-code drag-and-drop builder. It generates code from your words, which means a vague description produces a vague app. It is also not the right tool for a large, complex enterprise system on day one; its own guides and independent reviews agree it shines at prototypes, MVPs, and internal tools. If you need a simple landing page, it will build one in minutes. If you need user accounts and a database, it can do that too, but only if you ask for it clearly.

How to Use Lovable in 6 Steps

Follow these steps in order. The order matters: planning before building is what keeps a free account’s credits from vanishing on the first afternoon.

Step 1: Create a free account

Go to lovable.dev and sign up with an email address, Google, GitHub, or Apple account. No credit card is needed for the free plan. After confirming your email, you land on the project dashboard, where your existing projects live and where you start new ones.

Before you build anything, understand the four building blocks. Your account is your login. A workspace is where projects, members, billing, and a shared pool of credits live. A project is one app, with its chat, preview, code, and version history. Chats are conversations outside a project for thinking through ideas, which send work to a project when it needs building. Credits belong to the workspace, not to you personally, so if you invite a colleague, they draw from the same pool. Set per-member limits before you share access.

Step 2: Start a new project

Click “New Project,” pick a descriptive name, and choose the app type that fits, such as an internal tool, a SaaS MVP, or an automation app. You will land in the editor, where the AI builds your app. The prompt box is the whole interface for your first build: everything starts with what you type there.

Step 3: Plan first in Plan mode

Lovable has two main ways of working. Build mode makes changes. Plan mode lets you talk through the approach first, and a Plan mode message costs 1 credit, according to Lovable’s pricing FAQ. For a new app, always start in Plan mode and describe four things: who the app is for and the one job it must do, the pages or screens you need, what data it stores, and anything you do not want yet, such as payments.

Read the plan, correct anything wrong, and only then switch to Build mode. This one habit saves more credits than any other, because fixing a wrong plan costs one message, while rebuilding a wrong app costs many.

Step 4: Write a strong prompt

A strong prompt names the user, the job, the pages, the data, and the exclusions. Compare a weak prompt with a strong one:

Weak: “Build an app for my tutoring business.”

Strong: “Build a booking app for a small tutoring business. Students browse three subjects, pick a date and time, and send a booking request. Tutors see a dashboard of requests and confirm or decline each one. Store each booking with the student’s name, subject, date, and status. No payments yet. Use sample data so I can test it.”

The strong version works because it gives Lovable the same five ingredients every good prompt needs: the app type and purpose, the user roles, the key features and fields, the expected workflow, and what to leave out. If you are coming from another AI tool, the same prompt-craft skills apply; our ChatGPT beginner guide covers how to write instructions the model can actually follow.

Step 5: Review, test, and change one thing at a time

Once Lovable builds the first version, click through it in the preview exactly as a user would. Fill in the forms, try the buttons, and check the app on a phone-sized screen. Then ask for small, specific changes, one per message. Small requests are cheaper and easier to undo than one huge request: Lovable’s own pricing examples put a button-color change at 0.50 credits and removing a footer at 0.90, while adding sign-up and login costs 1.20 and building a landing page with images costs 1.70.

You can check what any message cost by hovering over the three dots next to it in the message history. Watch that number for your first few builds; it is the fastest way to learn which of your habits are expensive.

Step 6: Publish and sync your code to GitHub

When the app works, publish it. Then connect GitHub, which pushes the generated code to a repository you own. Do this early, even if you are not a developer: it gives you a versioned history of your app, and it means a developer can extend the code later without starting from scratch or depending on Lovable’s interface. The next section on deployment covers this in detail.

How Many Credits Does Lovable Use?

Lovable uses credits as its currency, and the answer depends on what you ask for. Plan mode costs a flat 1 credit per message. Build mode is billed by the work done, not per message, so the same words can cost different amounts depending on the size of the job.

Lovable’s pricing page gives these example costs, checked October 28, 2026:

Here is the worked example for a small first app. One Plan mode message (1.00), one first build of a landing page with images (1.70), adding login (1.20), one small styling fix (0.50), and one small removal (0.90) add up to 5.30 credits. That is slightly more than a single day’s free grant of 5 build credits, which means a careful free-plan builder finishes a small app like this across two days, or plans the first prompt well enough to skip one of the fixes. The free plan also includes 20 Cloud credits a month for hosting and 4 credits a month for AI features inside your app, and those grants are usage-specific: each one only covers its own kind of use.

Unused daily build credits do not roll over; they refresh at 00:00 UTC. On paid plans, monthly credits expire two months after they are issued, and top-up credits last twelve months from purchase. Credits are not refundable. Lovable always spends usage-specific grants first, then general credits, starting with the ones closest to expiry. Workspace owners and admins can cap how many credits a member, a project, or the whole workspace can use, and get an alert when usage crosses a threshold.

Lovable Pricing: Free vs Pro vs Business

Lovable’s pricing is simple at the top and detailed underneath. Plans are priced by the credits they include, not by seats: workspaces support unlimited members on all plans, and inviting more people does not change your subscription cost. What changes is how quickly the group uses the shared credit pool.

Annual billing takes two months off the price. Bigger credit tiers are available on the paid plans, up to 10,000 credits. A custom domain needs a paid plan, so a free-plan app lives on a lovable.app address. Since June 2026, the same credit balance also pays for your live app’s database, storage, and traffic on Lovable Cloud, so the credits that pay for your prompts also pay for your app running. For most smaller or new apps, Lovable says publishing, viewing, and keeping the app running costs nothing extra, because it is covered by the included Cloud grant; apps with significant traffic or size may start drawing on your credit balance. Prices were checked against Lovable’s pricing page and its subscription documentation on October 28, 2026, and Lovable notes that the Cloud and AI grants are a temporary offering subject to change.

How to Add a Database and Login With Supabase

A Lovable app with no backend stores nothing between visits, so the first real upgrade for most beginners is a database and login. Lovable’s built-in backend is called Lovable Cloud, and it is powered by Supabase: PostgreSQL for the database, Supabase Auth for login, storage for files, and Edge Functions for server-side logic. You have two ways to get it.

The easy way is Lovable Cloud itself. Ask Lovable to add login, and it builds the sign-up and sign-in pages and connects them to the built-in backend. Email and password is the default, with Google, Apple, and Microsoft sign-in also available. Manage users and sign-in methods under More, then Cloud, then Users. Test it in the preview: create an account, sign out, and sign in again.

The second way is to bring your own Supabase project. Lovable’s documentation explains the flow: link your Supabase organization from the Connectors page or from Settings, then General, then External Supabase, and connect the project. Once connected, Lovable sets up authentication, base tables, and initial row-level security policies, and schema changes arrive in chat as SQL that only runs when you approve them. Each change is saved as a migration file in the repository, which gives you a real migration history in Git.

Whichever route you take, one rule is non-negotiable: each user must only see their own data. Ask Lovable to make sure of that, and it sets up database rules, called row-level security, so one user can never read another user’s records. Then test with two accounts and confirm that each one sees only its own items. Lovable runs security checks after schema changes, including row-level security coverage, but its own documentation tells you to check every table’s policies in the Supabase dashboard before going live, because a missing policy is still the most common hole. If you would rather host the whole app yourself instead of on Lovable Cloud, our best VPS for n8n guide shows the same self-hosting decision in a different lane, including how RAM tiers drive the choice.

How to Deploy a Lovable App

Deploying a Lovable app means publishing it to a live web address. Click Publish in the editor, and Lovable puts the app on a lovable.app URL you can share immediately. Test the published version the same way you tested the preview: open it on your phone, create an account, submit the main form, and confirm the data saves. A preview that works and a published app that works are two different checks, and the published check is the one that matters.

For a custom domain, you need a paid plan. Connect the domain from the project settings, point your DNS at Lovable, and the app serves on your own address. Keep the free lovable.app URL as a staging link even after the domain is live; it is useful for testing changes before your visitors see them.

Two habits make deployment safe. First, sync to GitHub early, as described in step 6, so every published version has a code copy outside Lovable. Second, treat the publish step as the end of a checklist, not the start of one: login works, the database saves, each user sees only their own data, and the app loads on a phone. If any of those fail, fix it in the preview before you publish again.

Lovable vs Bolt: Which Should You Pick First?

Bolt is the other leading prompt-based app builder, and it is the natural comparison for anyone choosing a first vibe-coding tool. Both turn plain-English prompts into working apps, and both are aimed at founders and non-coders who want a live product without hiring a developer first. The honest difference for a beginner is not the prompt box, which works the same way on both, but what happens after the first build.

Pick Lovable first if your app needs user accounts and saved data on day one, because the Supabase path is built in and documented. If your first project is only a landing page or a simple site, either builder will get you there, and the deciding factor becomes which interface you enjoy using. A dedicated beginner’s guide to Bolt is the next lane in this series; the comparison that matters most is the one you run yourself, by building the same small app in both and keeping the one whose credits stretch further.

5 Mistakes Beginners Make With Lovable

Most Lovable frustration comes from five repeatable mistakes, and all five are avoidable.

Writing vague prompts. “Build an app for my business” gives the AI nothing to work with, and the result is generic or incomplete. Name the user, the pages, the data, and the exclusions, as step 4 shows.

Skipping Plan mode. Jumping straight into Build mode feels faster, but it produces a messy structure with missing functionality. A one-credit planning message is the cheapest insurance in the whole product.

Sending one giant request. A single message that asks for ten features at once is expensive, hard to undo, and hard to test. Build the smallest working version first, then add one feature per message.

Overloading features. Adding everything at once makes the app confusing and slow, and it burns credits on features nobody asked for. Start with the core workflow, prove it works, then expand.

Not testing as a user. The preview is not a test. Click through the app as a customer would, create a second account to check data privacy, and open it on a phone before you publish. Every bug you catch in the preview is a bug your visitors never see.

What You Can Build With Lovable

Lovable’s guides and its own documentation agree on where it works best: internal business tools, SaaS MVPs, automation apps, and productivity tools. Here are realistic first projects, each narrow enough to finish on a free plan’s credits.

If your idea is bigger than these, shrink it before you build it. A booking app with three services and one admin page that works beats a marketplace with payments, reviews, and messaging that never ships. You can always add the second feature tomorrow, on fresh daily credits. If you are comparing AI builders rather than building in one, our Google AI Studio beginner guide covers the other major free AI-builder lane, so you can see how a prompt-first workflow differs from a model-playground workflow.

Sources

• Lovable Pricing (lovable.dev/pricing) — free-plan grants (5 daily build credits, up to 30 a month; 20 Cloud credits; 4 AI credits), Plan mode at 1 credit per message, example build costs, credit expiry rules, code ownership, no per-seat pricing. Checked October 28, 2026.
• Lilach Bullock, “How to Use Lovable: Build Your First App Step by Step” (lilachbullock.com) — account, workspace, project, and chat building blocks; Plan mode workflow; free-plan grant table; credit spending order; cancel flow. Published October 23, 2026.
• WPBrigade, “How to Use Lovable AI (Beginner’s Guide 2026)” (wpbrigade.com) — six-step tutorial, strong-prompt formula, common mistakes, limitations, Lovable vs Bubble, Glide, and Replit. Updated October 24, 2026.
• Lovable Docs, “Connect to Supabase” (docs.lovable.dev/integrations/supabase) — linking a Supabase organization, connecting a project, and the External Supabase settings path.
• LastZone, “How to Add Login and Sign Up to a Lovable App” (lastzone.games) — four-step login setup, sign-in methods, and row-level security testing with two accounts.
• Lovable2Live, “Lovable Pricing: Where the Credits Go” (lovable2live.com) — Pro at $25 a month for 100 credits, Business at $50, annual billing at two months off, custom domain on paid plans, single credit balance since June 1, 2026. Checked October 14, 2026.

Frequently Asked Questions

Is Lovable free?

Yes. Lovable’s free plan costs $0 and includes 5 build credits a day, up to 30 a month, plus 20 Cloud credits a month for hosting and 4 credits a month for AI features inside your app. No credit card is needed. The daily build credits refresh at 00:00 UTC and do not roll over, so a free account gets about six days of building per month if you use the full daily grant each day.

How many credits does a Lovable message use?

It depends on the size of the job. Plan mode costs a flat 1 credit per message. In Build mode, Lovable’s own examples range from 0.50 credits to change a button color to 1.70 credits to build a landing page with images, with adding sign-up and login at 1.20 credits. You can see the exact cost of any message by hovering over the three dots next to it in the message history.

Do I own the code Lovable writes?

Yes. Lovable says you keep full ownership of your code, including the apps, customer data stored in Lovable, and any AI output you generate, subject to third-party rights in the underlying AI models. You can sync the code to GitHub, GitLab, or Bitbucket, and GitHub two-way sync is available from the free plan, so you can back up or export a project from day one.

How do I add login to a Lovable app?

Ask Lovable in the chat: “Add login to my app. Require login before accessing the dashboard.” It builds the sign-up and sign-in pages and connects them to Lovable Cloud, with email and password as the default and Google, Apple, and Microsoft sign-in also available. Test it in the preview by creating an account, signing out, and signing in again, and manage users under More, then Cloud, then Users. For a database you control yourself, connect your own Supabase project instead.

How do I publish my Lovable app?

Click Publish in the editor, and Lovable puts your app on a live lovable.app URL you can share immediately. For most smaller or new apps, publishing and keeping the app running is covered by the included Cloud grant at no extra cost. A custom domain needs a paid plan, starting with Pro at $25 a month. Before you publish, test the live version on your phone, confirm the main form saves, and check that each user sees only their own data.