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

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

<Steps>
  <Step title="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.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

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

<CodeGroup>
  ```json create_artboard input theme={null}
  {
    "name": "Mobile — Home",
    "width": 375,
    "height": 812
  }
  ```
</CodeGroup>

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.

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

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

<CardGroup cols={2}>
  <Card title="get_tree" icon="git-branch">
    Pass `artboardId` to retrieve the component tree of a specific artboard. Omit it to get the active artboard.
  </Card>

  <Card title="get_screenshot" icon="camera">
    Pass `artboardId` to screenshot a specific artboard at its full dimensions, even if it is not visible in the viewport.
  </Card>

  <Card title="get_html" icon="code">
    Scope the returned HTML to a specific artboard or a component within it by providing `artboardId` and optionally `componentId`.
  </Card>

  <Card title="get_css" icon="brackets-curly">
    Retrieve the CSS stylesheet for a specific artboard. Each artboard maintains its own style sheet.
  </Card>
</CardGroup>

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

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