# Lovable tutorial: build and publish your first app

> To build an app with [Lovable](https://lovable.dev), sign up, type what you want in the prompt box with Build selected, and let it make a first version. Change it one request at a time while you watch the preview. Then click Publish twice to put it on a lovable.app address. Later edits reach visitors only when you click Publish changes.

Mindket editors · Published 2026-11-05 · Updated 2026-11-05 · https://mindket.com/learn/vibe-coding/build-app-with-lovable

## In short

- Open with a prompt that names the sections, asks for sample content and rules out what can wait.
- Point at the screen for small visual fixes instead of typing a description.
- Bookmark a good version before any big redesign.
- Republish after each round of edits you want visitors to see.
- Settle on the built-in backend or your own Supabase project before real data goes in.

## Build and publish your first app

You need a browser and an email address, or a Google, GitHub or Apple account. There is nothing to install. Every build request spends build credits, and Lovable's free plan includes five a day, up to 30 a month. A first app fits inside that.

Lovable's quick start builds a site for Little Fern, an imaginary neighborhood cafe. The prompt below is the guide's own example, copied as it stands. Swap in your own idea if you have one. The steps stay the same.

````text
Build a website for Little Fern, a neighborhood cafe. Include a warm hero section with a headline and a photo, an interactive menu where visitors filter items by category (coffee, breakfast, lunch, pastries), an opening hours section, and a location section with the address and a short "find us" description. Use realistic sample content throughout. Cozy, welcoming design. Works well on mobile. No login or database yet.
````

1. **Create your account.** Sign up at [lovable.dev](https://lovable.dev). You start with a personal workspace on the free plan, and Lovable opens the dashboard.
2. **Describe the app.** Check that **Build** is selected in the mode picker, paste the prompt into the box that reads "Ask Lovable to create…" and send it. Any language works. The last line keeps logins and a database out of the first version, and you can add both later with one more prompt.
3. **Wait for the first version.** It takes a few minutes. Then the editor opens, with the project chat on the left and the preview, your app running live, on the right.
4. **Ask for one change at a time.** For example: "Add a "Today's specials" section between the menu and the opening hours, highlighting two menu items with a short description and price." Check the preview after each request. A note about feel works too: "Make the whole site feel warmer and less corporate."
5. **Point instead of describing.** For a small visual change, open the preview toolbar, select the element and say what should change. To fix a headline or a button label, choose **Edit text inline** and type straight onto the page. No prompt is needed.
6. **Check it like a visitor.** Click every button and link, try each filter and use the device toggle above the preview to switch to **Mobile view**. If something is off, say exactly what and where: "In the menu, clicking the pastries filter shows no items. It should show the pastry items."
7. **Publish.** Click **Publish** in the top right of the editor. Lovable suggests a web address ending in lovable.app, which you can edit, and runs a quick security scan. Click **Publish** again to deploy, which means copying the current version to the server visitors reach.

> Your live site is a snapshot. New edits show in the preview at once, but visitors see them only after you click **Publish**, then **Publish changes**. A small dot on the Publish button means edits are waiting. Lovable also writes the page title, description and tab icon as it builds, and you change them by asking in the chat.

## Chat, Plan or Build: pick the mode before you type

The mode picker under the prompt box decides whether Lovable may touch your code. Build mode changes the app, so a question typed there can come back as an edit. Chat and Plan leave the code alone.

Switch with the picker, or cycle through the three with Alt+P on Windows and Linux, or Option+P on a Mac. A Chat message is priced on the work it takes, usually a fraction of a credit. That makes Chat the cheaper place to ask how something works. One of Lovable's own sample Chat questions suits the cafe: "I'm thinking of adding a loyalty program: one stamp per purchase, a free coffee at ten. What would that take in this app, and is there a simpler version worth trying first?"

Plan mode may open with a few questions of its own. Once it has a clear approach, the plan appears in the Plan view, a document you can edit. To change one part, select it, click **Comment** and type the change, and Lovable rewrites just that passage. **Approve** switches to Build mode and starts the work. **Skip** moves on without it. Approved plans stay in the project as files in a .lovable/plan/ folder, so you can reread later why a feature was built the way it was.

| Mode | What it does | Changes code? | Reach for it when |
| --- | --- | --- | --- |
| Chat | Talks through the app you have open and what to change | No | You are not sure what to ask for yet |
| Plan | Reads the project, asks questions and writes a plan you can edit and approve | Only what you approve | A change touches several pages, the data or a bug you cannot explain |
| Build | Makes the change and checks the outcome | Yes | You know the change you want |

> A Plan message costs one credit, plus any research Lovable runs while it plans. Chat messages are covered first by a daily chat allowance. For the cafe site, Build handles nearly every turn. Plan pays for itself the first time you add sign-in or a database, because you read what will change before anything does.

## Undo, see the code and add a backend

Every change becomes a version on its own, so there is no save button to forget. Open **History** from the top bar of the editor to preview any earlier version, look at its code changes or click **Revert**. Bookmark a version that works before a redesign, and it stays one click away. Revert brings back code only. It leaves the data in your database as it is, and it does not refund the credits those messages used.

Everything Lovable builds is standard code, and the **Code** tab in the project toolbar shows it. On the free plan that editor is read-only. Paid plans can edit files there and download the whole project as a .zip file. A save you make by hand becomes a version like any other and spends no credits.

For a full copy that stays current, connect [GitHub](https://github.com), a site that stores code along with its history. Once your workspace has a GitHub connection, open **Project settings**, then **Git**, then **GitHub**, and click **Connect**. Lovable creates a new private repository, which is a project folder on GitHub, and keeps the two in sync both ways. Git sync works on every plan. It cannot attach to a repository you already have.

A backend is the part of an app that runs on a server: the database, user accounts, file storage and server code. Lovable's built-in backend, called Cloud in parts of the product, is switched on for your workspace by default. It starts when a feature needs it, and it runs on Supabase's open-source foundation. To use a [Supabase](https://supabase.com) project of your own instead, open **Settings**, **General**, **External Supabase** and click **Connect**. That option shows only on projects that have no backend yet.

Choose early. Lovable does not move a project from one backend to the other in one step.

Once real data goes in, keep API keys in **Secrets**. Lovable spots a key pasted into the chat and steers you to store it there. Read the row-level security policies too, the database rules on who sees which rows, under **More**, **Database**, **Manage**, **Policies**. The quick scan in the Publish dialog checks those rules in about 10 seconds. A Deep scan of all your code, started from the Security view or by asking for a security review in the project chat, usually takes 3 to 13 minutes.

**Newer ways to undo and check in Lovable**

1. **September 8, 2026** Earlier versions of a plan. When Lovable revises a plan, it keeps the earlier versions so you can compare them and restore one.
2. **September 9, 2026** Drafts. Try a change in a separate copy of the project with its own chat, preview and edits. A draft shares the project's data.
3. **October 14, 2026** Restore a deleted project. A deleted project can come back for 60 days, with its code, version history and chat history.
4. **October 29, 2026** Deep scan from the chat. Ask in the project chat for a security review, and the Deep scan runs in the background while Lovable explains what it finds.

Source: [Lovable changelog](https://docs.lovable.dev/changelog) (read 2026-11-05)

|  | Built-in backend | Your own Supabase project |
| --- | --- | --- |
| Setup | Automatic, no extra account | A Supabase account and project |
| Billing | Credits in your Lovable workspace | Your Supabase subscription |
| Where you manage it | The Database, Users and Storage views in Lovable | The Supabase dashboard |
| Fits | Most projects | Teams that want to own the account and the infrastructure |

## How Lovable's co-founder and a daily builder plan before they build

Anton Osika, Lovable's co-founder, posted his advice [on X](https://x.com/antonosika/status/1993073007296729546) on November 24, 2025: switch to Chat mode whenever you are about to make a large change or feel stuck. He added that Lovable's power users swear by it. Chat cannot edit your code, so talking a change through there leaves the app as it is. For the cafe site, try it before the first change that touches accounts or stored data, then build once the change is clear.

Prajwal Tomar, whose X bio says he runs five businesses on AI, shared a tip [on X](https://x.com/PrajwalTomar_/status/2080330348718928133) on July 23, 2026. Before building anything, he saves his MVP plan as a Markdown file in the project root. An MVP, or minimum viable product, is the smallest version worth putting in front of people. With the plan in a file, he says, the agent builds against it on every prompt instead of drifting a little further from it each time.

You can do the same with the brief from the first lesson. Ask Lovable in Build mode to save it as a file such as plan.md, and point to that file when a later prompt adds a feature. In the video below, Kevin Stratvert builds a beginner app the same way, with Plan mode first.

> I highly recommend chat mode in Lovable whenever you want to prepare a large change or feel stuck.
>
> Anton Osika, co-founder of Lovable, [X](https://x.com/antonosika/status/1993073007296729546) (read 2026-11-05)

[![Anton Osika (@antonosika) on X, 24 November 2025: I highly recommend chat mode in Lovable whenever you want to prepare a large change or feel stuck. Our power users swear by it.](https://mindket.com/blog/shots/x-antonosika-chat-mode.webp?v=a856d018114b)](https://x.com/antonosika/status/1993073007296729546)

Anton Osika on X, 24 November 2025

[![Prajwal Tomar (@PrajwalTomar_) on X, 23 July 2026: Lovable PRO tip I wish someone told me a year ago. Save your MVP plan as an .md file in the project root before you build anything.](https://mindket.com/blog/shots/x-prajwaltomar-mvp-plan.webp?v=ebbeb06f3638)](https://x.com/PrajwalTomar_/status/2080330348718928133)

Prajwal Tomar on X, 23 July 2026

[Lovable AI Tutorial for Beginners - Build Your First App](https://www.youtube.com/watch?v=y4IJbZ1E1DM)

Kevin Stratvert on YouTube, June 2026: an app built from a plain English prompt, with Plan mode before the build, user sign-in, Lovable's security scan and publishing to a live link.

> Screenshots of X's own embeds of the posts, taken on 5 November 2026, with the time in UTC. X cuts Prajwal Tomar's post short with Show more. Select one to open the post on X.

## Common mistakes

- Expecting the live site to change with the preview. Visitors keep the last published version until you click **Publish changes**.
- Asking for sign-in, payments and a database in the first prompt. Get the pages right, then add one backend feature per message.
- Describing a small visual fix in a paragraph. Selecting the element in the preview is quicker and leaves less to misread.
- Reverting to undo a data change. Rows that later messages added or changed stay in the database.
- Pasting an API key into a prompt or the page code. Store it in Secrets, and ask Lovable to call the service from server code.
- Publishing over critical scan findings. They do not block publishing by default, so open the Security view and fix them first.
- Deleting the GitHub repository to tidy up. That stops the sync, and Lovable creates a new repository when you reconnect.
- Forgetting a free-plan app for a year. Lovable can unpublish a project in a Free workspace after 12 months with no visits and no logins by the workspace owner.

## Next: the Cursor tutorial

Before you move on, build your own brief from the first lesson in Lovable. Publish it, change one heading, and open the live link on your phone. The new heading is not there yet. Publish the change, reload, and it appears. After one round trip like that, the snapshot rule stops surprising you.

Lovable keeps the code out of your way. [The Cursor tutorial](https://mindket.com/learn/vibe-coding/cursor-tutorial) puts it in front of you: you open a folder, ask an agent to change it and look over each edit before you keep it. A Lovable project synced to GitHub makes a good first folder to open there.

## Check yourself

1. You edited the menu after publishing, and visitors still see the old one. What is missing?

   A. A new Lovable account
   B. Publish, then Publish changes
   C. A Deep scan
   D. A switch to Plan mode

   Answer: B. The live site is a snapshot, so later edits reach visitors only when you publish them.

2. Which mode lets you talk an idea through without Lovable changing any code?

   A. Chat
   B. Build
   C. Publish

   Answer: A. Chat mode discusses the app and possible changes, and it never edits the code.

3. You revert to yesterday's version. What stays as it is?

   A. The pages built since then
   B. The code changed since then
   C. The rows of data added since then

   Answer: C. Revert restores code only, so data that later messages added or changed stays in the database.

4. You want a full copy of the code that stays current, on any plan. What do you set up?

   A. A Deep scan
   B. Bookmarks in History
   C. An Invite only audience
   D. Git sync with GitHub

   Answer: D. Git sync keeps a GitHub repository and the project in step both ways, and it works on every plan.

## Frequently asked questions

### Is Lovable free to use?

Yes, for a first app. Without paying you can build, publish to a lovable.app address and sync with GitHub. Editing code by hand, downloading the codebase and a custom domain need a paid plan.

### Can I put a Lovable app on my own domain?

Yes, on a paid plan. After the first publish, add a custom domain from the Publish dialog. The lovable.app subdomain can also change later under Project settings, URL subdomain.

### Who can see my published Lovable app?

Anyone with the link, by default. On the Free and Pro plans you can switch the audience to Invite only and add up to 10 people by name or email, who sign in to view it. Business and Enterprise plans add Workspace and Custom audiences.

### What can I do when Lovable breaks my app?

Hover over the message that caused it, choose **Edit message**, change the request and confirm **Revert and resend**. Lovable returns to that point and continues with the new instruction, and the later messages stay in the chat in case you want them back.

## Sources

- [Lovable docs: Quick start](https://docs.lovable.dev/introduction/getting-started) (read 2026-11-05)
- [Lovable docs: Publish your Lovable project](https://docs.lovable.dev/features/publish) (read 2026-11-05)
- [Lovable docs: Version history](https://docs.lovable.dev/features/projects/history) (read 2026-11-05)
- [Lovable docs: View and edit your project's code](https://docs.lovable.dev/features/code-mode) (read 2026-11-05)
- [Lovable docs: Sync your project with GitHub](https://docs.lovable.dev/integrations/github) (read 2026-11-05)
- [Lovable docs: Built-in backend](https://docs.lovable.dev/features/cloud) (read 2026-11-05)
- [Lovable docs: Connect to Supabase](https://docs.lovable.dev/integrations/supabase) (read 2026-11-05)
- [Lovable docs: Plan mode](https://docs.lovable.dev/features/plan-mode) (read 2026-11-05)
- [Lovable docs: Chat mode](https://docs.lovable.dev/features/chat-mode) (read 2026-11-05)
- [Lovable docs: Security overview](https://docs.lovable.dev/features/security) (read 2026-11-05)
- [Lovable docs: Changelog](https://docs.lovable.dev/changelog) (read 2026-11-05)
- [Lovable blog: How we built Lovable, and why we keep rebuilding it](https://lovable.dev/blog/how-we-built-lovable-and-why-we-keep-rebuilding-it) (read 2026-11-05)
- [Anton Osika on X, November 24, 2025](https://x.com/antonosika/status/1993073007296729546) (read 2026-11-05)
- [Prajwal Tomar on X, July 23, 2026](https://x.com/PrajwalTomar_/status/2080330348718928133) (read 2026-11-05)
- [Kevin Stratvert on YouTube: Lovable AI Tutorial for Beginners](https://www.youtube.com/watch?v=y4IJbZ1E1DM) (read 2026-11-05)

[Browse automations](https://mindket.com/automations)