Quick start

1. 1

   Sign up for a free Lovable account using email, Google, GitHub, or Apple.

   This creates your personal workspace and allows you to start building projects.

2. 2

   In the 'Ask Lovable to create…' box, describe the app you want to build in plain language, like '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.'

   This tells Lovable what to create for you. Starting without logins or databases makes the first version simpler and faster to build.

3. 3

   Wait for Lovable to build the first version of your app, then explore it in the preview section.

   This allows you to see the initial result and understand how your app works before making changes.

4. 4

   Ask Lovable to make changes in the project chat, 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.'

   This lets you refine your app by describing what you want to change or improve.

5. 5

   For small visual changes, use the preview toolbar to select an element and edit its text directly on the page.

   This is a quick way to make minor text adjustments without typing a full prompt.

6. 6

   Test your app thoroughly by clicking all buttons and links, trying interactive parts, and checking it in 'Mobile view'.

   This ensures your app works as expected and looks good on different devices before you share it.

7. 7

   Click 'Publish' in the top right, optionally change the web address, and click 'Publish' again to make your app live.

   This deploys your app to a shareable web address, making it accessible to others.

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.

Build credits

These are like tokens you use when Lovable creates or updates your app. Free plans include a certain number of these per day and month.

Hero section

This is the prominent, often large, section at the top of a webpage, usually containing a headline, image, or video, designed to grab attention.

Interactive menu

A menu on a website where visitors can click or tap to filter or sort items, like seeing only 'coffee' items or 'breakfast' items.

Preview toolbar

A set of tools that appears when you are looking at your app's preview, allowing you to interact with or modify elements directly.

Snapshot

A saved version of your app at a specific moment in time. When you publish, you are sharing a snapshot, and further changes in the editor won't appear live until you publish a new snapshot.

• Forgetting that your live site is a snapshot and won't update automatically with changes you make in the editor until you click 'Publish' again.
• Not testing your app on mobile view before publishing, which might lead to a poor experience for users on phones.
• Trying to build a complex app with logins and databases in the very first version, which can make the initial build more difficult and prone to issues.