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

# get_tree: Read Component Tree

> Fetch the full recursive JSON component tree from the canvas, with optional depth limiting and per-artboard scoping for large documents.

The `get_tree` tool returns the entire GrapesJS component hierarchy as a recursive JSON tree starting from the canvas root. Each node in the tree carries the component's ID, HTML tag, applied classes, HTML attributes, text content, and an array of child nodes. Your agent can traverse this tree to understand the current layout, identify components by their attributes or classes, and determine which IDs to pass to write tools like `update_styles` or `delete_nodes`.

For large canvases with many components, use `depth` to limit how many levels the response includes, or use `artboardId` to scope the tree to a single artboard frame.

## Parameters

<ParamField path="depth" type="number">
  Maximum nesting depth to include in the response. A value of `1` returns only the root and its direct children. Omit this parameter to receive the full tree with no depth limit.
</ParamField>

<ParamField path="artboardId" type="string">
  If provided, the tree is scoped to the artboard with this ID rather than the entire canvas root. Obtain artboard IDs from `list_artboards`.
</ParamField>

## Response

<ResponseField name="root" type="object | null" required>
  The root `ComponentNode` of the canvas or scoped artboard. Returns `null` if the canvas has no components.

  <Expandable title="ComponentNode properties">
    <ResponseField name="id" type="string" required>
      Unique component identifier. Use this value when calling `update_styles`, `delete_nodes`, `get_html`, `get_css`, or `get_jsx` with a specific component.
    </ResponseField>

    <ResponseField name="type" type="string" required>
      GrapesJS component type string (e.g. `"default"`, `"text"`, `"image"`).
    </ResponseField>

    <ResponseField name="tagName" type="string">
      The rendered HTML tag name, such as `"div"`, `"button"`, or `"img"`. May be absent for virtual component types.
    </ResponseField>

    <ResponseField name="classes" type="string[]" required>
      Array of CSS class names applied to this component.
    </ResponseField>

    <ResponseField name="attributes" type="object" required>
      Key–value map of HTML attributes (e.g. `{ "data-testid": "hero", "href": "/about" }`).
    </ResponseField>

    <ResponseField name="textContent" type="string">
      The visible text content of the node, if any.
    </ResponseField>

    <ResponseField name="children" type="ComponentNode[]" required>
      Recursively nested child nodes following the same structure.
    </ResponseField>
  </Expandable>
</ResponseField>

## Example

<CodeGroup>
  ```json request — full tree theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "get_tree",
      "arguments": {}
    }
  }
  ```

  ```json request — depth-limited theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "get_tree",
      "arguments": {
        "depth": 2
      }
    }
  }
  ```

  ```json request — artboard-scoped theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "get_tree",
      "arguments": {
        "artboardId": "artboard-001",
        "depth": 3
      }
    }
  }
  ```
</CodeGroup>

```json response theme={null}
{
  "content": [
    {
      "type": "text",
      "text": "{\"root\": {\"id\": \"comp-root\", \"type\": \"wrapper\", \"tagName\": \"body\", \"classes\": [], \"attributes\": {}, \"children\": [{\"id\": \"comp-hero\", \"type\": \"default\", \"tagName\": \"section\", \"classes\": [\"flex\", \"flex-col\", \"items-center\", \"py-16\"], \"attributes\": {\"data-testid\": \"hero\"}, \"textContent\": \"\", \"children\": [{\"id\": \"comp-heading\", \"type\": \"text\", \"tagName\": \"h1\", \"classes\": [\"text-4xl\", \"font-bold\"], \"attributes\": {}, \"textContent\": \"Welcome to DesignJS\", \"children\": []}]}]}}"
    }
  ]
}
```

<Note>
  Component IDs like `"comp-hero"` are stable within a canvas session but are regenerated when a canvas is re-imported from HTML. Always re-fetch the tree if your agent performs a bulk import before targeting specific components.
</Note>