To use Lovable, sign up at lovable.dev, describe your app in the chat prompt, and let the AI builder turn it into a working React app in the live preview. From there you iterate with follow-up prompts and Visual Edits, connect Lovable Cloud for a database and login, and publish with one click. This guide walks through every step for your first project, from account creation to a live URL.
| Fact | Value |
|---|---|
| Tool | Lovable |
| Difficulty | Beginner |
| Time required | 20-30 min for your first project |
| Compatibility | All Lovable plans (Free, Pro, Business, Enterprise) — web browser only, no install required |
| Last updated | September 2026 |
Why the first hour in Lovable trips people up
Lovable looks like a chat box, so most people just type a request and expect a finished product. The editor actually has several distinct areas — the chat panel, the live preview, the Design view, and the Cloud tab — and each one does something different. Beginners commonly waste their first few prompts because they ask for too much at once, never look at the dashboard to find their project again, or skip the Cloud tab entirely and then wonder why login does not work. Understanding the editor layout before you start typing saves both time and credits. The other common trap is publishing too early or too late. Some people click Publish before connecting a database, so the live site has no real functionality. Others build for hours in preview and never publish at all, not realizing that Publish is required before anyone outside the editor can see the app. This walkthrough follows the order that actually works: account, dashboard, first prompt, iteration, Cloud, then publish.
- Not knowing where the dashboard, chat, and Cloud tab are before starting
- Writing one giant prompt instead of building in small, reviewable steps
- Skipping Lovable Cloud setup, then being confused when auth or data features do not work
- Forgetting that changes in the editor are not live until you click Publish
Before you start
- An email address or Google/GitHub account to sign up with
- A one or two sentence idea of what you want to build (a landing page, a dashboard, a small tool)
- A modern browser (Chrome, Edge, or Safari) — Lovable runs entirely in the browser
How to fix it
Create your account and log in
Your Lovable account is where every project, credit balance, and workspace lives — logging in correctly avoids the most common 'lovable login' confusion.
Go to lovable.dev and click Sign Up (or Log In if you already have an account). You can sign up with email, Google, or GitHub. If you use GitHub to sign up, Lovable will later offer to sync that same account for repository access — you do not have to connect a repo yet. After verifying your email (if you used email signup), you land in your workspace, which is the top-level container for your projects and billing. If login ever fails, check that you are using the same method (email vs Google vs GitHub) you originally signed up with; mixing methods for the same email is the most common login issue.
Expected result: You are logged into your Lovable workspace and see the 'Start a new project' prompt box on the home screen.
Tour the dashboard before you build anything
Knowing where your project list, workspace settings, and account menu live means you can always find your way back — the #1 'lovable dashboard' search intent.
The dashboard is your workspace home. Down the left or top you will find: your Projects grid (every app you have started, with thumbnails), a Workspace switcher (if you belong to more than one workspace), and a settings gear for billing, members, and integrations. Each project card shows its name, last-edited time, and publish status. Click into any project to open its editor — chat panel on one side, live preview on the other, with a top bar for Code, Design, Cloud, Publish, and GitHub. If you ever lose track of a project, the dashboard's project list is always the fastest way back — bookmarking a specific project URL is optional but convenient.
Expected result: You can identify the Projects grid, workspace switcher, and the editor's top bar (Code / Design / Cloud / Publish) without hunting for them.
Write your first prompt and watch Lovable build
The first prompt sets the foundation — Lovable scaffolds your whole app structure from it, so a clear, scoped description gets you a much better starting point.
From the dashboard, click 'Start a new project' and type a description of what you want, in plain English: what the app is, who uses it, and the 2-3 core screens or features. Avoid vague requests like 'build me a SaaS app' — instead describe the actual product. Lovable's default working mode plans and generates code in one pass, then shows you the result in the live preview on the right, with the generated file changes visible in a diff-style view if you open the Code tab. The first generation typically takes 30-90 seconds depending on complexity.
1Build a simple recipe-sharing app for home cooks. Homepage lists recipes as cards (title, photo, cook time). A recipe detail page shows ingredients and steps. Users can submit a new recipe through a form with title, photo upload, ingredients list, and steps. Use a clean, warm color palette.Expected result: A working first version appears in the live preview — a homepage, a detail page, and a submission form, styled and clickable.
Iterate with Build mode and Visual Edits
Almost no app is finished after prompt one — iterating in small, specific steps is how you actually reach a polished result without burning credits on misunderstood requests.
Keep the conversation going: describe one change or addition per message rather than stacking five requests into one prompt. For pure visual tweaks — spacing, colors, font sizes, moving an element — open the Design view and use Visual Edits, which lets you click an element and adjust it directly with no credit cost for static changes. Reserve chat prompts for functional changes (new fields, new logic, new pages). If Lovable produces a plan first and asks for approval before writing code, that is Plan Mode; approve it or ask for changes before it switches to Build mode and generates the code.
1Add a 'favorite' button (heart icon) to each recipe card. Clicking it should toggle a filled/outline heart state and store the favorite so it persists after a page refresh.Expected result: Your app gains features incrementally, and the live preview updates after each accepted change.
Connect Lovable Cloud for a database and login
Anything involving accounts, saved data, or file uploads needs a real backend — Lovable Cloud provides one without leaving the editor.
Click the '+' next to the preview to open the Cloud tab, then look at the Database, Users & Auth, and Storage sections. Ask Lovable in chat to add what you need — for example, user sign-up with email/password, or a table to store recipe submissions — and it provisions the schema and auth flow automatically. Lovable Cloud is managed Supabase under the hood and is not visible in your own separate Supabase dashboard if you have one; it is a Lovable-managed instance dedicated to this project. Any secret keys (for a paid API you connect later) go in Cloud tab → Secrets, never hard-coded into a prompt or file.
Expected result: A Database and Auth section appear in your Cloud tab, and users can sign up or log in on your live preview.
Publish your app and connect a custom domain
Nothing is live to the public until you publish — this is the step people forget after hours of building in preview.
Click the Publish icon in the top-right of the editor. Review the publish dialog (title, description, and social preview card are often auto-generated), then click Publish. Your app is now live at a free {project}.lovable.app subdomain. Future changes you make in the editor do not automatically go live — you have to click Publish again to push an update, which is intentional so you can review before anything public changes. To use your own domain, go to the domain settings from the Publish menu, add your domain, and follow the DNS instructions (available on paid plans); propagation can take a few hours. If you also want your code in GitHub, connect it via the GitHub icon in the top-right — every future change then creates a commit automatically, which is genuinely useful once a project gets complex, and it is the point where teams often bring in RapidDev to review the generated architecture before it grows further.
Expected result: Your app is live at a public URL, and you know how to push updates and add a custom domain.
Complete code example
1# First Lovable Prompt Template23Use this structure for your very first prompt — it gives Lovable enough4context to scaffold a sensible app instead of guessing.56## Template78Build a [type of app] for [who uses it].910Core screens:111. [Screen 1] — [what it shows / does]122. [Screen 2] — [what it shows / does]133. [Screen 3] — [what it shows / does]1415Users can: [1-3 core actions, e.g. sign up, submit a form, view a list]1617Style: [color palette / vibe, e.g. 'clean and minimal, blue accent']1819## Filled example2021Build a simple habit tracker for individuals.2223Core screens:241. Dashboard — shows today's habits as a checklist252. Habit detail — shows a streak calendar for one habit263. Add habit — a form to create a new habit with a name and frequency2728Users can: sign up with email, check off habits daily, see their current streak.2930Style: minimal and calm, soft green accent color, plenty of white space.3132## Why this works33- Naming the screens up front stops Lovable from guessing your information architecture.34- Listing 'users can' actions tells it which pieces need real logic vs. static UI.35- One style line is enough — save deep visual tweaks for Visual Edits after the first pass.Best practices to prevent this
- Write your first prompt as a short spec (app type, core screens, 2-3 actions) rather than one long paragraph
- Use Visual Edits for styling — it costs no credits for static changes
- Make one functional change per chat message so you can review and revert cleanly if something breaks
- Open the Cloud tab before you need auth or a database, not after users start hitting errors
- Always check the live preview after a change before asking for the next one
- Publish early with a minimal working version, then keep iterating — you can republish anytime
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I am building my first app in Lovable.dev, an AI app builder. My idea is: [describe your app in 1-2 sentences]. Help me turn this into a clear first prompt for Lovable, following this structure: app type + who it's for, 3 core screens with a one-line description each, 2-3 things users can do, and a one-line style description. Keep the whole prompt under 100 words.
Review my project so far and tell me: what screens and features currently exist, whether authentication is set up, whether any database tables exist, and what the single most valuable next feature to add would be for a first version I could publish today.
Frequently asked questions
Why can't I log into Lovable?
The most common cause is using a different sign-in method than you originally signed up with — for example trying email/password when you originally created your account with Google. Use the same method every time. If you still cannot log in, check your email for a verification link or use the 'forgot password' flow from the login page.
Where is the Lovable dashboard?
After logging in at lovable.dev, you land on your workspace dashboard automatically. It shows your Projects grid and a workspace switcher if you belong to more than one workspace. You can always get back to it by clicking the Lovable logo or workspace name from inside a project.
How do I edit an existing Lovable website instead of starting a new one?
Open the project from your dashboard's Projects grid — this puts you back in the same editor with the same chat history and live preview. You can keep prompting for changes, use Visual Edits for styling, or open the Code tab to browse (and, on paid plans, edit) the underlying files directly.
How do I publish updates after my Lovable site is already live?
Make your changes in the editor as usual, confirm they look right in the live preview, then click the Publish icon again and click Publish (or Update) in the dialog. Changes are never pushed live automatically — you always control when an update goes out.
How do I build a website using Lovable if I've never coded before?
You do not need to write code. Describe what you want in plain English in the chat, review the live preview, and keep describing changes until it matches what you want. Lovable generates and manages the underlying React and Supabase code for you; you only touch code directly if you choose to, in the Code tab.
Is Lovable free to start using?
Yes. The Free plan gives you 5 build credits per day (capped at 30 per month) plus small monthly Cloud and AI allowances, enough to build and test a small project on a public URL. Publishing to a lovable.app subdomain is included; custom domains and code downloads require a paid plan.
What if I get stuck and Lovable can't fix my app?
For small issues, try describing the problem more specifically, or use Plan Mode to have Lovable propose a fix before it changes code. If the same bug keeps reappearing after several attempts (a 'looping' pattern), stop prompting and either roll back to a previous version or duplicate the project to start the risky part fresh. For a more complex build that needs real engineering time, RapidDev's team builds and fixes Lovable projects professionally and can pick up exactly where you got stuck.
Talk to an Expert
Our team has built 1,000+ apps. Get personalized help with your issue.
Book a free consultation