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

# Tour the Onlook interface

> What each part of the Onlook window is called, where it sits, and what you do there: the projects screen, top bar, sidebar, canvas, toolbar and chat.

Onlook has two main screens: the **projects screen**, where your work is listed, and the **editor**, where you design on a project. This page walks through each part of both, so you know what to look for and where.

## The projects screen

This is where Onlook opens. It lists your work and your settings.

The **sidebar** on the left has:

* **Recent Projects**: the projects you opened last.
* **New Draft**: starts a project from scratch.
* **Workspaces**: one per codebase you've connected. Each workspace holds the projects made from that codebase. To connect another codebase, choose **New workspace**.
* **Archive**: projects you've put away.
* **Artifacts**: every [artifact](/canvas/artifacts) you've made, across all projects. This appears once you've made your first one.
* **Settings**: your default AI, model and reasoning effort. See [Connect your AI](/setup/ai#changing-your-ai-later).
* **Version**: your Onlook version, at the bottom. Click the **Beta** badge to check for updates.

The main area shows your projects as cards. To open one, click it.

<Note>
  A **workspace** is a codebase you've connected. A **project** is one copy of that codebase that Onlook works on, with its own branch. One workspace can hold many projects.
</Note>

## The editor

When you open a project, the editor fills the window. From top to bottom and left to right, it has:

* the **top bar**, across the top
* the **left rail** and **sidebar**, on the left
* the **canvas**, in the middle
* the **chat panel**, on the right

## The top bar

The top bar runs across the top of the window.

* **Tabs**: one for each open project. Click a tab to switch, or press **⌘1** to **⌘9**.
* **New Project** (**+**): opens another project. Its menu also has **Reopen last project**, **New Blank Draft**, and **New Project from the same Workspace**.
* **The git status pill**: names the next step for your change, such as **Create PR**. Press it to do that step. See [The git status pill](/handoff/the-git-status-pill).
* **Restart to update**: appears when a new version of Onlook is ready. Click it to finish updating.
* **Hide the sidebar** and **Hide the chat panel**: give the canvas more room. To hide both at once, press **⌘.**

## The left rail and sidebar

The **left rail** is the narrow column of icons at the far left. It switches what the sidebar beside it shows.

* **Onlook** (the logo, at the top): the Onlook menu.
* **Files**: what's on the canvas.
  * **Designs** lists every frame, artifact, text and image on the current canvas page. Click one to select it on the canvas.
  * **Pages** lists your canvas pages. A canvas page is a separate canvas inside the same project. To add one, choose **New page**.
* **Artifacts**: your artifact library, with a **+** to make a new artifact. See [Artifacts](/canvas/artifacts).
* **Code**: your project's source code. This appears when you turn on the **Code panel** in Settings.
* **Help** (at the bottom): **Send feedback** and **Keyboard shortcuts**.

## The canvas

The canvas is the large area in the middle, where your work lives. You can pan around it and zoom in and out, like a design file.

On the canvas you'll find:

* **Frames**: your running app, live. Each frame is a real page you can click through, at any screen size. Its address bar shows which page it's on.
  * To change a frame, open its **Frame options** menu. It has **Reload**, **Duplicate**, **Rename**, **Open in browser**, and **Remove**.
* **Artifacts**: pages you sketch without changing your code, outlined in blue. See [Artifacts](/canvas/artifacts).
* **Text and images**: notes, labels and reference images you add to the canvas.

### The mode switch

At the top centre of the canvas, a switch toggles between two modes:

* **Design** (**D**): select elements, move things and ask for changes. Onlook starts here.
* **Preview** (**P**): click through your app like a visitor would.

### Selecting an element

In Design mode, click any element in a frame or an artifact to select it. A box appears beside it. To change just that element, type your request there and press Return.

### The toolbar

The toolbar sits at the bottom centre of the canvas.

| Tool | Shortcut | What it does |
| - | - | - |
| **Select** | V | Select and move things |
| **Pan** | H | Move around the canvas |
| **New Browser** | B | Add a frame showing your app |
| **Text** | T | Add text to the canvas |
| **Image** | ⌘⇧K | Add an image to the canvas |
| **Artifact** | A | Draw an artifact |
| **Start** / **Stop** | | Run or stop your app |

While Onlook sets up or restarts your app, **Start** reads **Installing...** then **Starting...**. When your app is running, it reads **Stop**.

### Tips

The **Tips** button sits in the lower-left corner of the editor. It shows example requests and every keyboard shortcut. Press **⌘/** to open it from anywhere. See [Tips](/start/tips).

## The chat panel

The chat panel on the right is where you work with the agent.

* **Messages**: your requests and the agent's replies. Each thing the agent does appears as a row, such as **Reading**, **Editing** or **Running**. When it's finished, it says **Done — look at** and names the frame that changed.
* **Approval cards**: when the agent needs your OK, a card shows what it wants to do, with **Approve** and **Deny**.
* **The chat box** (**Ask for a change…**): type a request and press Return. Below it:
  * **Attach files**: add images, such as a screenshot or a reference.
  * The model menu: choose the model and how hard it thinks.
  * **Permissions**: how often the agent asks before it acts. See [Permission modes](/setup/ai#permission-modes).
* **New chat**: at the top of the panel, starts a fresh conversation.

## Settings

To open Settings, go to the projects screen and choose **Settings** in the sidebar.

* **General**: your **Default AI**, **Default model** and **Default reasoning effort** for new sessions.
* **Experimental**: early features you can turn on, such as the **Code panel** for browsing and editing your project's source code.


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