How to Build an App with Lovable (2026): Step-by-Step Guide

Quick answer: how to build an app with Lovable. Sign up at lovable.dev, write down what your app does and who uses it, then use Plan mode to agree on a plan before anything is built. Send one clear first prompt describing the pages, users and data, let Lovable Cloud add the database and logins, then add features one prompt at a time, checking the preview after each. When it works, click Publish to get a live lovable.app address, and connect a custom domain on a paid plan.

Lovable is an AI app builder that writes full-stack web apps from chat, with a built-in backend for data, user accounts and file storage. This tutorial walks through a real example, a class booking app for a small fitness studio, from blank page to published app. It follows Lovable's official documentation as of October 2026 and adds the habits that save the most credits. Lovable ships changes weekly, so if a button looks different on your screen, check the Lovable docs.

Lovable

Building an app with Lovable in 60 seconds

• Cost: the free plan gives 5 build credits a day (up to 30 a month); Pro starts at $25/mo for 100 monthly credits plus daily credits.

• Typical credit cost: small edits cost under 1 credit; adding authentication is about 1.2; a landing page with images about 2.

• Three modes: Chat mode to discuss, Plan mode to approve a plan (1 credit per message), Build mode to make changes.

• Backend: Lovable Cloud adds a database, logins, storage and server functions automatically when your app needs them.

• Undo button: every change is saved as a version you can restore from history.

• Best habit: one change per prompt, then test it in the preview.

What you need before you start

Step 1: Define your app before you prompt

The single biggest cause of wasted credits is starting with a vague idea. Spend ten minutes writing a short spec. Lovable's own prompting guide recommends defining the product, its audience, its purpose and the one key action a user takes.

For our example, the spec looks like this:

• Product: a class booking app for a small fitness studio called Northside Yoga.

• Users: members, who book classes, and admins, who manage the schedule.

• Key action: a member books a spot in a class.

• Pages: landing page, sign up and log in, weekly schedule, my bookings, admin dashboard.

• Data: classes (title, instructor, start time, duration, capacity) and bookings (member, class, status).

• Rules: a class cannot be booked past capacity; members can cancel up to 2 hours before start.

Keep version one small. Payments, reminders and waitlists can come later.

Step 2: Create your project

1. Go to lovable.dev and sign up. The free plan opens a personal workspace and a dashboard ready to build.

2. Find the prompt box labeled Ask Lovable to create… with Build selected in the mode picker. Switch it to Plan for now.

3. If you have a design you like, attach a screenshot as a visual reference. You can also remix a template or start from an existing URL.

Step 3: Plan with Plan mode first

Plan mode investigates and writes a plan you can edit and approve before any code is written. It costs 1 credit per message, far less than rebuilding a wrong first version. Paste your spec and ask for questions:

I want to build a class booking app for a small yoga studio called Northside Yoga. Members sign up, see this week's class schedule, book or cancel a spot, and see their upcoming bookings. Admins create classes with a title, instructor, start time, duration and capacity, and see who booked each one. Classes cannot be overbooked, and members can cancel up to 2 hours before start. Ask me clarifying questions before you write the plan.

Lovable will ask about things you had not considered, such as whether members can book recurring classes or what happens when a class is full. Answer them, read the plan, edit anything wrong, then approve it. If you only want to think out loud without a plan, use Chat mode, which never touches code.

Step 4: Build the first version

Approve the plan, or switch to Build mode and send a first prompt like this one. Notice the specific UI terms, real copy and style words, which Lovable's guide recommends over vague requests:

Build version one from the plan. Style: calm and organic, soft greens and warm neutrals, rounded cards, plenty of white space. Landing page headline: "Find your next class at Northside Yoga." The schedule page shows the week as cards grouped by day, each with title, instructor, time and a badge for spots left. Include sign up and log in. Use real sample classes, not placeholder text.

The editor splits in two: the project chat on the left and a live preview on the right. Because this app needs accounts and stored data, Lovable switches on Lovable Cloud (it is enabled by default, and the Enable Cloud permission is set to Always allow unless you change it). Let it finish, then click through the preview before asking for anything else.

