How to get started with Lovable: setup, first project and tips
Lovable is an AI app builder: you describe the app or website you want in plain words, it builds it, and you publish it to a real web address. There's nothing to install. This guide takes you from sign-up to your first published app, then covers three habits that keep bigger projects on track. Every step comes from Lovable's official docs, and you don't need to know how to code to follow it.
Checked
Ready-to-paste prompts
Replace the parts in [brackets] with your own details.
Build a simple first version
Paste this into the prompt box on the Lovable dashboard, with Build mode selected, to start a new project.
Build a website for [your business or idea, e.g. a dog-walking service in Lisbon]. Include [the sections you want, e.g. a hero with a headline and photo, a services list, prices and a contact section]. Use realistic sample content throughout. [The look you want, e.g. clean, friendly and bright]. Works well on mobile. No login or database yet.
Add one new section
Paste this in Build mode once the first version is ready, to make a single change.
Add a [section name, e.g. Testimonials] section between [one section] and [another section], showing [what it should show, e.g. three short customer quotes with a name and city]. Don't change anything else on the page.
Report something that's broken
Paste this when something in the preview doesn't work the way you expect.
On [the page or section, e.g. the contact page], when I [what you did, e.g. click Send], [what happens, e.g. nothing happens]. It should [what you expected, e.g. show a thank-you message]. Please fix just that.
Plan a bigger feature before building
Use this in Plan mode (Option+P or Alt+P to switch) before a change that touches several parts of your app.
I want to add [the feature, e.g. user accounts so visitors can save their favourite items]. Look through the project, ask me any questions you need answered, then write a step-by-step plan of what you'd change. Don't build anything until I approve the plan.
1. Create your free account
Sign up at lovable.dev with email, Google, GitHub or Apple. Your account comes with a personal workspace on the free plan, and Lovable opens the dashboard ready to build. You can also type your idea on the homepage first: Lovable asks you to sign up when you submit and keeps your prompt.
Building uses credits, and the free plan includes a small daily amount. Check the Lovable tool page on StackShip for current plans.
2. Describe your first app
With Build selected in the mode picker, describe what you want in the prompt box in plain language (any language works). Say what the pages or sections are, what visitors can do, and the look you want. Lovable's own tip: end your first prompt with "No login or database yet". A simpler first version means less can go wrong, and you can add both later with one prompt. The first version takes a few minutes and you can watch it being built.
3. Make one change at a time
When the first version is ready you'll see the project chat on the left and a live preview on the right. Ask for one change at a time and check the preview after each. If it works but doesn't feel right, say so in plain words, for example "make the whole site feel warmer and less corporate". Lovable saves every change as a version, so nothing you try can break the app for good.
4. Fix small things by pointing at them
For small visual changes, pointing beats describing. Open the preview toolbar, use Select elements to pick the exact part of the page and say what should change. To change text like a headline or a button label, use Edit text inline and type straight onto the page, with no prompt needed.
Source: docs.lovable.dev/introduction/getting-started, docs.lovable.dev/features/preview-toolbar
5. Test it before you share it
Click every button and link, try the interactive parts, and use the device toggle above the preview to switch to Mobile view, because most people will open your link on a phone. If something's off, tell Lovable exactly what is wrong and where, and what should happen instead.
6. Publish to a live link
Click Publish in the top right of the editor. Lovable suggests a lovable.app web address you can edit, then click Publish again to deploy. The most common surprise for new users: your live site is a snapshot. New changes show up in the preview straight away, but the live site only updates when you click Publish, then Publish changes.
7. Talk it through in Chat or Plan mode first
The project chat has three modes: Build changes your app, Chat lets you ask questions and discuss ideas without changing any code, and Plan looks through your project, often asks clarifying questions, and writes a step-by-step plan you can edit and approve before any code is written. Pick a mode in the mode picker next to the chat box, or cycle through them with Option+P on a Mac (Alt+P on Windows or Linux). Use Plan mode for bigger or riskier changes.
Source: docs.lovable.dev/features/chat-mode, docs.lovable.dev/features/plan-mode
8. Undo a wrong turn with version history
Every change creates a version automatically, so there's no save button. Click History in the top bar to see them all, click one to look at that state of your app, and click Revert to go back to it. You can bookmark versions you like, such as a stable one. To try a different direction from an earlier point, hover over your old message, click Edit message and confirm Revert and resend.
Reverting restores your app's code only. It doesn't undo changes to the data in your app's database.
9. Give Lovable standing instructions
Instead of repeating yourself in every message, write it down once in Project settings, then Instructions (this used to be called Knowledge). Good things to include are what the app does, who it's for, design guidelines like colors and fonts, and rules such as "always write realistic copy, never placeholder text". Workspace owners and admins can also set workspace instructions that apply to every project.
Tools in this guide
FAQ
Do I need to know how to code to use Lovable?
No. You describe what you want in plain words and Lovable builds it. You can open the code if you want to, but you don't have to.
Why doesn't my live site show my latest changes?
Your live site is a snapshot of when you last published. Changes show in the preview straight away, but the live site only updates when you click Publish, then Publish changes.
How do I undo something Lovable changed?
Open History in the top bar, pick an earlier version and click Revert. This restores your app's code, not the data stored in its database.
Sources
- Lovable docs: Quick start: https://docs.lovable.dev/introduction/getting-started
- Lovable docs: Edit from the preview: https://docs.lovable.dev/features/preview-toolbar
- Lovable docs: Chat mode: https://docs.lovable.dev/features/chat-mode
- Lovable docs: Plan mode: https://docs.lovable.dev/features/plan-mode
- Lovable docs: Version history: https://docs.lovable.dev/features/projects/history
- Lovable docs: Instructions: https://docs.lovable.dev/features/knowledge
Get New this week by email
One short email a week with the new releases in AI coding and building tools, each linked to its source. Unsubscribe anytime.
We'll ask you to confirm by email. See our privacy policy.