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

# DesignJS Editor Interface Overview

> A tour of the three-pane DesignJS editor: the left panel, GrapesJS canvas, right panel, topbar, zoom controls, and theme switcher.

DesignJS opens as a full-browser single-page application at `http://localhost:3000`. The layout is divided into three resizable panes — left, center, and right — separated by draggable gutters. Every panel can be resized by dragging its border, and the left and right panels can be fully collapsed when you need more canvas space.

## The topbar

The topbar runs across the top of the application and gives you quick access to global controls.

* **DesignJS title and version** — displayed on the left as a fixed reference.
* **Save button** — clicking it (or pressing `Cmd+S` / `Ctrl+S`) triggers a manual save to `.designjs.json` in your project root. The status indicator next to the button shows one of four states: `Idle`, `Saving…`, `Saved`, or `Save error` (in red with the error message in a tooltip).
* **Bridge status indicator** — top-right, next to the theme toggle. A small filled circle shows whether the WebSocket bridge on `127.0.0.1:29170` is connected. Green means an MCP server session is live and agent tools will work. Dim/grey means the bridge is not connected — the editor still works normally for manual edits, but agent calls will fail until you start the MCP server.
* **Theme toggle** — the sun/moon button switches between light and dark themes. Your preference is persisted across sessions.

<Info>
  The bridge status dot reflects the WebSocket connection between the MCP server process and the browser — not the connection between your AI agent and the MCP server. If the dot is green, the full pipeline is active.
</Info>

## Left panel — Layers, Artboards, Blocks

The left panel contains three tabs.

<CardGroup cols={3}>
  <Card title="Layers" icon="layers">
    A recursive tree of every component on the active artboard. Each row shows a tag-based icon and the component name. Clicking a row selects that component in the canvas.
  </Card>

  <Card title="Artboards" icon="frame">
    A list of all named frames on the spatial canvas. Each row shows a device icon (desktop, tablet, or mobile based on width), the artboard name, and its pixel dimensions. Double-click a name to rename it inline.
  </Card>

  <Card title="Blocks" icon="grid-2x2">
    A palette of 25 pre-built HTML/CSS blocks organized by category. Click any block to insert it into the active artboard's canvas.
  </Card>
</CardGroup>

The panel defaults to **18%** of the total width and can be dragged between **10%** and **40%**. Collapse it entirely to maximize canvas area.

## Center panel — GrapesJS canvas

The canvas is the main editing area. It renders your HTML and CSS inside a real browser `<iframe>`, which means:

* What you see is exactly what the browser produces — no approximations or simulated rendering.
* Tailwind CSS v4 is loaded from CDN inside the iframe, so Tailwind utility classes applied to any component take effect immediately.
* Both human edits (clicking, selecting, dragging) and agent edits via MCP tools converge on the same GrapesJS component model.

### Insert rail

A small floating toolbar appears in the top-left corner of the canvas. It provides single-click insertion for the most common element types:

| Tool   | Shortcut | What it inserts                            |
| ------ | -------- | ------------------------------------------ |
| Select | V        | (reserved — selection is the default mode) |
| Frame  | F        | New 1440×900 Desktop artboard              |
| Text   | T        | A `<p>` paragraph element                  |
| Image  | I        | An `<img>` element                         |
| Button | B        | A styled `<button>` with Tailwind classes  |

### Minimap

A minimap overlay in the bottom corner of the canvas gives you a bird's-eye view of the spatial canvas when you have multiple artboards. It helps you navigate when zoomed in.

### Zoom controls

A pill-shaped zoom control sits in the bottom-right corner of the canvas. It shows the current zoom percentage and provides:

* **`−` / `+` buttons** — step zoom in or out by 10% at a time.
* **Percentage readout** — click to open a dropdown with presets: Zoom to fit, 50%, 100%, and 200%.
* **`Cmd+0`** — resets zoom to 100% via the dropdown shortcut.

Zoom range is **10%–400%**.

## Right panel — Styles and Traits

The right panel also has two tabs.

<CardGroup cols={2}>
  <Card title="Styles" icon="palette">
    Shows CSS property editors for the currently selected component, grouped into collapsible sectors (e.g. Layout, Typography, Spacing). Sector open/closed state is persisted in `localStorage`. Select a component in the canvas or layers tree to populate this panel.
  </Card>

  <Card title="Traits" icon="sliders">
    Shows HTML attribute editors for the selected component — things like `href` on a link, `src` and `alt` on an image, or `placeholder` on an input. Traits are component-type–specific.
  </Card>
</CardGroup>

The right panel defaults to **20%** of the total width with a range of **12%–40%**, and is also collapsible.

## Light and dark themes

DesignJS ships with full light and dark theme support. Toggle between them using the sun/moon button in the topbar. The selected theme is stored in the browser and restored on the next visit — no server round-trip required.

<Tip>
  If you are capturing screenshots with the `get_screenshot` MCP tool, the canvas iframe renders in its own document context and is unaffected by the shell theme — the artboard content appearance depends entirely on the CSS classes and styles you apply to your components.
</Tip>