Find your way around the Lovable editor
This guide helps you understand the layout of the Lovable editor, showing where to find all the tools for building and managing your app. It covers the main areas like the chat and preview, along with all the menus and controls in the top bar.
Anyone using Lovable to build an app will need this to quickly find features and settings within their project.
Do this, in order
- 1
Open your Lovable project in the editor.
This is where you'll find all the tools and features described in this guide.
- 2
Look at the left side for the 'Chat panel' to tell Lovable what you want to build, and the right side for the 'Preview' to see your app live.
These are the two main areas where you interact with Lovable to create and view your app.
- 3
Explore the top bar for project-specific controls like the project name, version history, and options to hide the chat panel.
These controls help you manage your project's versions and screen layout.
- 4
Check the 'Project toolbar' in the top bar for tabs like 'Preview', 'Files', and 'Code' to switch between different views of your project.
These tabs let you access your app's live view, generated files, and underlying code.
- 5
Click the 'More' tab in the project toolbar to find advanced tools for analytics, backend services (Cloud), AI features, payments, and project settings.
This menu contains powerful features for growing, monitoring, and managing your app's deeper functionalities.
- 6
Use the controls in the top right, such as 'Collaborator avatars', 'Share', and 'Publish', to manage teamwork and deploy your app.
These buttons are essential for working with others and making your app live.
- 7
Press 'Cmd+K' (Mac) or 'Ctrl+K' (Windows/Linux) to open the 'Command palette' and quickly search for projects, folders, or settings.
This shortcut provides a fast way to navigate and find anything within Lovable without clicking through menus.
Paste this into your project
I'm trying to find my way around the Lovable editor. Can you help me understand where the main tools are, like the chat, preview, and project settings?
Words decoded
- Editor
- The main screen where you build and manage your app, split into a chat area and a live preview.
- Chat panel
- The area on the left where you type instructions to Lovable and see its responses and progress.
- Preview
- The area on the right that shows a live, interactive version of your app as you build it.
- Project toolbar
- A set of tabs at the top of the screen that lets you switch between different views of your project, like the live app, its files, or its code.
- Command palette
- A quick search bar that pops up when you press a keyboard shortcut, allowing you to find projects, settings, or features by typing.
- Dashboard sidebar
- A menu that slides out from the left, giving you access to switch between projects, workspaces, and other main Lovable areas.
- Drafts
- Temporary versions of your project where you can experiment without affecting the main live version.
- Cloud
- Lovable's built-in backend services, including your app's database, user accounts, and other server-side features.
- Agent integrations
- Features that allow AI assistants like ChatGPT to interact with and use your app.
Where people get stuck
- Don't expect all features to be visible at all times; some tools only appear when relevant to your project or included in your plan.
- Be aware that the layout might look different on smaller screens or the mobile app, as some controls collapse into menus or are arranged differently.
The short version, steps, decoder and prompt on this page are written automatically from Lovable's own documentation and can lag or misread it. The official page is always the authority.