Skip to main content
Subframe generates high-quality React code deterministically from your designs.
For a complete guide to working with Subframe code, see the developer docs.
The canvas stays editable in export mode. You can insert elements and adjust the design without leaving the Export tab, and the inspected code updates to match.

​
Setting up agents and your codebase

Click Connect MCP in the Export tab to open Agents settings. You can also open it from your account menu. Use it to:
  • Connect Claude Code, Codex, or Cursor through the MCP server
  • Set up Subframe in your codebase with the CLI
  • Sync components into your codebase

​
Inspecting page code

Pages are screens built from components. After designing a page in Subframe, you can copy its React code and add application logic such as API calls, state, and routing in your codebase.
  1. Open the page in Subframe
  2. Click the Export tab at the top of the Inspector panel
  3. Copy the React code
To copy code for part of a page, select the elements first. The Export tab shows code for your selection.

​
Inspecting elements

  1. Click the Export tab
  2. Click on element you want to inspect
  3. Use dropdown to select what code format you want:
    • React + Tailwind code
    • CSS code
    • Properties

​
Syncing components

  1. Click the Export tab
  2. Copy the npx @subframe/cli@latest command for syncing all components in the page or your selection
To learn more about how syncing works, see syncing components.

​
Exporting images

Export a page, a selected element, a component, or a snippet as an image or PDF.
The Export image card in the Export tab with 2x scale, PNG format, and an Export Home button
  1. Open the page, component, or snippet. To export part of a page, select the element.
  2. Click the Export tab
  3. Under Export image, choose a scale from 0.5x to 4x and a format: PNG, JPG, WebP, or PDF
  4. Click the Export button, which shows the name of what you’re exporting
The image uses the breakpoint and dark mode setting you’re previewing. A component exports the variant and state selected in the component editor. PNG and WebP keep transparent backgrounds, and JPG uses a white background. PDF exports a whole page, component, or snippet, so it isn’t offered when an element is selected. To copy a PNG instead, click the copy icon next to Export image, press Cmd + Shift + C, or right-click an element and select Copy as PNG. Copy as PNG is also in Cmd + K and the page and component menus. External agents can export images with the MCP server’s export_image tool.

​
Implementing a page with Agent chat

Agent chat can implement a page directly in your connected codebase. Give it the page in any of these ways:
  • Open the page or its canvas, then ask the agent to implement what you are viewing
  • Select the page before opening Agent chat
  • Add the page to your message with an @ reference
  • Copy the page frame and paste it into Agent chat
Then ask the agent to implement the page and describe any application logic it should add. Agent chat automatically includes the page or canvas you are viewing and the page you have selected. Learn more about giving your agent context.

​
Implementing a page with an external agent

If your team already uses an external agent connected through the MCP server, copy the link under Copy MCP link in the Export tab and paste it into your agent with your implementation request.
For new workflows, use Agent chat to implement the page.
You can also use the page link to update an existing implementation:
Last modified on October 20, 2026