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

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

Response

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

Example

request — full stylesheet

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

response

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

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.

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.