Edit a website's code directly

The Code editor is an alternative to the workbench for people comfortable with HTML and CSS. It shows a site as files, with a code editor and an agent that can read and change any file. It is off until the workspace owner switches it on. Read step 2 carefully: a site that moves into the Code editor cannot move back.

Steps

1. 1

   Switch it on

   On: /settings/code-ide

   Open Settings and choose Code IDE. Turn the switch on. Only the workspace owner can.

   You should see: "Saved."

2. 2

   Decide before you move a site

   On: Project, Web Design

   Open a site in Web Design and press Code editor at the top. A message asks you to confirm, because this is permanent: the site's pages move into files, and the workbench can no longer edit them. Practise on a copy or a test site first. To start a new code project instead, choose New app when creating a site.

   You should see: A file tree on the left, a code editor in the middle and the site chat on the right.

3. 3

   Edit a file

   On: Code IDE

   Open a page or a stylesheet from the file tree and edit it. Standard editor shortcuts work, such as find and replace. Press ▶ Preview to see the site in a new tab.

   You should see: Your edit is saved as a draft. The live site does not change.

4. 4

   Ask the agent

   On: Code IDE

   Describe a change in Site chat, for example "make every button use rounded corners". You can paste a screenshot to show what you mean. The agent reads and searches files by itself, but asks before it writes, changes or deletes one, and shows the difference first.

   You should see: A proposed change waiting for your approval.

5. 5

   Approve, and undo if needed

   On: Code IDE

   Approve the changes you want; Approve all accepts every change in that answer. Before each approved change the editor saves a checkpoint. Press ↻ History to open Checkpoints and Restore an earlier state.

   You should see: The files show the change, or are back as they were.

6. 6

   Publish

   On: Code IDE

   Press Publish at the top of the Code editor. It opens the same publish window as any other site.

   You should see: The live site shows the change.

Tips

• Most page-by-page edits are faster in the workbench. Move a site to the Code editor only when you need to work on its files.
• ⤓ Download saves the whole site as a .zip you can open or host anywhere.
• ❖ Sections, ▤ Form and ✦ Themes insert ready-made sections, build a form and change colours and fonts without writing code.
• Switching the Code IDE off in Settings does not delete anything built in it.

Troubleshooting

There is no Code editor button on the site.

The Code IDE is switched off for the workspace, or your role cannot edit the design. Ask the workspace owner.

You cannot switch a site back to the workbench.

This is by design. Once a site's pages are files, only the Code editor can change them. Use Checkpoints to undo changes.

"You don't have permission to publish"

Your project role can edit but not publish. Ask a project owner to publish.