> ## 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.
# 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](/guides/design-with-agent))
***
## Choosing an export mode
`get_jsx` accepts an optional `mode` parameter with two values:
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.
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:
```json theme={null}
// Tool call
{
"tool": "get_jsx",
"params": {}
}
```
The default mode is `"tailwind"`. The response contains a self-contained JSX string:
```json theme={null}
// Response
{
"jsx": "export default function Canvas() {\n return (\n \n
\n \n Ship design and code together\n
\n \n DesignJS gives AI agents visual awareness of your HTML/CSS canvas.\n
\n \n Get started free\n \n \n
Ship design and code together
DesignJS gives AI agents visual awareness of your HTML/CSS canvas.
Describe, iterate, and export — no translation gap.
Get started free
);
}
```
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:
```json theme={null}
// Tool call
{
"tool": "get_jsx",
"params": {
"componentId": "comp-a1b2c3",
"mode": "inline"
}
}
```
**Example output — inline mode:**
```tsx theme={null}
export default function HeroSection() {
return (
Ship design and code together
DesignJS gives AI agents visual awareness of your HTML/CSS canvas.
Describe, iterate, and export — no translation gap.
Get started free
);
}
```
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:
Click the hero section in the canvas editor. Then ask the agent to call `get_selection`:
```json theme={null}
{
"tool": "get_selection",
"params": {}
}
// → { "componentIds": ["comp-a1b2c3"] }
```
```json theme={null}
{
"tool": "get_jsx",
"params": {
"componentId": "comp-a1b2c3",
"mode": "tailwind"
}
}
```
The agent receives the JSX string in the response.
The agent writes the `jsx` string from the response to a file in your React project:
```bash theme={null}
# 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.
```tsx theme={null}
// app/page.tsx
import HeroSection from "@/components/HeroSection";
export default function Home() {
return (
);
}
```
***
## 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
Set up CSS custom properties on the canvas so exported components automatically reference your brand colors and spacing scale.
Back to the full design workflow — adding components, iterating with screenshots, and refining styles.