The editor
The workspace is modelled on VS Code: an activity bar, a side bar, editor tabs, a preview, a bottom panel and a status bar. It is built on Monaco — the same editor that powers VS Code.
Layout
| Area | What it does |
|---|---|
| Activity bar | Switch between Explorer, Search and Skills, and jump to Diagram or Docs. |
| Explorer | Create, rename (double-click or F2), and delete files and folders. Right-click for more. |
| Editor | Tabs, minimap, sticky scroll, multi-cursor, find and replace, and syntax highlighting. |
| Preview | The running project in a sandbox. Switch between desktop, tablet and mobile sizes. |
| Panel | Debug console, Problems, and AI activity. |
| Status bar | Problems, save state, cursor position, language, autosave, model and effort. |
Every divider can be dragged to resize. Your layout is remembered per browser.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
Ctrl P | Go to file |
Ctrl Shift P | Command palette |
Ctrl S / Ctrl Shift S | Save / save all |
Ctrl B | Toggle side bar |
Ctrl J | Toggle bottom panel |
Ctrl L | Focus the AI |
On macOS use Cmd instead of Ctrl.
Saving
Autosave is on by default and saves shortly after you stop typing. Turn it off from the status bar or Settings; unsaved files show a dot in their tab. The preview reloads after each save.
Live code sessions
While Claude writes a file, the editor opens it and streams the content in as it is generated. The tab shows a moving underline and the editor is read-only until that file is finished. Turn off Follow the AI in settings if you prefer to stay on your current file.