> ## Documentation Index
> Fetch the complete documentation index at: https://docs.traycer.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Wireframes

> Add live HTML previews of proposed screens to artifacts, and copy their source.

export const FeatureVideo = ({src, label}) => {
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const video = videoRef.current;
    if (!video || typeof IntersectionObserver === "undefined") {
      return undefined;
    }
    const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) {
      return undefined;
    }
    let pausingOffScreen = false;
    let pausedByReader = false;
    const onPause = () => {
      if (pausingOffScreen) {
        pausingOffScreen = false;
        return;
      }
      pausedByReader = true;
    };
    const onPlay = () => {
      pausedByReader = false;
    };
    video.addEventListener("pause", onPause);
    video.addEventListener("play", onPlay);
    const observer = new IntersectionObserver(entries => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          if (!pausedByReader) {
            video.play().catch(() => {});
          }
        } else if (!video.paused) {
          pausingOffScreen = true;
          video.pause();
        }
      }
    }, {
      threshold: 0.25
    });
    observer.observe(video);
    return () => {
      observer.disconnect();
      video.removeEventListener("pause", onPause);
      video.removeEventListener("play", onPlay);
    };
  }, []);
  return <video ref={videoRef} className="w-full aspect-video rounded-xl" controls loop muted playsInline preload="metadata" aria-label={label}>
      <source src={src} type="video/mp4" />
      Unable to load video.
    </video>;
};

<FeatureVideo src="https://assets.traycer.ai/docs/videos/wireframe-live-preview.mp4" label="Open a wireframe in fullscreen and access Copy HTML" />

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.

````markdown theme={null}
```wireframe
<!doctype html>
<html>
  <body style="font-family: system-ui; padding: 24px">
    <h1>Settings</h1>
    <button>Save</button>
  </body>
</html>
```
````

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:

| Control | What it does |
| - | - |
| **Fullscreen** | Opens the preview in a large dialog, titled **UI Preview** by default, with **Copy HTML**. |
| **Copy HTML** | Copies the preview's HTML. |

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](/panels/artifacts#artifacts-on-disk).
* A PDF export shows the wireframe's HTML source instead of the preview. See [Export](/panels/artifacts/export).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.