Code mode
A code editor inside Studio to look at or tweak the files of your editable site.
You don't need Code mode to build your site. It's there if you want to see how it's made or adjust something by hand.
Opening it
Press Code in the Studio header. You can also use View code, the icon at the bottom of the Design sidebar.
Code and Design edit the same file. Anything you write here stays editable visually.
The parts of the editor
- Explorer: your site's files and folders. At the top you have Search files and Collapse folders.
- Tabs: the files you have open. An orange dot marks the ones with unsaved changes.
- Status bar, at the bottom: how many files are unsaved, the line and column, and whether the page is still editable in Design.
On a phone, the explorer turns into a file picker.
Shortcuts
| Shortcut | What it does |
|---|---|
| ⌘S | Saves a new version |
| ⌘P | Opens any file by typing its name |
| ⌘F | Searches inside the file |
| ⇧⌥F | Tidies the code (Tidy code) |
Saving
Press Save revision or ⌘S. If you switch modes, Studio saves anything pending first.
Files over 200 KB can't be saved. Trim them or split them into components.
Is it still editable in Design?
The status bar tells you with one of these labels:
- Editable in Design: all good.
- Syntax error: there's an error in the code. Design shows "The code has an error" until you fix it.
- No direct JSX: the page is written in a way Design can't draw. You keep editing it here.
Broke something?
Ask Cortex to fix it with Fix with Cortex. You can also go back to an earlier version from History.
If someone else saved the same file
You'll see "Another version of this file was saved while you were editing. Nothing was overwritten". Choose Use the saved version or Keep mine.
Files Berse writes
Some files are written by Berse, like the ones for payments or forms, and Berse updates them when you publish. If you change one by hand, the Integrations panel tells you. Choose Use Berse's version or Keep mine.