Export Canvas Designs to React Components

Use the get_jsx tool to turn any canvas element into a production-ready .tsx file, with Tailwind className output or a JSX inline style object.

Once your design is in good shape on the canvas, get_jsx converts it to a React component you can drop straight into your codebase. The tool handles the HTML-to-JSX transformation — attribute renaming, self-closing tags, style extraction — and gives you a choice of how CSS lands in the output: as Tailwind className strings or as a style prop object. This guide covers both modes, shows you how to scope the export to a specific component, and walks through saving the result as a .tsx file.

Prerequisites

• A design on the canvas with at least one component ready to export
• Your agent connected and ping returning { pong: true } (see Design with an agent)

---

Choosing an export mode

get_jsx accepts an optional mode parameter with two values:

tailwind (default)

Preserves className on every element. CSS properties that map directly to Tailwind utilities — padding, margin, color, background-color, width, height, display, flex-direction — are dropped from the inline style prop and kept as class names. Use this when your React project already uses Tailwind.

inline

Converts every CSS property to a JSX style object. No Tailwind dependency required. Use this when you’re importing into a project that uses CSS Modules, styled-components, or plain CSS.

---

Export the full canvas

To export everything on the canvas as a single component, call get_jsx with no arguments:

// Tool call
{
  "tool": "get_jsx",
  "params": {}
}

The default mode is "tailwind". The response contains a self-contained JSX string:

// Response
{
  "jsx": "export default function Canvas() {\n  return (\n    <div className=\"flex flex-col gap-0\">\n      <section className=\"w-full bg-[#0f172a] py-24 px-8 flex flex-col items-center text-center gap-6\">\n        <h1 className=\"text-5xl font-bold tracking-tight text-white\">\n          Ship design and code together\n        </h1>\n        <p className=\"text-lg text-slate-400 max-w-xl\">\n          DesignJS gives AI agents visual awareness of your HTML/CSS canvas.\n        </p>\n        <a href=\"#\" className=\"inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-sm font-semibold text-white hover:bg-indigo-500 transition-colors\">\n          Get started free\n        </a>\n      </section>\n    </div>\n  );\n}"
}

---

Export a single component

When the canvas has multiple sections, scope the export to just the element you need by passing its componentId:

// Tool call — export only the hero section
{
  "tool": "get_jsx",
  "params": {
    "componentId": "comp-a1b2c3",
    "mode": "tailwind"
  }
}

To find the componentId of the element you want, click it in the canvas or layers panel, then call get_selection. The agent receives the id and can pass it directly to get_jsx.

---

Tailwind mode in detail

In tailwind mode the agent outputs className props and omits a style prop for any property that Tailwind can express natively. The properties that get this treatment are:

