Code editor

View and edit your site's source code directly in the builder — file tree, syntax highlighting, and instant preview updates.

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

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

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

• 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.