Step 5: Save your project instructions

Instructions (formerly called Knowledge) are persistent rules Lovable reads on every message, so you stop repeating yourself. Open Project settings → Instructions and add short bullets, up to 10,000 characters:

• App: class booking for Northside Yoga. Roles: member, admin.

• Style: calm and organic, soft greens, rounded cards. Keep existing styling unless asked.

• Rules: never allow bookings past capacity. Cancellation cutoff is 2 hours before start.

• Never change the admin dashboard when editing member pages.

Teams can also set workspace instructions for shared rules, and Lovable reads AGENTS.md or CLAUDE.md files in a connected repo.

Step 6: Set up logins and the database with Lovable Cloud

Open the Cloud area from the More menu to see what Lovable created. According to the Lovable Cloud docs, you will find Database (tables and records), Users (sign-ups and sign-in methods), Storage, Edge functions, Jobs, Secrets, Logs and Usage.

1. Check Database for a classes table and a bookings table with the fields from your spec. If something is missing, ask: Add a capacity column to classes and show spots left on each card.

2. Open Users to choose sign-in methods. Email is the default; ask Lovable to add Google sign-in if you want it.

3. Create roles with a prompt: Add an admin role. Only admins can see the admin dashboard and create or edit classes. Make my account an admin.

4. Ask for data rules in plain language: Members can only see and cancel their own bookings.

Two decisions to make now. The Cloud region (Americas, Europe or Asia Pacific) cannot be changed after the backend is enabled. And if you want direct control of your database, Lovable can create a Supabase project for you or connect your own; moving off Cloud later is a manual migration.

Step 7: Add features one prompt at a time

Each prompt layers on top of existing code, so small, bounded requests work best. State what to build, where, and what must stay untouched:

1. On the schedule page, add a Book button to each class card. If the class is full, show a disabled Full badge instead. Change only the schedule page.

2. Create a My bookings page listing upcoming bookings with a Cancel button. Hide Cancel within 2 hours of start time.

3. On the admin dashboard, add a form to create a class and a table of classes with booked count and a list of members for each.

4. Add a status filter (upcoming, past, cancelled) to the bookings table. Keep the current styling.

For bigger, unfamiliar features, go back to Plan mode first. For large jobs you want finished without interruptions, the /goal command keeps Lovable working for up to 10 hours, but it costs noticeably more. Check-ins pause any single message that crosses 20 credits by default, so nothing runs away silently.

Step 8: Polish the design with visual edits

Do not spend prompts on tiny tweaks. Use the preview toolbar to select an element and describe the change, or choose Edit text inline and type directly on the page. Then switch the device toggle to Mobile view, because most of your members will book from a phone. A prompt such as On mobile, stack the class cards in one column and make the Book button full width fixes most layout issues.

Step 9: Add payments and integrations

When the core flow works, connect outside services. Ask Lovable to add Stripe checkout for class packs, and it will guide you through adding your keys. Store any API key in Secrets, never in a prompt or in the code. Lovable's connectors cover services such as Klaviyo and Loops for email, WhatsApp Business, Zendesk and n8n. For email reminders, a prompt like Send members a reminder email 24 hours before each booked class uses a scheduled job.

Step 10: Test like a real user

1. Click everything in the preview: sign up as a new member, book, cancel, then log in as an admin.

2. Try to break the rules: book a full class, cancel 30 minutes before start, open the admin URL as a member.

3. Let Lovable test too. It can sign in to test pages behind your login, and it writes and runs tests when you change rules such as prices or permissions.

4. Run a security scan from the project's Security view. Quick and deep scans flag issues like loose data access, though Lovable notes they are not a full audit.

Step 11: Use versions and Drafts as your safety net

Every change is saved as a version you can restore from history. Bookmark milestones that work, such as "booking flow done". Before a risky redesign, create a Draft, a separate copy of the project where you can experiment and compare plan revisions without touching the main version. One limit: you cannot enable Cloud from inside a draft, so set up the backend in the main version first.

