Skip to main content
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.
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.

​
Left panel — Layers, Artboards, Blocks

The left panel contains three tabs.

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.

Artboards

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.

Blocks

A palette of 25 pre-built HTML/CSS blocks organized by category. Click any block to insert it into the active artboard’s canvas.
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:

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

Styles

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.

Traits

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