> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Edit Designs
export const EyeIcon = props => {
return
;
};
The design editor is a full visual editor built into the Canvas. It works like a standard design tool: select any element in a design, adjust its styles through visual controls, edit text and raw CSS/HTML directly, rearrange layers, and draw new shapes and freehand sketches, all without sending a prompt to the agent.
## Open the editor
1. Click the **Edit** tool in the bottom toolbar of the Canvas.
2. Click on the design you want to edit.
You can also right-click a design and select **Edit** > **Edit Design** to start editing it.
Click **Save** on top of the editor to save your changes, or **Discard** to revert. You can also visit the specific states of your design changes using the **Undo** and **Redo** icons before **Back to chat**.
## The editor panel
The panel has three parts: the **Layers** tree at the top, the **insert tools**, and the **property tabs** that populate when you select an element.
### Layers
The Layers tree shows every element in the design in nesting order. Each row is labeled with a friendly name and its underlying HTML tag (for example `nav`, `ul`, `li`, `section`, `video`, `div`, `span`).
* Click a layer to select it and load its properties into the property tabs.
* **Cmd/Ctrl-click** to add or remove layers from a multi-selection, or **Shift-click** to select a range. With two or more layers selected, the Layers title bar becomes a batch toolbar with **Wrap in container**, **Hide/Show**, and **Delete**.
* **Drag a layer** in the tree to reorder it or move it into another container.
* Double-click a text element on the Canvas to edit its content inline.
* Hover a layer to reveal the visibility toggle and the **⋯** menu (**Wrap**, **Unwrap**, **Copy**, and **Delete**).
Keyboard shortcuts when a layer is selected:
* **Arrow keys:** move the selection up and down, and expand or collapse a layer.
* **Delete / Backspace:** delete the selected layer or layers.
* **Cmd/Ctrl + C / V:** copy and paste an element. You can paste it into another design in the same session.
* **Cmd/Ctrl + Z** and **Shift + Cmd/Ctrl + Z:** undo and redo.
### Insert tools
The insert tools let you add new content to the Canvas. Select a tool, then click or drag on the Canvas to place it.
| Tool | Icon | What it adds |
| --------- | -------------------- | ----------------------------------------------------------- |
| Select | | Return to selecting and moving existing elements (default). |
| Text | | A text node. |
| Rectangle | | A rectangle shape. |
| Circle | | A circle or ellipse shape. |
| Arrow | | An arrow. |
| Line | | A straight line. |
| Free draw | | A freehand sketch, captured as an SVG path. |
See [Add shapes and drawings](#add-shapes-and-drawings) for how these behave on an empty Canvas versus inside an existing design.
### Property tabs
When an element is selected, the panel shows tabs for editing it:
* **Styles:** visual controls for the element's CSS. See [Styles](#styles).
* **Element:** element-specific properties. The tab and its contents adapt to the selected element's type (for example, a **Video** tab for `