---
title: "Add a Portal to the canvas"
description: "Place a Portal with the Portal tool, wait for your app to start, and set its page and preview resolution."
url: https://help.modeinspect.com/en/articles/31-add-a-portal-to-the-canvas
collection: "Canvas"
updated: 2026-10-29
language: en
---

# Add a Portal to the canvas

Place a Portal with the Portal tool, wait for your app to start, and set its page and preview resolution.

A new Portal opens your app's start page on the canvas. Add one when you want another screen next to the ones you have, or the same screen at another resolution.

**Before you start**

-   A canvas of a codebase whose setup has finished. Every canvas starts with one Portal, so this is only for the second one on.
    

## Steps

1.  Press `P`, or click **Portal** in the toolbar. The cursor becomes a crosshair.
    
2.  Click where the Portal should go. A dark frame with a spinner appears at that point while your app starts, with its capture buttons greyed out.
    
    ![A freshly placed Portal, a dark frame with a spinner, beside the Portal that already shows the demo shop](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/SPAvkEnOrXXZRcBxFpozJ0Cz3iP04hL5rsMsIsVp9GPu5YbdqBWAYudOtruyUo8dcx47uTPoL1l.png)
    
    Your app's start page appears in the frame when it is ready. Nothing on the Portal can be captured before that.
    
    ![The same two Portals a moment later, both showing the demo shop](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/i7IDcI1lo2C08wijQBXYk5QhB62imA4hQqR7eO9OBp3LSTqzfQboyqNCPioq7HZohue4EnzXe1B.png)
3.  With the Portal selected, pick a size under **Preview Resolution** in the design panel: **Mobile**, **Tablet**, **Laptop**, **Desktop**, or **Large desktop**. The page reflows inside the Portal. A Portal you resize by hand shows **Custom**.
    
    ![The design panel for a selected Portal: Open Build Mode, Codebase, Preview link with Copy, and Preview Resolution](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/8veTUAEztIqBICKWI96oYckvqJbfPHPSZrbaOrm9dRMSePwKgfyaZDPmh5l9UG05VYmhkmP1X6j.png)

The rest of the panel: **Open Build Mode** opens the Portal in Build Mode, and **Codebase** names the codebase it runs. **Preview link** copies a link to this page that others can open.

## Open another page in the Portal

Select the Portal and click **Open preview** in the toolbar above it, or right-click it and pick **Open portal**. The page opens in a window over the canvas with an address bar. Browse to the page you want and close the window. The Portal now shows that page.

Every Portal starts with the codebase's name. Double-click the name above a Portal to rename it, so the Layers panel reads "Checkout" rather than a second "Modify Store - Codebase".

## If it does not work

-   **The frame stays dark with a spinner**: the dev environment is still starting. Open the canvas again in a minute.
    
-   **"Couldn't load dev server"**: click the Portal to retry. If it fails again, the codebase's start scripts need a look, see [Add start scripts to a codebase](https://help.modeinspect.com/en/articles/13-edit-start-scripts.md).
    
-   **"This app redirected to … usually to sign in"**: the page wants another site, for example a sign-in provider. Click the Portal to continue in a new window.
    
-   **Open portal and Capture page are greyed out**: the page has not finished starting.
    

## Related

-   [What is a Portal](https://help.modeinspect.com/en/articles/43-what-is-a-portal.md)
    
-   [Capture a live page or selection](https://help.modeinspect.com/en/articles/33-capture-a-live-page.md)
    
-   [Canvas controls and keyboard shortcuts](https://help.modeinspect.com/en/articles/32-canvas-controls-and-shortcuts.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)