Working with Artboards in DesignJS

How to create, name, navigate, and manage artboards in DesignJS — including preset sizes, pan/zoom, and scoping MCP tool calls by artboard ID.

Artboards are named frames on the DesignJS spatial canvas. Each artboard is an independent browser iframe with its own HTML document, CSS stylesheet, and component tree. You can have multiple artboards open at the same time — for example, one at desktop width, one at tablet, and one at mobile — and switch between them freely. Artboards are the unit of work for MCP tools: when you call get_tree or get_screenshot, you target a specific artboard by its ID.

Artboard presets

DesignJS ships four built-in size presets:

Preset	Width	Height	Device icon
Desktop	1440px	900px	Monitor
Tablet	768px	1024px	Tablet
Mobile	375px	812px	Smartphone
Custom	(prompted)	(prompted)	(based on entered width)

The device icon shown in the Artboards panel is determined by width: ≤420px shows a phone icon, ≤820px shows a tablet icon, and anything wider shows a monitor icon.

Creating artboards

From the canvas toolbar (UI)

The ArtboardToolbar appears in the canvas header area. Each preset has its own button labeled “Desktop”, “Tablet”, “Mobile”, and “Custom”.

1. Click a preset button

   Click Desktop, Tablet, or Mobile to add an artboard with that preset’s dimensions. The new artboard appears to the right of the existing ones, separated by an 80px gap.

2. Or click Custom for a specific size

   Clicking Custom opens a browser prompt. Enter the dimensions in WxH format — for example 1280x800. Press OK and the new artboard is placed on the canvas.

3. Use the Insert Rail for frames

   Press F or click the Frame tool in the Insert Rail (top-left of the canvas) to add a new 1440×900 Desktop artboard in one keystroke.

Via MCP (create_artboard tool)

Your AI agent can create artboards programmatically using the create_artboard MCP tool. This is useful for scaffolding multiple screen sizes at the start of a project.

create_artboard input

{
  "name": "Mobile — Home",
  "width": 375,
  "height": 812
}

The tool returns the new artboard’s id, name, width, height, x, and y coordinates. The id is the value you pass to scope other tool calls.

DesignJS will never leave you with zero artboards. The UI disables the delete button on the last remaining artboard, and create_artboard always places new frames without removing existing ones.

Navigating the spatial canvas

All artboards live on a single infinite spatial canvas. You navigate it with pan and zoom.

Zoom

Use the zoom control in the bottom-right corner of the canvas:

• Click − or + to step by 10%.
• Click the percentage readout to open a dropdown with Zoom to fit, 50%, 100%, and 200% presets.
• Press Cmd+0 to reset to 100%.
• Zoom range is 10%–400%.

Pan

Pan the canvas by holding Space and dragging, or by using a two-finger scroll gesture on a trackpad. The canvas area is unrestricted — artboards can be positioned anywhere in the spatial world.

Minimap

A minimap overlay in the canvas corner gives a bird’s-eye view of all artboards and your current viewport position. It is especially useful when you have many artboards spread across the canvas.

Renaming artboards

In the Artboards tab of the left panel, double-click any artboard name to enter rename mode. Type the new name and press Enter to confirm, or Escape to cancel. The change is reflected immediately in the panel and persists in .designjs.json on the next save.

Deleting artboards

Hover an artboard row in the Artboards panel to reveal the trash icon on the right. Click it to delete. You cannot delete the last remaining artboard.

Artboard IDs and MCP tool scoping

Every artboard has a stable ID visible only to the MCP layer. Use this ID to scope tool calls to a specific artboard rather than whichever one is currently active in the editor.

get_tree

Pass artboardId to retrieve the component tree of a specific artboard. Omit it to get the active artboard.

get_screenshot

Pass artboardId to screenshot a specific artboard at its full dimensions, even if it is not visible in the viewport.

get_html

Scope the returned HTML to a specific artboard or a component within it by providing artboardId and optionally componentId.

get_css

Retrieve the CSS stylesheet for a specific artboard. Each artboard maintains its own style sheet.

A common workflow: ask the agent to call get_screenshot on each artboard ID after making changes, then paste the base64 images back into the chat so you can review all breakpoints at once.

Saving and restoring artboards

Artboard state — names, dimensions, positions, and their component trees — is stored in .designjs.json at your project root. The file is plain JSON and git-diffable. When you reopen DesignJS, all artboards are restored from this file automatically. If the file does not exist (first run), a default Desktop artboard at 1440×900 is created for you.