Skip to main content
Opening a project takes you to the editor. This is where you build: you describe what you want in the chat panel on the left, and you watch your app take shape in the preview on the right. Everything else, from version history to publishing, is one or two clicks away in the top bar. This page is a map of the editor, so you always know where to find things.
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.
The rest of the editor’s controls sit in the top bar. The menu icon in the top-left corner opens the dashboard sidebar along the left edge of the editor, so you can switch workspaces, open another project or folder, search, and reach Connectors and Settings without leaving the editor. Hover the icon to reveal the sidebar temporarily, or click it to keep the sidebar open. To close it, click the Close sidebar icon at the top of the sidebar, or press [, which opens and closes it. Inside a project, the sidebar gives you:
  • Workspace switcher: Click your workspace name to switch workspaces. On Free, Pro, and Business plans, the menu also shows a credit bar with the workspace’s remaining credits and your own Personal usage for the month (or Personal credits, when a member credit limit applies to you). On Business plans, editors find their personal usage in Settings → Plans & credit usage instead. See View your credit balance.
  • Dashboard: Return to the dashboard.
  • Search: Open the command palette.
  • Connectors: Open your workspace’s connector catalog. See Connectors.
  • Projects and Recents: Open another project or folder without leaving the editor. Under Projects you find All projects, which expands to your folders, and Starred. Recents lists the projects you opened last, including the one you have open. Hover a project and click its ⋯ button to open the Project actions menu, where you can star the project, move it to a folder, rename it, remix it, or open its settings.
  • Settings: Open project settings. You need edit access to the project. For all the ways to open project settings, see Where to find project settings.
  • Details: View project information such as its description, owner, and creation date.
  • User menu: Click your avatar at the bottom to open your account settings, change the theme under Appearance, reach support and the community, or sign out. See User menu for everything in it.
The sidebar also shows the referral card, where you earn credits by sharing Lovable. Not available on Enterprise plans. See Share Lovable.

​
Project name and drafts

Your project’s name sits in the top bar next to the menu icon, and it tells you which version of the project you’re looking at: the name on its own for the main version, or the name with a draft’s name beside it while you’re in that draft. Click it to open the draft switcher, where you can create a draft, switch between the main version of your project and your drafts, and accept a draft into your project. The top row of the switcher is the main version of your project, and it has a Project settings button when you can edit the project. To rename the project, edit Project name in project settings. In the editor you can also press Cmd+Shift+. (Mac) or Ctrl+Shift+. (Windows/Linux).

​
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.

​
Hide chat panel

The Hide chat panel toggle collapses the chat panel to give the preview the full window, and Show chat panel brings it back. 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:
  • Emails: Send transactional email, like sign-up confirmations and receipts, from your app’s own address. Requires a paid plan, and the built-in backend (Cloud) on React + Vite projects. 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. The Drafts group lists Main preview and every draft in the project.

​
FAQ

Open the More tab in the project toolbar and select Cloud. That’s where your database, users, storage, and backend logs live. See the built-in backend (Cloud).
Open the More tab in the project toolbar and select Analytics. See Analytics.
Click the Code tab in the project toolbar. See the code editor.
In the editor, you can open them from:
  • The sidebar, under Settings
  • The Chat actions menu next to the chat input, under Project → Settings
  • The More tab in the project toolbar, under Settings
  • The Project settings button on the top row of the draft switcher
  • The Cmd+. (Mac) or Ctrl+. (Windows/Linux) shortcut
Outside the editor, you can open them from:
  • A project card’s three-dot menu on the dashboard, under Settings
  • A project’s ⋯ menu in the sidebar, under Settings
  • The project’s name in the Lovable mobile app, under Settings
From anywhere in Lovable, the command palette finds any setting by name. See Where to find project settings for details.
Both are in the Chat actions menu next to the chat input. Help center opens lovable.dev/support. On Enterprise plans, you find it together with Contact support under Help & support, and Contact support opens a support request for this project. See Chat actions.
Open the sidebar, hover the project, and click its ⋯ button to open the Project actions menu. From the same menu you can also rename, remix, or delete the project. All of these actions are also on the project card on the dashboard.
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.
Click the menu icon in the top-left corner to open the sidebar and pick any project or folder without leaving the editor.
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.