> ## Documentation Index
> Fetch the complete documentation index at: https://wonder.design/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Capture your running app
> Turn a screen of your running app into editable layers on the canvas, explore changes on top of it, and send it back to your agent.
Capture turns what your app shows in the Preview into a design on the canvas. You get real, editable layers, not a screenshot, placed next to the Preview. Use it to explore a change on top of the real screen, then hand the result to your agent to build.
**Before you start** · Desktop app · Free plan
## Capture a screen onto the canvas
1. Start the Preview and open the screen you want, in the state you want, such as a dialog open or a form filled in. See [Preview your running app](https://wonder.design/docs/preview-your-running-app.md).
2. Select the Preview and click **Capture** in the bar at the bottom of the canvas.
3. Hover over your app to highlight a part of it, then pick what to capture:
* Click the highlighted element, or press Enter, to capture that part.
* Press ⌘ Enter, or ⌘-click, to capture the full page.
Use the arrow keys to move the highlight, and ⇧ ↑ or ⇧ ↓ to move to the parent or a child. You can scroll your app while you pick. Press Esc, or click **Capture** again, to cancel.
The bar shows **Capturing page** or **Capturing selection**, then **Adding to canvas…** and **Added to canvas**. The design appears to the right of the Preview, selected, as one step you can undo.
What you get:
* **A part** is a frame at the size it had on screen.
* **A full page** is the whole page, not just the part in view, at the Preview's current width. To capture a phone layout, change the Preview's screen size first.
* Where your app's CSS uses a variable, such as `var(--brand)`, and your file has a variable with the same name, the capture is linked to it. The fonts your app uses are added to the file.
A capture is a copy. It doesn't change when your app changes, and changing it doesn't change your app. Capture again to get the current screen.
You can capture a Preview you started, or a published Preview, in a file you can edit.
## Copy a capture to another file
A capture is ordinary layers, so copy it like any design:
1. Select the capture on the canvas and press ⌘ C.
2. Open the other file and press ⌘ V.
In a Preview tab, there's no canvas to place it on, so **Capture** copies the design instead and says **Captured to clipboard**. Paste it into any file.
## Explore on top of a capture and send it to your agent
1. Change the capture like any design: move things around, change text, colors and spacing, or ask your agent in the chat to try ideas on it.
2. Select the frame you want built and press ⌘ L to add it to your message, or right-click it and choose **Add context**. When **Attach selection to chat** is on in Settings > Preferences (it is by default), selecting it is enough.
3. In the chat, say what to do with it, for example "update the settings page in the app to match this design", and send.
Your agent reads the design from the canvas with Wonder MCP and changes your code to match. To build it in a specific worktree, send it from that worktree's chat.
## Let your agent capture
Ask your agent, for example "capture the pricing page onto the canvas". It captures its own worktree's Preview the same way, next to the Preview, and can capture a single part of the page. The chat shows **Capturing the Preview onto the canvas**. Your agent only captures when you ask it to.
## How this differs from Wonder Capture
Both use the same capture engine, so the picker, its shortcuts and the result are the same.
| | Capture in the Preview | [Wonder Capture](https://wonder.design/docs/wonder-capture.md) |
| - | - | - |
| What it captures | Your own app, running in the Preview | Any public webpage |
| Where | Wonder desktop app | A Chrome extension |
| Result | Placed on the canvas next to the Preview | Copied, then you paste it |
| Your agent can use it | Yes | No |
## If something goes wrong
* **Capture is greyed out.** Start the Preview.
* **There's no Capture button.** You can capture only a Preview you started, or a published one, in a file you can edit, with only the Preview selected.
* **This design has too many elements to capture.** Pick a smaller part of the page instead of the full page. The same goes for **too deeply nested**, **too large** and **too complex**.
* **Nothing was added.** Capturing stops if your app reloads or goes to another page, or if the Preview stops. Wait for the page to settle and capture again.
* **A video or animation looks frozen.** Videos and `