Your Lovable Dashboard

What you will learn

The main areas you’ll see inside a Lovable project
What the chat, preview and visual editing are for
Where publishing, settings and billing live
Why your screen may look slightly different from someone else’s

A quick tour

When you open a project, the screen is usually split in two: a chat area where you talk to Lovable, and a preview where you see your website.

Here are the main areas you’ll come across. You don’t need to memorize them. Just knowing they exist is enough for now.

1Projects: your list of websites inside a workspace.
2AI chat: where you type instructions in plain language.
3Preview: a private, working view of your website as it is right now in the editor.
4Visual editing: lets you click on something in the preview and adjust it directly, like text or colors.
5Code: the technical files behind your website. You can safely ignore this.
6Publishing: the button that makes your latest version live for the public.
7Settings: project details such as the name, domain and visibility.
8Billing: your plan, credits and payment details.
9Integrations: connections to other services, such as payments or email tools.

Verify in your Lovable account

Lovable updates its interface regularly and some features depend on your plan. Verify in your Lovable account.

Preview and visual edits (docs)

① Projects

⑦ Settings⑥ Publish

② AI CHAT

Change my phone number on the Contact page…

Done! I updated the number. Keep everything else the same.

Type your instruction here

③ PREVIEW (private)

④ Visual edit · ⑤ Code

Illustration only. ⑧ Billing and ⑨ Integrations are usually found in workspace or project settings. Your screen may look different.

The preview is your rehearsal stage

Think of the preview as a dress rehearsal. You can try things, look at them, and change your mind. The audience (your visitors) doesn’t see anything until you publish.

Practice activity

What does this part do?

Read each situation and choose the part of Lovable you would use.

1.You want to change a sentence on your About page.

2.You want to see how the change looks before anyone else does.

3.You’re happy and want the public to see it.

4.You want to check how many credits you have.

5.You want to click a heading and tweak it directly.

Common mistakes

Editing files in the Code area without knowing what they do.

Stick to the chat and visual editing. Leave code to your developer.

Thinking the preview is the live website.

The preview is private. Only publishing updates what visitors see.

Panicking when a button moves or looks different.

Interfaces change. Check the official docs or search for the feature name.

Knowledge quiz

Three quick questions. Retake as often as you like.

1.Where do you type instructions to Lovable?

2.Can visitors see your preview?

3.Your screen looks a bit different from this course. What should you do?