Step 12: Publish and connect a custom domain

1. Click Publish in the top right. Edit the suggested lovable.app address if you like, then deploy.

2. Your live site is a snapshot. After later edits, click Publish → Publish changes to update it.

3. On a paid plan, open Project → Settings → Domains and choose Connect domain for a domain you own, or Buy new domain to purchase one through Lovable.

4. For a domain from another registrar, add an A record pointing to 185.158.133.1 and a TXT record on _lovable with the lovable_verify= value Lovable shows. Remove any AAAA records first.

5. Wait for the status to show Live. Most domains connect within a few hours, though DNS can take up to 72.

The full steps, including the Cloudflare CNAME option, are in Lovable's custom domain guide.

Step 13: Connect GitHub and plan what comes next

Connect Git sync to GitHub, GitLab or Bitbucket from your project settings. It is available on every plan, and every change in Lovable is committed to your repo, so you always own the code. When the app grows beyond what chat can comfortably manage, a developer can open the same repo in an AI editor.

Many teams keep prompting in Lovable for UI changes while a developer uses Cursor or Claude Code for complex logic. Coordinate so you are not editing the same files from both sides at once. Our guide on how to use Claude Code covers that next step.

Common mistakes and how to avoid them

• Prompting the whole app at once. Huge prompts produce half-finished features. Build by component.

• Asking for the same fix five times. Each retry costs credits and can make things worse. Restore the last working version and describe the problem differently.

• Vague language. "Make it better" wastes a prompt. Name the element, the change and the boundary.

• Placeholder text. Real copy reveals layout problems early.

• Skipping security. Ask "who can read this data?" for every table before launch.

• Ignoring the region setting. Pick the Cloud region closest to your users before enabling the backend.

Troubleshooting

FAQ

Can you build a real app with Lovable?

Yes. Lovable builds full-stack web apps with a real database, user accounts, file storage and server functions through Lovable Cloud, and publishes them to a live URL. Founders use it for MVPs, booking systems, internal tools and small SaaS products. For anything handling payments or personal data, have a developer review security before launch.

How long does it take to build an app with Lovable?

A simple app like the booking example can reach a working first version in an hour or two of focused prompting. Polishing, testing edge cases and adding payments usually takes a few more sessions. On the free plan, the 5-credits-a-day limit spreads the work over several days.

Is Lovable free to build an app?

You can build and publish a small app on the free plan, which gives 5 build credits a day up to 30 a month, plus small monthly Cloud and AI grants. Custom domains, editing code directly and removing the Lovable badge require Pro, which starts at $25 a month.

Can Lovable build mobile apps?

Lovable builds responsive web apps that work well on phones and can be installed as a progressive web app. It does not create native apps for the App Store or Google Play. If you need a store listing, look at Replit or Bolt.new, which build Expo apps, or wrap your Lovable code with a tool such as Capacitor.

Do I need to know how to code to use Lovable?

No. You describe what you want in plain English, and Lovable writes the code, sets up the backend and hosts the app. Understanding basic concepts such as pages, user roles and database tables helps you write better prompts, and having someone technical review the finished app is wise before real users arrive.

How do I write good prompts for Lovable?

Be specific and bounded. Say what to build, where it goes and what must stay untouched. Use concrete UI terms such as cards, badges, modals and form fields, include real copy, add style words like "calm and organic", and make one meaningful change per prompt. Save rules you repeat in Project settings → Instructions.

Final verdict

Building an app with Lovable is mostly about discipline, not code. Write a short spec, plan before you build, let Lovable Cloud handle logins and data, and add features one bounded prompt at a time while testing in the preview. Do that, and a non-developer can publish a genuinely useful app in an afternoon. For a deeper look at strengths, limits and pricing, read our Lovable review, compare builders in Lovable vs Bolt vs v0, or see our list of the best vibe coding tools.

Find more AI app builders and coding agents in the AI coding category, and design tools for your app's look in the AI design category. Building a tool for vibe coders? Submit it for a listing.