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

# update_styles: Set CSS on a Component

> Apply or update CSS properties on a specific canvas component by ID — including both standard CSS properties and Tailwind utility strings via the class key.

The `update_styles` tool lets your agent modify the CSS properties of any component on the canvas by targeting it with its ID. You provide a map of CSS property names to values, and DesignJS applies them to the component in the GrapesJS style model. Changes appear immediately in the canvas and are persisted to `.designjs.json` on the next save.

The tool accepts standard CSS property names (e.g. `"background-color"`, `"font-size"`, `"border-radius"`) as keys. Styles are merged into the component's existing style map — any property you omit is preserved unchanged. Use CSS custom property references like `var(--brand-primary)` as values to tie component styles to your design tokens.

## Parameters

<ParamField path="componentId" type="string" required>
  The ID of the component to style. Obtain this from `get_tree`, `get_selection`, or the `componentIds` returned by `add_components`.
</ParamField>

<ParamField path="styles" type="object" required>
  A `Record<string, string>` mapping CSS property names to their new values. For example: `{ "background-color": "#4F46E5", "border-radius": "8px", "padding": "16px" }`. Existing properties not included in this map are preserved unchanged.
</ParamField>

## Response

<ResponseField name="styles" type="object" required>
  The full updated styles map for the component after the changes have been applied. This reflects the complete set of CSS properties on the component, not just the ones you passed in.
</ResponseField>

## Example

<CodeGroup>
  ```json request — update background and padding theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "update_styles",
      "arguments": {
        "componentId": "comp-hero",
        "styles": {
          "background-color": "#EEF2FF",
          "padding-top": "5rem",
          "padding-bottom": "5rem"
        }
      }
    }
  }
  ```

  ```json request — change typography theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "update_styles",
      "arguments": {
        "componentId": "comp-heading",
        "styles": {
          "font-size": "3rem",
          "font-weight": "700",
          "color": "var(--brand-primary)",
          "letter-spacing": "-0.025em"
        }
      }
    }
  }
  ```
</CodeGroup>

```json response theme={null}
{
  "content": [
    {
      "type": "text",
      "text": "{\"styles\": {\"background-color\": \"#EEF2FF\", \"padding-top\": \"5rem\", \"padding-bottom\": \"5rem\", \"display\": \"flex\", \"flex-direction\": \"column\", \"align-items\": \"center\"}}"
    }
  ]
}
```

<Note>
  CSS custom properties defined on the canvas `:root` (e.g. `var(--brand-primary)`) are valid values. The variable reference is stored as-written and resolved by the browser at render time. Use `get_variables` to see available custom properties.
</Note>

<Tip>
  To update styles on the component your user currently has selected in the editor, first call `get_selection` to retrieve the ID, then pass it to `update_styles`. This creates a seamless "select and describe" workflow without manual ID lookup.
</Tip>