Skip to main content
A wireframe code block in an artifact holds a self-contained HTML document, and renders it as a live preview. Use one to look at a proposed screen or layout before anyone builds it.

​
Add a Wireframe

Either:
  • Ask an agent. For example: “Add a wireframe of the new settings page to the spec.” Agents are told to use wireframes for UI and layout.
  • Write one yourself. In an artifact, type a code fence named wireframe that holds a complete HTML document, with its styles and scripts inline. After a short pause it turns into a live preview.
There is no HTML editor in the app. To change a wireframe, ask an agent to edit it.

​
Preview Controls

Hover the preview to show its controls: The grip at the bottom of the inline preview is Resize preview:
  • Drag it to change the preview’s height.
  • With the grip focused, press ↑ / ↓ to resize in small steps.
  • Double-click it to go back to automatic height.

​
What Runs in a Preview

The preview runs in an isolated frame. Its scripts run, so buttons, tabs, and other interactions work. It can’t navigate away, submit forms, open popups, or reach the app, your files, or your session.

​
Wireframes Elsewhere

  • The artifact’s file on disk keeps the wireframe as a wireframe code block. See Artifacts on Disk.
  • A PDF export shows the wireframe’s HTML source instead of the preview. See Export.