> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor

> Edit your project's configuration visually inside CTOR

The **Editor** tab embeds the same visual [Config Editor](/controller/config-editor) that [BRICKS Controller](/controller) provides, but wired to your local project. You edit Subspaces, Canvases, Bricks, Generators, Data, Animations, and Data Calculations visually, and saving compiles your edits into your project's bricks-ctor TypeScript source and commits them to Git. The Editor is available in project sessions — not the main chat — and follows CTOR's language and theme. It works for both application and module projects.

The Editor drives the same entity model as the web Config Editor. For what Subspaces, Canvases, Bricks, Generators, Data, Animations, and Data Calculations are, see the [Config Editor reference](/controller/config-editor).

## Open the editor

Add the **Editor** tab from either [panel](/ctor/reference/panels)'s **+** (New tab) menu.

## Requirements

<Info>
  The Editor needs the globally installed [BRICKS CLI](/cli), version **2.25.0 or newer**.

  * **Older CLI** — the Editor shows "The config editor requires BRICKS CLI 2.25.0 or newer. Update to continue." with your current version and an **Update BRICKS CLI** button.
  * **Retired package** — a project on a retired bricks-ctor package shows a migrate notice with a **Migrate** button.
  * **No CLI** — the Editor shows "BRICKS CLI not found. Install it with:" and an install command.
</Info>

## Toolbar

The Editor toolbar has these controls:

| Control                   | Action                                                                                                                                            |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Undo** / **Redo**       | Step backward and forward through your edits                                                                                                      |
| **History**               | Open the edit-history panel                                                                                                                       |
| **Single** / **Subspace** | Switch between viewing a single Canvas and the whole Subspace. This segment appears when the current Subspace has more than one Canvas            |
| **Grid** / **Preview**    | Switch the brick-layout render mode. This is a layout render mode inside the editor, separate from the [Simulator](/ctor/reference/simulator) tab |
| Save-state dot            | Shows whether your edits are saved — see [Save states](#save-states)                                                                              |
| **Reload**                | Reload the compiled config from disk                                                                                                              |
| **Save**                  | Save your edits and commit them                                                                                                                   |

## Save and commit

Clicking **Save** opens a commit-message popover, prefilled with the placeholder `chore: update config from CTOR editor`. Confirm with **Save and Commit** to write your edits.

Saving:

* Generates the source files for your edits — `application.json`, `app.ts`, `root.ts`, and files under `subspaces/` and `automation-tests/`.
* Compiles and typechecks the generated source.
* Creates a Git commit — the subject is your message (or the default placeholder) and the body is a summary of the changes. Only the files the Editor generated or removed are staged, never your unrelated changes.

If the compile or typecheck fails, the save is rejected and the failure is shown. Nothing is committed.

## Save states

The save-state dot reports the state of your edits. Hover it for the full text.

| State            | Meaning                                        |
| ---------------- | ---------------------------------------------- |
| **Saved**        | Your edits are written and committed           |
| **Unsaved**      | You have edits that are not yet saved          |
| **Saving...**    | A save is in progress                          |
| Conflict warning | The compiled config changed outside the editor |
| Error            | The last save failed                           |

If the compiled config changed outside the editor while you had unsaved edits — for example, the agent edited the source — saving shows "Compiled config changed outside the editor. Reload or resolve the external change before saving." The editor tries to merge the external change and retry the save automatically; if it cannot, use **Reload** or resolve the change first.

**Reload** discards your unsaved edits — confirming "Discard unsaved config editor changes?" — and clears the undo history.

## Keyboard shortcuts

| Shortcut                      | Action                   |
| ----------------------------- | ------------------------ |
| **Cmd/Ctrl+Z**                | Undo                     |
| **Cmd+Shift+Z** or **Ctrl+Y** | Redo                     |
| **Backspace** / **Delete**    | Remove the selected item |
| **Cmd/Ctrl+C**                | Copy the selection       |
| **Cmd/Ctrl+V**                | Paste                    |
| **Cmd/Ctrl+D**                | Duplicate the selection  |

Copy, paste, and duplicate are skipped while you are typing in a text field. Right-click any item for its context menu.

Copied Bricks and Canvases move between the Editor and the web [Config Editor](/controller/config-editor) in both directions, so you can copy in one and paste in the other.

## Command palette

With the **Editor** tab active, press **Cmd/Ctrl+K** to open the editor command palette, titled **Editor commands**. It lists:

* **New: Subspace / Canvas / Data / General Data Calculation / Script Data Calculation / Animation** — create a new item of that type.
* **New Brick: \<name>** and **New Generator: \<name>** — create a new Brick or Generator of the named type.
* Go-to navigation for the items already in your config.

Module projects cannot create Subspaces.

## Live simulator and the agent

Your unsaved edits render live in the [Simulator](/ctor/reference/simulator), and the agent's screenshots use them too, so what you see matches what the agent sees.

When the agent changes the config while the Editor is open, the change is applied in place — the affected Bricks, Canvas frames, and list rows pulse briefly so you can see what changed.

The agent can also see your editor state: whether the Editor is open, whether you have unsaved edits, your current Subspace, your selection, and your recent edit history. This lets it work in step with your visual edits.

## Unsaved-edit guards

Switching session or project, closing the **Editor** tab, or closing the window while you have unsaved edits asks "Discard unsaved config editor changes?" first, so you do not lose work by accident.

## Per-item help

Many items carry a help (**?**) icon. Click it to open a docked reference drawer, shown in the editor's language.

## Next steps

<CardGroup cols={2}>
  <Card title="Simulator" icon="play" href="/ctor/reference/simulator">
    Run your project in the embedded simulator and see unsaved editor edits live.
  </Card>

  <Card title="Config Editor" icon="pen-to-square" href="/controller/config-editor">
    Learn the entity model behind Subspaces, Canvases, Bricks, and Generators.
  </Card>
</CardGroup>