> ## 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_css: Export Canvas CSS

> Export the full CSS stylesheet from the canvas, or scope it to a single component's styles, for use alongside exported HTML or JSX.

The `get_css` tool returns the CSS stylesheet that GrapesJS has generated for the canvas. This includes all component-scoped rules, any styles applied through the style manager, and any rules added by your agent via `update_styles`. It does not include the Tailwind CDN stylesheet loaded in the iframe — only the custom CSS layered on top.

When you export HTML with `get_html` and want a complete, self-contained design artifact, call `get_css` alongside it. The two outputs together give you everything needed to render the design outside of DesignJS.

## Parameters

<ParamField path="componentId" type="string">
  Scope the CSS output to only the rules that apply to this component and its descendants. If omitted, the full canvas stylesheet is returned. Obtain component IDs from `get_tree` or `get_selection`.
</ParamField>

## Response

<ResponseField name="css" type="string" required>
  The CSS stylesheet as a plain string. Rules are formatted as standard CSS and can be written to a `.css` file or injected into a `<style>` tag.
</ResponseField>

## Example

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

  ```json request — component-scoped theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "get_css",
      "arguments": {
        "componentId": "comp-card"
      }
    }
  }
  ```
</CodeGroup>

```json response theme={null}
{
  "content": [
    {
      "type": "text",
      "text": "{\"css\": \"#comp-card {\\n  border-radius: 8px;\\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12);\\n  padding: 24px;\\n  background-color: var(--surface-default);\\n}\\n\\n#comp-card h2 {\\n  font-size: 1.25rem;\\n  font-weight: 600;\\n  color: var(--text-primary);\\n}\"}"
    }
  ]
}
```

<Note>
  CSS custom properties (e.g. `var(--surface-default)`) referenced in the stylesheet are defined on the canvas `:root`. Retrieve them with `get_variables` if you need the resolved values.
</Note>

<Tip>
  If you're exporting to a React or Next.js project, consider using `get_jsx` with `mode="tailwind"` instead. It combines layout and style into Tailwind class names, removing the need for a separate stylesheet.
</Tip>