The layout described here is the desktop browser experience. On smaller windows some controls collapse into overflow menus, and the Lovable mobile app arranges the same areas as swipeable views instead of a top bar.
The two main areas
- Chat panel (left): Where you tell Lovable what to build and follow its progress. Learn more in Chat with Lovable.
- Preview (right): A live, interactive version of your app that updates as Lovable works. Learn more in Preview your app.
Lovable logo
The Lovable logo in the top corner opens the dashboard sidebar in place, so you can switch workspaces, jump to another project or folder, or reach any part of the dashboard without leaving the editor.Project name menu
Click your project’s name in the top bar to open a menu with project-level and account actions. At the top it shows your workspace, plan, and current credit usage. Below that:- Get free credits: Earn additional credits through referrals. See Share Lovable.
- Settings: Open the settings dialog, covering both project settings and your workspace settings.
- Project connectors: Manage the services your project connects to. See Connectors.
- Remix this project: Create an independent copy to build on. See Remix a project.
- Design system: Apply a shared design system to this project. Available on Enterprise plans. See Design systems.
- Rename project: Change the project’s display name.
- Star project: Pin the project to your Starred list on the dashboard.
- Move to folder: Organize the project into a dashboard folder.
- Details: View project information such as its description, owner, and creation date.
- Appearance: A small submenu to switch the editor between light and dark themes.
- Help: Get support and helpful resources.
History
The History toggle next to the project name opens your project’s version history, where you can browse past versions, restore an earlier one, and manage bookmarks. Learn more in Version history.Close sidebar
The Close sidebar toggle collapses the chat panel to give the preview the full window, and brings it back when you click it again. You can also press Cmd+B (Mac) or Ctrl+B (Windows/Linux).Project toolbar
The tabs in the project toolbar switch what the main area shows:- Preview: The home tab. Shows your app running live, so you can click through it exactly as your users would. See Preview your app.
- Files: The files that live alongside your app: documents Lovable generates for you and files you upload, like reports, exports, and other deliverables.
- Code: A full code editor where you can read your project’s code, edit it directly on paid plans, and download it. See the code editor.
- More: Opens a panel with the rest of your project’s tools, listed below.
The More menu
Click More to open a panel with tools for growing and running your app:
A few tools you might expect as their own sections live inside Cloud:
- AI: Monitor and manage the AI features inside your app, such as model usage and spend. Learn more in AI.
- Emails: Send transactional email, like sign-up confirmations and receipts, from your app’s own address. Requires Lovable Cloud and a paid plan. Learn more in Send emails.
- Supabase: Manage your external Supabase connection, when your project uses one. Learn more in Supabase.
What you see in the More menu depends on your project and plan: sections tied to a feature appear once you use it.
Top right controls
These controls sit above the preview and are available while the Preview tab is active. From left to right:- Preview toolbar button: Brings back the preview toolbar when it’s hidden, so you can select elements, edit text inline, and draw on the preview.
- Comments: Open your project’s comments to catch up on feedback from collaborators. This button shows when the preview toolbar is hidden. When the toolbar is visible, comments live in the toolbar itself. See Project comments.
- Collaborator avatars: See who else is in the project right now, and invite others.
- Share: Invite collaborators, control who can access the project, and create preview links. See Share your project.
- Publish: Deploy your app to its live URL, or push an update to the published version. On Business and Enterprise plans you can publish to your workspace only, instead of the public web. You can also ask Lovable to publish in chat. See Publish your project.
Command palette
Press Cmd+K (Mac) or Ctrl+K (Windows/Linux) anywhere in the editor to open the command palette and search for projects, folders, and settings from the keyboard.FAQ
Where do I find Cloud and my database?
Where do I find Cloud and my database?
Open the More tab in the project toolbar and select Cloud. That’s where your database, users, storage, and backend logs live. See Lovable Cloud.
Where are my app's analytics?
Where are my app's analytics?
Open the More tab in the project toolbar and select Analytics. See Analytics.
How do I open the code editor?
How do I open the code editor?
Click the Code tab in the project toolbar. See the code editor.
Where are project settings?
Where are project settings?
Click your project’s name in the top bar, then select Settings. See Project settings.
Where do I manage who can access my project?
Where do I manage who can access my project?
In the Share menu in the top right, not in project settings. Share is where you invite collaborators, set roles, and control the project’s visibility. See Share your project.
How do I switch to another project?
How do I switch to another project?
Click the Lovable logo in the top corner to open the dashboard sidebar and pick any project or folder, without leaving the editor.
I don't see a tab described here. Where did it go?
I don't see a tab described here. Where did it go?
On smaller windows, some tabs collapse into an overflow menu at the end of the project toolbar, so try widening your browser window. Some tools also appear only when they’re relevant to your project or included in your plan.