CSS property	Example Tailwind class
padding	p-6, px-8, py-24
margin	m-4, mt-8
color	text-white, text-slate-400
background-color	bg-indigo-600, bg-[#0f172a]
width	w-full, w-64
height	h-12, h-screen
display	flex, block, hidden
flex-direction	flex-col, flex-row

Properties that don’t have a direct Tailwind mapping (such as border-radius on an arbitrary pixel value, or letter-spacing) are preserved in the style prop alongside className.

Example output — tailwind mode:

export default function HeroSection() {
  return (
    <section className="w-full bg-[#0f172a] py-24 px-8 flex flex-col items-center text-center gap-6">
      <h1 className="text-5xl font-bold tracking-tight text-white">
        Ship design and code together
      </h1>
      <p className="text-lg text-slate-400 max-w-xl">
        DesignJS gives AI agents visual awareness of your HTML/CSS canvas.
        Describe, iterate, and export — no translation gap.
      </p>
      <a
        href="#"
        className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-sm font-semibold text-white hover:bg-indigo-500 transition-colors"
      >
        Get started free
      </a>
    </section>
  );
}

Because the canvas runs Tailwind v4 via CDN, arbitrary values like bg-[#0f172a] that the agent wrote during the design session appear verbatim in the JSX output — they work natively in any Tailwind v4 project without additional configuration.

---

Inline mode in detail

In inline mode every CSS property becomes a key in a style object. No Tailwind classes are emitted. This output is framework-agnostic and works in any React project:

// Tool call
{
  "tool": "get_jsx",
  "params": {
    "componentId": "comp-a1b2c3",
    "mode": "inline"
  }
}

Example output — inline mode:

export default function HeroSection() {
  return (
    <section
      style={{
        width: "100%",
        backgroundColor: "#0f172a",
        paddingTop: "6rem",
        paddingBottom: "6rem",
        paddingLeft: "2rem",
        paddingRight: "2rem",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        textAlign: "center",
        gap: "1.5rem",
      }}
    >
      <h1
        style={{
          fontSize: "3rem",
          fontWeight: 700,
          letterSpacing: "-0.025em",
          color: "#ffffff",
        }}
      >
        Ship design and code together
      </h1>
      <p
        style={{
          fontSize: "1.125rem",
          color: "#94a3b8",
          maxWidth: "36rem",
        }}
      >
        DesignJS gives AI agents visual awareness of your HTML/CSS canvas.
        Describe, iterate, and export — no translation gap.
      </p>
      <a
        href="#"
        style={{
          display: "inline-flex",
          alignItems: "center",
          gap: "0.5rem",
          borderRadius: "0.5rem",
          backgroundColor: "#4f46e5",
          padding: "0.75rem 1.5rem",
          fontSize: "0.875rem",
          fontWeight: 600,
          color: "#ffffff",
        }}
      >
        Get started free
      </a>
    </section>
  );
}

Hover and focus states expressed as Tailwind variants (e.g., hover:bg-indigo-500) have no direct CSS equivalent in inline mode and will be dropped from the output. If interactivity matters, prefer tailwind mode or add the pseudo-class styles manually after export.

---

Save the output as a .tsx file

The full export workflow — scoping to a component, choosing a mode, and writing the file — looks like this when you direct an agent to handle it end-to-end:

1. Select the component in the canvas

   Click the hero section in the canvas editor. Then ask the agent to call get_selection:

   {
     "tool": "get_selection",
     "params": {}
   }
   // → { "componentIds": ["comp-a1b2c3"] }
   
2. Call get_jsx with the component id

   {
     "tool": "get_jsx",
     "params": {
       "componentId": "comp-a1b2c3",
       "mode": "tailwind"
     }
   }
   

   The agent receives the JSX string in the response.

3. Write the .tsx file

   The agent writes the jsx string from the response to a file in your React project:

   # The agent creates the file at the path you specify
   # For example, inside a Next.js app:
   src/components/HeroSection.tsx
   

   The file is ready to import. If you’re using Tailwind v4 in your React project, the classes are identical to what was on the canvas — zero style translation needed.

4. Import and use the component

   // app/page.tsx
   import HeroSection from "@/components/HeroSection";
   
   export default function Home() {
     return (
       <main>
         <HeroSection />
       </main>
     );
   }
   

---

Tips for cleaner exports

• Name your components in the canvas. Use the layers panel to rename elements before exporting. The agent uses the component structure from the canvas tree, so well-named layers produce more readable JSX.
• Group related elements before exporting. If you want a button and its label to export as a single component, make sure they share a parent wrapper in the canvas.
• Export incrementally. Export one section at a time using componentId scoping rather than exporting the entire canvas. Smaller components are easier to review and integrate.
• Re-export after style changes. If you refine styles on the canvas after an initial export, run get_jsx again — the canvas is always the source of truth.

---

Next steps

Manage design tokens

Set up CSS custom properties on the canvas so exported components automatically reference your brand colors and spacing scale.

Design with an agent

Back to the full design workflow — adding components, iterating with screenshots, and refining styles.