Skip to main content
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 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.
  • 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.
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.

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

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