Lovable is an app builder: you describe a website or web app in plain English, it writes the code, and you refine the result by chatting. Everything happens in your browser, so there is nothing to install.
This recipe takes you from an empty prompt to a published site with its own web address. It uses a small, realistic example: a one-page site for a local dog-walking business.
Lovable changes its interface and plans regularly. Where we mention a button or menu, we've checked it against Lovable's documentation, but if your screen looks a little different, the docs are the source of truth.
What you'll need
- A Lovable account. The Free plan is enough for this recipe.
- An idea, written down in a few sentences.
- Optional: a GitHub account (for Step 7) and a domain name you own (for Step 6).
Step 1: Write a first prompt that does the heavy lifting
The first prompt matters most, because every correction afterwards costs credits. Instead of "make me a website for my dog-walking business", give Lovable the same things you'd give a freelance designer:
Build a one-page website for "Happy Paws", a dog-walking service in Leeds. Audience: busy dog owners who want a trustworthy walker. Sections, in order: 1. A hero with a headline, a short subheading and a "Book a walk" button. 2. Three service cards: 30-minute walk, 60-minute walk, weekend visits. 3. Three short customer testimonials (use placeholder text I can replace). 4. A simple contact form asking for name, email and dog's name. 5. A footer with an email address and opening hours. Style: friendly and warm. Soft green and cream colours, rounded corners, large readable text. Works well on a phone.
Notice what's in there: who it's for, the sections in order, and the look and feel. Notice what's missing: you haven't asked for sign-in, payments or a database. Start with the simplest version and add things once it works.
Step 2: Consider planning first
Lovable's project chat has different modes. According to its docs:
- Build mode makes changes to your project directly. (It was previously called Agent mode, so older tutorials use that name.)
- Plan mode investigates your project and writes a plan you can edit and approve before any code changes. A Plan mode message costs 1 credit, plus extra if Lovable does deeper research. It never changes your code.
- Chat mode is for discussion and questions, with no code changes.
If your idea is big or fuzzy, spend a message or two in Plan mode first. Ask Lovable what it would build and what it would leave out, tweak the plan, then approve it. It's a cheap way to catch misunderstandings before they turn into rework.
For the small site in this recipe, going straight to Build mode is fine.
Step 3: Review the preview
After you send the prompt, Lovable builds the site and shows a live preview next to the chat. Don't just glance at it. Click through it like a visitor:
- Do all the sections appear in the order you asked for?
- Does the "Book a walk" button go somewhere sensible?
- Resize your browser window narrow, or open the preview on your phone. Does it still look right?
- Is anything you didn't ask for, or any text you wouldn't want to publish?
Write down everything you want to change in one list. That leads to the next step.
Step 4: Refine in batches, not one tweak at a time
Each message you send in Build mode uses credits. The docs say many requests cost less than one credit while more complex ones cost more, and Lovable doesn't show an estimate up front. The practical lesson is to send fewer, clearer messages.
Instead of five separate messages:
Make these changes: 1. Change the hero headline to "Walks your dog will wait by the door for". 2. Make the three service cards the same height. 3. Replace the testimonial placeholders with these (keep first names only): - "Biscuit has never been so tired and happy." - Priya - "Reliable, kind and always on time." - Tom - "Photos after every walk. Brilliant." - Aoife 4. Add my phone number 0113 000 0000 to the footer. Don't change anything else.
"Don't change anything else" is a useful phrase. It nudges the AI to leave the parts you like alone.
If something goes wrong, tell Lovable what you see and what you expected, rather than just "it's broken". Lovable's docs cover how to restore earlier versions of a project, so look there if you need to undo a change.
Step 5: Publish
When you're happy, publish. According to Lovable's docs, you can click the Publish button at the top right of the editor, or ask Lovable in the project chat. Publishing works on all plans, including Free.
Lovable gives the published site a public web address on lovable.app, and you can customise the name part of it. Two things worth knowing:
- Publishing is separate from editing. Changes you make afterwards are not visible to visitors until you publish again, using Publish changes.
- Visiting and editing are separate permissions. Publishing doesn't give anyone access to your project or its code. On the Free and Pro plans a published site is public by default, and there's an invite-only option for small groups. Check the docs for the audience options on your plan.
Open the published address in a private browser window to check what the public sees.
Step 6: Add a custom domain (optional)
An address like happy-paws.lovable.app is fine for testing, but most businesses want happypaws.co.uk. Lovable's docs say:
- Custom domains are available on paid plans.
- You manage them under Project → Settings → Domains, and you can also start from the Publish dialog.
- You need to publish the project before the domain can serve your site.
- Lovable sets up the HTTPS certificate for you.
You'll also need to change DNS records at the company where you bought the domain. The exact records depend on your setup, so follow the instructions Lovable shows you in the Domains screen, or its guide on launching on a custom domain. DNS changes can take a while to spread, so don't panic if it doesn't work instantly.
If you use a service like Cloudflare in front of your domain, read Lovable's current guidance before connecting it. We couldn't confirm a single rule that applies to every setup, so we won't guess here.
Step 7: Back your project up to GitHub (optional, recommended)
GitHub is a service for storing code with a full history of changes. Lovable's docs describe two-way sync with GitHub: Lovable creates a new private repository when you connect, links the project to it, and from then on changes flow both ways. Edits you make in Lovable are committed to GitHub, and commits pushed to the active branch (by default the repository's default branch, usually main) show up in Lovable.
Why bother?
- A safety copy. Your code lives somewhere you control.
- Room to grow. A developer, or a tool like Claude Code or Cursor, can work on the same code later.
- Peace of mind. If you disconnect, the repository stays on GitHub with all its history.
A few cautions from the docs: each Lovable project links to one repository, you need owner or admin rights to connect, and you should avoid force-pushing or rewriting history on the synced branch. If you're new to Git, our Git basics for non-coders guide explains the ideas.
Step 8: Keep an eye on credits
On the Free plan you get a small daily allowance, and paid plans are mostly limited by credits. A few habits stretch them:
- Plan first for anything large; chat when you only have a question.
- Put several changes in one message.
- Be specific. Vague prompts lead to rounds of rework.
- Start small. Get a simple version published, then add features one at a time.
For current allowances and prices, check lovable.dev/pricing. They change often.
Troubleshooting
The result looks nothing like what I pictured. Name a style, colours and one or two real sites you like, or describe the mood in words. If it's far off, consider restarting from a fresh, better prompt rather than patching.
Lovable keeps changing things I didn't ask about. End each prompt with "Don't change anything else", and make one kind of change at a time.
My live site doesn't show my latest edits. You need to click Publish changes.
My custom domain isn't working. Confirm you're on a paid plan, the project is published, and the DNS records exactly match what the Domains screen asks for. Then wait.
Recap
- Write a first prompt covering audience, sections and style.
- Use Plan mode for big ideas.
- Check the preview like a visitor, then refine in batches.
- Publish, and Publish changes after each edit.
- Add a custom domain and GitHub sync when you're ready.
If you outgrow Lovable, or want to see how it stacks up, read our Lovable vs Bolt and Lovable vs Replit comparisons. If you'd rather host the code yourself, see deploying an AI-built site to Cloudflare Pages.