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

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

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

Response

root · object | null · required

The root ComponentNode of the canvas or scoped artboard. Returns null if the canvas has no components.

Show ComponentNode properties

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

type · string · required

GrapesJS component type string (e.g. "default", "text", "image").

tagName · string

The rendered HTML tag name, such as "div", "button", or "img". May be absent for virtual component types.

classes · string[] · required

Array of CSS class names applied to this component.

attributes · object · required

Key–value map of HTML attributes (e.g. { "data-testid": "hero", "href": "/about" }).

textContent · string

The visible text content of the node, if any.

children · ComponentNode[] · required

Recursively nested child nodes following the same structure.

Example

request — full tree

{
  "method": "tools/call",
  "params": {
    "name": "get_tree",
    "arguments": {}
  }
}

response

{
  "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\": []}]}]}}"
    }
  ]
}

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.