Skip to content
Genesis Help

Code editor

Your Genesis site is a real codebase, and you can open it any time with the Code Editor button (brackets icon) in the toolbar. You never have to touch code — but it’s there when you want it.

The layout

Section titled “The layout”

Opening the editor splits the workspace: code on top, live preview below, with a drag handle between them to adjust the split.

  • File tree on the left — browse and open any file in your project.
  • Editor in the center — full syntax highlighting, autocomplete, error underlines, find & replace. It’s the same editor engine as VS Code, so the shortcuts you know work (Cmd/Ctrl+S to save, Cmd/Ctrl+F to find…).
  • Unsaved files show a dirty dot until you save.

Save a file and the preview updates with your change.

Jumping to an element’s code

Section titled “Jumping to an element’s code”

The fastest way in: select an element in the preview and click Open in Code Editor in the style panel header. The editor opens right at that element’s source.

When the code editor is useful

Section titled “When the code editor is useful”
  • Inspecting what the AI actually built.
  • Surgical text/value tweaks when you know exactly what to change.
  • Pasting in something specific — an exact embed snippet, precise CSS.