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

componentId · string · required

The ID of the component to style. Obtain this from get_tree, get_selection, or the componentIds returned by add_components.

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

Response

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

Example

request — update background and padding

{
  "method": "tools/call",
  "params": {
    "name": "update_styles",
    "arguments": {
      "componentId": "comp-hero",
      "styles": {
        "background-color": "#EEF2FF",
        "padding-top": "5rem",
        "padding-bottom": "5rem"
      }
    }
  }
}

response

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

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.

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.