Skip to main content
On a phone, a project opens as four full-screen views: Chat, Preview, Code and Backend. You switch between them from the bar at the top. The canvas board itself needs a desktop.
A phone screen with the project pill tapped and the sheet open, showing Chat, Preview, Code and Backend

​
Move between views

The top bar has your account menu on the left, the project pill in the middle, and share and Publish on the right.
  1. Tap the project pill. It shows the project name and the icon of the view you are on.
  2. Under Surface, tap the view you want:
The same sheet has a pencil to rename the project, Project settings and All projects. While the project has only one branch, it also has New branch.

​
Know when a result is ready

You can’t see the preview while you are in Chat, so the project pill tells you:
  • A spinner in the pill means the agent is still building.
  • When it finishes, the pill turns highlighted with a dot, and Preview in the sheet is tagged updated.
Code in the sheet shows how many files have unsaved edits, for example 2 unsaved.

​
Preview

Preview opens over the page, so it has its own way back: tap Chat at the top left.
  • Tap the file name to pick another page, component or prototype.
  • Refresh reloads the screen.
  • Open in new tab opens your working copy in its own browser tab.
The preview always shows the app at phone width.

​
Code and Backend

Code shows the file list first. Tap a file to open it in the editor, and use the back button to return to the list. Saving works as it does on a desktop. See Edit code. Backend shows your project’s database, sign-in, functions and storage. See Manage your data.

​
What stays on desktop

These need a mouse and a wide screen, so a phone leaves them out:
  • The canvas board, with its nodes and auto-organize
  • Select for picking elements to change (Select and edit with AI)
  • Edit for the visual editor (Edit visually)
  • Zoom, breakpoints and Take screenshot in the preview toolbar
  • Export to Figma
On a touch tablet narrower than a laptop screen, the project page uses the desktop layout but the Canvas option is greyed out with Canvas is available on web only. Focus, Code and Backend work as usual.