Set Up Your Builder and Take the Tour (Lovable)

Why this matters

You cannot build until you know where the buttons are, and the good news is there are only about four things you need to find. Lovable's whole interface is three panels — the chat where you type requests, the live preview where you see your app, and the publish button that puts it online — plus a version history that lets you undo any change safely. Getting comfortable with this layout in a low-stakes throwaway build means that when you start your real project you are thinking about your app, not hunting for controls. Every builder in this class (Lovable, Bolt, v0) uses the same three-panel shape, so learning it once transfers everywhere.

Demo

Go to lovable.dev and click 'Sign up' — you can use a Google account or an email, and the free tier gives you a handful of message credits per day, enough to complete every lesson in this module. After signing in you land on a dashboard; click 'New Project'. Now look at the layout. On the LEFT is the chat panel: one text box at the bottom where you type what you want, with your conversation history above it. On the RIGHT is the live PREVIEW: an interactive frame showing your actual app that updates every time the AI finishes a change. Along the top you will find the VERSION HISTORY (a clock or 'History' icon) — every message you send creates a restore point, so you can always roll back to a working version if a change goes wrong. Also at the top right is the PUBLISH button, which is greyed out until you have something to publish. To feel the build loop fire, type one throwaway prompt: 'Make a single page that says Hello, World in big letters with a bright blue background.' Watch the chat show a working indicator, then in about twenty seconds the preview on the right turns bright blue with large text. That is the whole machine: type on the left, watch on the right, roll back from the top, publish when ready.

Try it yourself

1. Create a free Lovable account and open a New Project — confirm you can see the chat box on the left and an empty preview on the right.
2. Find and click the version history control; note that it is empty now and where it lives so you can reach it fast later.
3. Send the throwaway prompt 'Make a single page that says Hello, World in big letters with a bright blue background' and time how long the build takes.
4. Send a second tiny request — 'change the background to green' — then use version history to roll BACK to the blue version, proving to yourself that undo works.
5. Locate the Publish button and note whether it is active yet; do not publish this throwaway project.

References

• Lovable — sign up
• Lovable documentation home
• Bolt.new (alternative builder)