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

# add_components: Insert HTML onto Canvas

> Insert raw HTML — including Tailwind classes — directly onto the DesignJS canvas and receive the new component IDs for immediate follow-up operations.

The `add_components` tool is your agent's primary way to place new content onto the canvas. You provide a raw HTML string and DesignJS parses it, creates the corresponding GrapesJS components, renders them in the canvas iframe, and returns the IDs of the newly created top-level components. Tailwind utility classes in your HTML are resolved correctly by the Tailwind v4 CDN loaded in the iframe — no build step required.

By default, new components are appended to the canvas root. Provide a `target` component ID to insert them as children of a specific existing component — useful for adding items to a list, inserting a row into a grid, or nesting elements inside a container.

## Parameters

<ParamField path="html" type="string" required>
  The raw HTML string to insert onto the canvas. Tailwind class names are supported and resolved correctly. You can insert a single element or a full section with nested children.
</ParamField>

<ParamField path="target" type="string">
  The ID of an existing component to use as the parent for the inserted HTML. If omitted, the HTML is appended to the canvas root. Obtain component IDs from `get_tree` or `get_selection`.
</ParamField>

## Response

<ResponseField name="componentIds" type="string[]" required>
  The IDs of the newly created top-level components. If your HTML string contains multiple sibling root elements, each gets its own ID in this array. Use these IDs immediately to call `update_styles`, `get_html`, or `delete_nodes` on the new components.
</ResponseField>

## Example

<CodeGroup>
  ```json request — append to canvas root theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "add_components",
      "arguments": {
        "html": "<section class=\"flex flex-col items-center py-20 bg-indigo-50\"><h2 class=\"text-3xl font-bold text-indigo-900\">Features</h2><p class=\"mt-4 text-indigo-700 max-w-lg text-center\">Everything your agent needs to design with confidence.</p></section>"
      }
    }
  }
  ```

  ```json request — insert into existing container theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "add_components",
      "arguments": {
        "html": "<li class=\"flex items-center gap-2 text-gray-700\"><span class=\"text-green-500\">✓</span> Real-time visual feedback</li>",
        "target": "comp-feature-list"
      }
    }
  }
  ```
</CodeGroup>

```json response theme={null}
{
  "content": [
    {
      "type": "text",
      "text": "{\"componentIds\": [\"comp-new-001\"]}"
    }
  ]
}
```

<Note>
  The returned IDs are for the top-level elements in your HTML string. If you insert `<section>...</section>` containing nested `<div>` and `<p>` elements, only the `<section>`'s ID is returned. Use `get_tree` to explore the full subtree of the new component.
</Note>

<Warning>
  Inserting invalid HTML may result in unexpected GrapesJS component structures. Always provide well-formed HTML with properly closed tags.
</Warning>

<Tip>
  After inserting components, call `get_screenshot` to visually confirm the layout before making additional changes. This is especially useful when inserting complex HTML with many nested elements.
</Tip>