> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovable.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Find your way around the Lovable editor

> A guided map of the Lovable editor: where every tool lives, from the chat panel and live preview to the project toolbar, More menu, and keyboard shortcuts.

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.

<Note>
  The layout described here is the desktop browser experience. On smaller windows some controls collapse into overflow menus, and the [Lovable mobile app](/integrations/lovable-mobile-app) arranges the same areas as swipeable views instead of a top bar.
</Note>

## The two main areas

* **Chat panel** (left): Where you tell Lovable what to build and follow its progress. Learn more in [Work with Lovable in the project chat](/features/projects/chat).
* **Preview** (right): A live, interactive version of your app that updates as Lovable works. Learn more in [Preview your app](/features/projects/preview).

The rest of the editor's controls sit in the top bar.

## Sidebar

The menu icon in the top-left corner opens the [dashboard sidebar](/introduction/dashboard-overview) along the left edge of the editor, so you can switch workspaces, open another project or folder, search, and reach **Connectors** 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 **Workspace settings → Plans & credit usage** instead. See [View your credit balance](/introduction/credits-and-usage#view-your-credit-balance).
* **Dashboard**: Return to the dashboard.
* **Chats**: Open [Chats](/features/chats), your conversations with Lovable outside your projects. This item appears once you have started a chat.
* **Search**: Open the [command palette](#command-palette).
* **Connectors**: Open your workspace's connector catalog. See [Connectors](/integrations/introduction).
* **Projects**: Open the full projects list, where you can filter by owner and browse your folders, without leaving the editor.
* **Starred** and **Recents**: **Starred** lists the projects and chats you have starred. **Recents** lists the projects and chats you opened last, including the project you have open, with a filter for **All**, **Chats**, or **Projects**. 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.
* **User menu**: Click your avatar at the bottom to open your [account settings](/introduction/lovable-account-settings), change the theme under **Appearance**, reach support and the community, or log out. See [User menu](/introduction/dashboard-overview#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](/introduction/dashboard-overview#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](/features/drafts), 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](/features/projects/settings#details). 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](/features/projects/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](/features/projects/preview).
* **Files**: The files that live alongside your app: documents Lovable [generates for you](/features/generate-files) and [files you upload](/features/generate-files#upload-your-own-files), like reports, exports, and other deliverables. Group them into [collections](/features/generate-files#collections), and see new files appear as Lovable creates them.
* **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](/features/code-mode).
* **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:

| Section | What it's for |
| - | - |
| **Analytics** | Visit counts, page views, and usage trends for your published app, without adding any tracking code. Learn more in [Analytics](/features/analytics). |
| **Cloud** | Your app's backend in one place: the database and its records, user accounts, file storage, scheduled jobs, edge functions, secrets, logs, and usage. Learn more in [the built-in backend (Cloud)](/features/cloud). |
| **AI** | Monitor and manage the AI features inside your app, such as model usage and spend. Learn more in [AI](/features/ai). |
| **Agent integrations** | Publish your app as an MCP server, so AI assistants like ChatGPT and Claude can use it. Learn more in [Agent integrations](/features/agent-integrations). |
| **Payments** | Accept payments in your app through the built-in **Paddle** and **Stripe** integrations, with Lovable wiring up products and checkout. Learn more in [Payments](/features/payments). |
| **Connectors** | See the services your project is connected to, with links to manage each connection. Learn more in [Connectors](/integrations/introduction). |
| **Security** | Review security findings for your project and fix them with Lovable's help. Learn more in [Security](/features/security) and the [project security view](/features/security-view). |
| **SEO & AI search** | Review how search engines and AI tools see your app, and fix metadata, indexing, and accessibility issues. Learn more in [SEO & AI search](/features/seo-aeo). |
| **Sensitive data** | Appears when sensitive data scanning is enabled for your workspace, and shows what personal data your app handles. Learn more in [Sensitive data scanning](/features/sensitive-data-scanning). |
| **Settings** | The project's own settings: **General**, **Knowledge**, **Domains**, and **Git**. You need edit access to the project for most of them. Learn more in [Project settings](/features/projects/settings). |

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](/features/custom-emails).
* **Supabase**: Manage your external Supabase connection, when your project uses one. Learn more in [Supabase](/integrations/supabase).

<Note>
  What you see in the More menu depends on your project and plan: sections tied to a feature appear once you use it.
</Note>

## 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](/features/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](/features/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](/features/share-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 the project chat. See [Publish your project](/features/publish).

## Command palette

Press **Cmd+K** (Mac) or **Ctrl+K** (Windows/Linux) anywhere in the editor to open the [command palette](/introduction/project-search-and-find#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

<AccordionGroup>
  <Accordion title="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 [the built-in backend (Cloud)](/features/cloud).
  </Accordion>

  <Accordion title="Where are my app's analytics?">
    Open the **More** tab in the project toolbar and select **Analytics**. See [Analytics](/features/analytics).
  </Accordion>

  <Accordion title="How do I open the code editor?">
    Click the **Code** tab in the project toolbar. See [the code editor](/features/code-mode).
  </Accordion>

  <Accordion title="Where are project settings?">
    In the editor, you can open them from:

    * 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](/integrations/lovable-mobile-app#editor-and-project-menu), under **Settings**

    From anywhere in Lovable, the [command palette](#command-palette) finds any setting by name. See [Where to find project settings](/features/projects/settings#where-to-find-project-settings) for details.
  </Accordion>

  <Accordion title="Where are Help center and Contact support?">
    Both are in the **Chat actions** menu next to the chat input. **Help center** opens [lovable.dev/support](https://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](/features/projects/chat#chat-actions).
  </Accordion>

  <Accordion title="Where are Star and Move to folder in the editor?">
    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](/introduction/dashboard-overview#manage-projects-from-the-dashboard).
  </Accordion>

  <Accordion title="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](/features/share-project).
  </Accordion>

  <Accordion title="How do I switch to another project?">
    Click the menu icon in the top-left corner to open the sidebar and pick any project or folder without leaving the editor.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>


## Related topics

- [Find and search projects](/introduction/project-search-and-find.md)
- [Project monitoring](/features/project-monitoring.md)
- [Sync your Lovable project with GitHub](/integrations/github.md)
- [Sync your Lovable project with GitLab](/integrations/gitlab.md)
- [Sync your Lovable project with Bitbucket](/integrations/bitbucket.md)