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

# Find your way around the editor

> A guided map of the Vibely editor, from the chat panel and live preview to the header controls, the Manage panel, 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 project settings to publishing, is one or two clicks away in the header.

<Frame>
  <img src="https://cdn.vibely.sh/doc/v1/projects-editor.webp" alt="Find your way around the editor" width="1200" height="675" />
</Frame>

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. In a narrow window some header controls fold into a **⋮** menu, and on a phone the chat and preview become separate full-screen views with a project actions menu next to the chat input. See [On a phone](#on-a-phone).
</Note>

## The two main areas

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

Drag the divider between them to change how much room each gets. The rest of the editor's controls sit in the header.

## Sidebar

The menu icon in the top-left corner opens the same sidebar you see on the dashboard, so you can move around Vibely without leaving the editor. Hover the icon to peek at the sidebar, or click it to keep it open.

The sidebar gives you:

* **New**: Go back to the home screen to start another project.
* **Templates**: Browse working apps you can start from. See [Templates](/features/design/workspace-templates).
* **Customize**: Manage skills and connectors. See [Skills](/features/context/skills) and [Connectors](/integrations/connectors/overview).
* **Search**: Open the [command palette](#command-palette). The shortcut is **Cmd+K** (Mac) or **Ctrl+K** (Windows/Linux).
* **Projects**: **Browse all**, **Favorites**, **My projects**, and **Shared**. See [Find and search projects](/features/projects/projects-and-folders).
* **Pinned** and **Recents**: The projects you pinned and the ones you opened last. Hover a project and click its **⋯** button to **Pin**, **Open in new tab**, **Copy link**, **Rename**, or **Delete** it.
* **Account menu**: Your settings, plans, language, documentation, help, and **Sign out**.

## Project name

Your project's name sits in the header next to the menu icon. To rename the project, open **Manage → Settings → General** and click **Rename**. See [Project settings](/features/projects/settings).

## Show or hide the chat panel

The chat toggle next to the project name collapses the chat panel to give the preview the full window, and brings it back. It appears on large screens.

## View switcher

The switcher in the header changes what the right side of the editor shows:

* **Preview**: The default view. Shows your app running live, so you can click through it the way your users will. See [Preview and test your app](/features/projects/preview).
* **Code**: A file tree and code editor over your project's files, updating live while Vibely writes them. You can edit, save, and delete files here too. Available on paid plans. See [View and edit your project's code](/features/projects/code-editor).
* **Manage**: The rest of your project's tools, listed below.

The preview stays loaded while you switch views, so going back to **Preview** doesn't reload your app.

### The Manage panel

Click **Manage** to open a panel with tools for running and growing your app:

| Section | What it's for |
| - | - |
| **Analytics** | Visitors and page views for your published site. Web projects only. See [Analytics](/features/grow/analytics). |
| **Vibely AI** | Usage and spend for the AI features inside your app. See [AI in your app](/features/backend/ai). |
| **Agent integrations** | Let AI assistants use your published app. Web projects only. See [Agent integrations](/features/grow/agent-integrations). |
| **Connectors** | The services this project is connected to. See [Connectors](/integrations/connectors/overview). |
| **Security** | Security findings for this project, with fixes. See [Project security view](/features/security/project-view). |
| **Settings** | **General**, **Knowledge**, **Domains** (web projects), and **Git**. See [Project settings](/features/projects/settings). |

## Preview controls

While the **Preview** view is open, the header carries the controls for moving around your app: the device size toggle, **Reload preview**, the page selector, **Open preview in new tab**, and **Comments**. See [Preview controls](/features/projects/preview#preview-controls).

Next to them are two more:

* **History** (clock icon): Opens **Version history**, where you can restore or bookmark any saved version of your project. See [Version history](/features/projects/history#pick-a-version-from-version-history).
* **SEO & AI search** (magnifying glass): Checks how search engines and AI answer engines will read your app, with a score and a one-click fix for each finding. Web projects only. See [SEO and AI search](/features/grow/seo#review-your-app-in-the-editor).

## Top right controls

From left to right:

* **Invite**: Invite collaborators, set the project's access, and create a preview link. See [Collaboration](/features/collaboration/overview) and [Sharing](/features/collaboration/sharing).
* **GitHub**: Connect the project to a repository, open it, or open it in **Edit in VS Code** once it's connected. See [GitHub](/integrations/github).
* **Supabase**: Connect your Supabase account and link a project for database, auth, and storage. See [Supabase](/integrations/supabase).
* **Feedback**: Send feedback about this project to the Vibely team.
* **Upgrade**: Appears on the Free plan.
* **Publish**: Deploy your web app to its live URL, or push an update. On a mobile project, **Publish** opens the App Store and Google Play flow instead. See [Publish your web app](/features/deploy/publish) and [Ship to the stores](/features/mobile-apps/ship).

When the right side of the editor is narrow, GitHub, Supabase, Feedback, and the view switcher fold into the **⋮** menu.

## Command palette

Press **Cmd+K** (Mac) or **Ctrl+K** (Windows/Linux) anywhere in Vibely to open the command palette and jump to a project, create a new Web or Mobile project, or open your workspace and account settings. See [Command palette](/features/projects/projects-and-folders#command-palette).

## Keyboard shortcuts

| Shortcut | What it does |
| - | - |
| **Cmd+K** / **Ctrl+K** | Open the command palette |
| **Cmd+/** / **Ctrl+/** | Jump to the chat input |
| **Enter** | Send your message |
| **Shift+Enter** | New line in your message |
| **Esc** | Stop Vibely while it's working (when you're not typing in a field) |
| **S**, **T**, **D**, **C** | Preview toolbar modes: select, edit text, draw, comment. See [Edit directly from the preview](/features/projects/preview#edit-directly-from-the-preview). |
| **Cmd+Z** / **Ctrl+Z** | Undo the last staged visual edit while select mode is on |
| **Cmd+S** / **Ctrl+S** | Save the open file in the [Code view](/features/projects/code-editor#edit-a-file) |

## On a phone

On a phone, the chat and the preview each take the full screen. Next to the chat input, the **⋯** button opens **Project actions**:

* **Share** and **Publish**
* **Project settings**
* **Code**: Browse your project's files and read any file.
* **Files**: Opens your project knowledge.
* **More**: Security scan, analytics, comments, connectors, reload preview, and feedback.
* **History**: Your saved versions, which you can restore. See [Version history](/features/projects/history).

## FAQ

<AccordionGroup>
  <Accordion title="Where are project settings?">
    In the editor, open **Manage → Settings**. Outside the editor, open a project card's **⋯** menu on the dashboard and choose **Settings**. On a phone, tap **⋯** next to the chat input and choose **Project settings**. See [Project settings](/features/projects/settings).
  </Accordion>

  <Accordion title="Where are my app's analytics?">
    Open **Manage → Analytics**. Analytics are available for web projects. See [Analytics](/features/grow/analytics).
  </Accordion>

  <Accordion title="How do I open the code?">
    Click **Code** in the view switcher. The code view needs a paid plan. See [View and edit your project's code](/features/projects/code-editor).
  </Accordion>

  <Accordion title="Where do I manage who can access my project?">
    In the **Invite** panel in the top right. That's where you invite collaborators, set roles, set **Project access**, and create preview links. See [Collaboration](/features/collaboration/overview).
  </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 a project, or press **Cmd+K** (Mac) or **Ctrl+K** (Windows/Linux) and type its name.
  </Accordion>

  <Accordion title="I don't see a control described here. Where did it go?">
    When the right side of the editor is narrow, several controls fold into the **⋮** menu, so try widening your window or dragging the divider. Some tools also appear only for web projects or on paid plans.
  </Accordion>
</AccordionGroup>

## Related topics

<CardGroup cols={2}>
  <Card title="Work with Vibely in the project chat" icon="message" href="/features/projects/chat">
    Prompts, attachments, plan mode, and fixes.
  </Card>

  <Card title="Preview and test your app" icon="eye" href="/features/projects/preview">
    The live app and the preview toolbar.
  </Card>

  <Card title="Find and search projects" icon="magnifying-glass" href="/features/projects/projects-and-folders">
    The command palette and dashboard filters.
  </Card>

  <Card title="Sync with GitHub" icon="github" href="/integrations/github">
    Two-way sync with your repository.
  </Card>
</CardGroup>


## Related topics

- [Find and search projects](/features/projects/projects-and-folders.md)
- [Projects in Vibely](/features/projects/overview.md)
- [Project settings](/features/projects/settings.md)
- [Work with Vibely in the project chat](/features/projects/chat.md)
- [Dashboard overview](/introduction/dashboard.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.