# Code editor

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

Source: https://knowledge.estage.com/workspace/code-editor/
Part of the ESTAGE knowledge base (https://knowledge.estage.com). Full corpus: https://knowledge.estage.com/llms-full.txt

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

:::caution
The AI knows your whole codebase and keeps it consistent. If you hand-edit heavily and then
ask the AI for changes in the same area, it works with your edited code — usually fine, but
keep your edits clean. If something breaks, [Undo and Version History](/workspace/version-history/)
cover manual edits too.
:::