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

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

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

Response

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

Example

request — tailwind mode (default)

{
  "method": "tools/call",
  "params": {
    "name": "get_jsx",
    "arguments": {
      "componentId": "comp-hero",
      "mode": "tailwind"
    }
  }
}

response — tailwind mode

// 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>

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.

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.