---
title: "Capture a live page or selection"
description: "Pull a whole page or one part of your running app onto the canvas as real layers you can edit."
url: https://help.modeinspect.com/en/articles/33-capture-a-live-page-or-selection
collection: "Canvas"
updated: 2026-10-29
language: en
---

# Capture a live page or selection

Pull a whole page or one part of your running app onto the canvas as real layers you can edit.

A capture copies a page, or one part of it, from a Portal onto the canvas as a frame of real layers. Capture when you want to redesign a screen that exists, rather than draw it again.

**Before you start**

-   A canvas with a Portal that shows its page. The capture buttons stay off while the app is starting.
    

## Steps

1.  Click the Portal to select it. The toolbar above it shows **Capture selection**, **Capture page**, and **Open preview**.
    
    ![A selected Portal with its toolbar above it: the name, Capture selection, Capture page, and Open preview](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/jXI9J5JdpUFtw9TPxyxMidg24GlzRrI3Hyp75kp8i5wLFD5Yc0NQnwFnkmDsZaIQGFl0gw8Zslj.png)
2.  Click **Capture page** to capture the whole page. The toast reads **Capturing…**, then **Snapshot captured**, and the canvas moves to the new frame beside the Portal.
    
3.  Click **Capture selection** to capture one part instead. The button stays lit, and the parts of the page get an outline as you move over them.
    
    ![Capture selection armed on the demo shop, with the order summary card outlined under the pointer](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/Kp7k0nZuMMvGHkEFlEVq8rKJ3DQ5QCiAdIz8ST14iGgCBUJg8FFG0FaHnsEswMln6O9ZL3WX9uM.png)
4.  Click the part you want. It lands beside the Portal as its own frame, named after the component it came from, with the toast **Snapshot captured**. Press `Esc` to put the tool away.
    
    ![The captured order summary as a new frame named CardContent beside the Portal, with the Snapshot captured toast](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/IKdtcaWSU1RhSgb3biFGollmlnDdodOW9cIF8wqt36BAl5ef94D7r69P5HKtmW4fNlvcXs5f3RC.png)

You now have a frame you can edit with the canvas tools, the Layers panel, and the design panel. Each layer in it keeps a pointer to the component and file it came from. That is what lets Build Mode take your changes on the frame back into the code later.

> **Tip:** Hold `⇧` while you click with **Capture selection** to keep capturing without the canvas moving to each new frame. The toast counts them up.

## Capture from Build Mode

The same two buttons sit at the right of the page's address bar in Build Mode. **Capture selection** is `⌘ S` and **Capture page** is `⇧ ⌘ S`. While the selection tool is armed, the bar shows **Area capture** with an **×** to leave it. Each capture lands on the canvas with the toast **Capture added to canvas** and a **Show** button that takes you to it.

## If it does not work

-   **Capture page is greyed out**: the page is still starting, or the canvas's pull request is merged or closed. Wait for the page, or open a new canvas from the branch.
    
-   **"Capture failed"**: the page went away between the click and the capture. Click **Capture page** again once the Portal shows the page.
    
-   **The capture shows "Resolving components"**: the capture is still matching its layers to your components. Wait for the badge to go, then edit.
    

## Related

-   [What is a Portal](https://help.modeinspect.com/en/articles/43-what-is-a-portal.md)
    
-   [Add a Portal to the canvas](https://help.modeinspect.com/en/articles/31-add-a-portal.md)
    
-   [Work with layers](https://help.modeinspect.com/en/articles/39-layers.md)

## Related

- [Create a canvas](https://help.modeinspect.com/en/articles/35-create-a-canvas.md)
- [Rename, duplicate and delete canvases](https://help.modeinspect.com/en/articles/40-rename-duplicate-and-delete-canvases.md)
- [Duplicate a canvas](https://help.modeinspect.com/en/articles/37-duplicate-a-canvas.md)
- [Start a canvas from a branch or pull request](https://help.modeinspect.com/en/articles/38-start-a-canvas-from-a-branch-or-pull-request.md)
- [Canvas controls and keyboard shortcuts](https://help.modeinspect.com/en/articles/32-canvas-controls-and-keyboard-shortcuts.md)