> ## 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_jsx: Convert Canvas to JSX

> Convert DesignJS HTML to a JSX component string using Tailwind class names or inline style objects, scoped to the full canvas or a specific component.

The `get_jsx` tool converts the canvas HTML into a JSX string that you can drop directly into a React project. It offers two output modes to match your project's styling approach: `"tailwind"` mode (the default) preserves Tailwind class names in `className` props and drops redundant `style` props for properties that Tailwind already covers, while `"inline"` mode converts every CSS property to a JSX `style` object — useful for environments without Tailwind configured.

When you provide a `componentId`, the output is scoped to that component's subtree. Omitting it returns JSX for the entire canvas as a single component fragment.

## Parameters

<ParamField path="componentId" type="string">
  Scope the JSX output to a specific component and its descendants. If omitted, the entire canvas is converted. Obtain component IDs from `get_tree` or `get_selection`.
</ParamField>

<ParamField path="mode" type="string" default="tailwind">
  Controls how CSS styles are represented in the JSX output.

  * `"tailwind"` — preserves `className` attributes and removes `style` props for properties expressible as Tailwind utilities (padding, margin, color, background-color, width, height, display, flex-direction). This is the default.
  * `"inline"` — converts all CSS properties to a `style={{ }}` object. Use this when your target project does not have Tailwind configured.
</ParamField>

## Response

<ResponseField name="jsx" type="string" required>
  A JSX string representing the canvas or component subtree. The output is a JSX fragment or element — not a complete component file. Wrap it in a function component before saving.
</ResponseField>

## Example

<CodeGroup>
  ```json request — tailwind mode (default) theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "get_jsx",
      "arguments": {
        "componentId": "comp-hero",
        "mode": "tailwind"
      }
    }
  }
  ```

  ```json request — inline mode theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "get_jsx",
      "arguments": {
        "componentId": "comp-hero",
        "mode": "inline"
      }
    }
  }
  ```
</CodeGroup>

<CodeGroup>
  ```jsx response — tailwind mode theme={null}
  // Parsed from response text field:
  <section className="flex flex-col items-center py-16 bg-white">
    <h1 className="text-4xl font-bold text-gray-900">
      Welcome to DesignJS
    </h1>
    <p className="mt-4 text-lg text-gray-600">
      Build designs your agents can see.
    </p>
    <a href="/start" className="mt-8 px-6 py-3 bg-indigo-600 text-white rounded-lg">
      Get started
    </a>
  </section>
  ```

  ```jsx response — inline mode theme={null}
  // Parsed from response text field:
  <section style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: '4rem', paddingBottom: '4rem', backgroundColor: '#ffffff' }}>
    <h1 style={{ fontSize: '2.25rem', fontWeight: 700, color: '#111827' }}>
      Welcome to DesignJS
    </h1>
    <p style={{ marginTop: '1rem', fontSize: '1.125rem', color: '#4B5563' }}>
      Build designs your agents can see.
    </p>
    <a href="/start" style={{ marginTop: '2rem', padding: '0.75rem 1.5rem', backgroundColor: '#4F46E5', color: '#ffffff', borderRadius: '0.5rem' }}>
      Get started
    </a>
  </section>
  ```
</CodeGroup>

<Note>
  In `"tailwind"` mode, only a specific set of CSS properties are converted to Tailwind utilities: padding, margin, color, background-color, width, height, display, and flex-direction. Other properties remain as inline styles even in tailwind mode.
</Note>

<Tip>
  After calling `get_jsx`, have your agent wrap the output in a named function component and write it to a `.tsx` file in your React project. Combined with `get_variables`, you can also export design tokens as a TypeScript constants file.
</Tip>