create_artboard: Add a Canvas Artboard

Create a named artboard frame on the DesignJS spatial canvas at a specified size and position, returning the new artboard’s ID and coordinates.

The create_artboard tool creates a new artboard — a named, bounded frame — on the DesignJS spatial canvas. Artboards are the primary way to organize multiple design screens or states on the same canvas. Each artboard has an explicit width and height, and you can place it at any X/Y position in canvas world coordinates. If you omit the position, the artboard is placed automatically to avoid overlapping existing frames.

When you’re creating several artboards programmatically, use find_placement first to get non-overlapping coordinates, then pass those coordinates to create_artboard. The returned ArtboardData object includes the artboard’s ID, which you can pass to get_tree, get_screenshot, or get_html to scope those tools to the new frame.

Parameters

width · number · required

The width of the artboard in pixels. Must be a positive number.

height · number · required

The height of the artboard in pixels. Must be a positive number.

name · string

A display name for the artboard shown in the editor. Defaults to "Artboard N" where N is the next available number.

x · number

The X position of the artboard in canvas world coordinates. If omitted, the canvas places the artboard automatically to the right of existing artboards with an 80px gap.

y · number

The Y position of the artboard in canvas world coordinates. Defaults to 0 if omitted (when x is also omitted, the auto-placement logic determines both X and Y).

Response

artboard · object · required

The newly created artboard’s data.

Show ArtboardData properties

id · string · required

Unique identifier for the artboard. Use this with get_tree, get_screenshot, get_html, and get_css to scope those tools to this artboard.

name · string · required

The display name of the artboard.

x · number · required

The final X position in canvas world coordinates.

y · number · required

The final Y position in canvas world coordinates.

width · number · required

The width of the artboard in pixels.

height · number · required

The height of the artboard in pixels.

Example

request — desktop artboard with auto-placement

{
  "method": "tools/call",
  "params": {
    "name": "create_artboard",
    "arguments": {
      "name": "Desktop – Home",
      "width": 1440,
      "height": 900
    }
  }
}

response

{
  "content": [
    {
      "type": "text",
      "text": "{\"artboard\": {\"id\": \"artboard-003\", \"name\": \"Desktop – Home\", \"x\": 1680, \"y\": 0, \"width\": 1440, \"height\": 900}}"
    }
  ]
}

When creating multiple artboards in sequence, call find_placement with the intended dimensions before each create_artboard call to get coordinates that don’t overlap any existing frames.

Common artboard sizes: desktop (1440×900), laptop (1280×800), tablet (768×1024), mobile (390×844 for iPhone 14, 360×800 for Android). Use consistent sizes to make responsive design comparisons easier in the editor.