---
title: "Open Build Mode and move around your app"
description: "Enter Build Mode from a Portal or a frame, browse your app on the stage, and get back to the canvas."
url: https://help.modeinspect.com/en/articles/29-open-build-mode-and-move-around-your-app
collection: "Build mode"
updated: 2026-10-29
language: en
---

# Open Build Mode and move around your app

Enter Build Mode from a Portal or a frame, browse your app on the stage, and get back to the canvas.

Open Build Mode on the page you want to change, move to another page of your app, and come back to the canvas. Every build starts this way.

**Before you start**

-   A canvas with a Portal whose app has started, see [Add a Portal to the canvas](https://help.modeinspect.com/en/articles/31-add-a-portal.md).
    

## Steps

1.  Select the Portal. The design panel shows **Open Build Mode** at the top.
    
    ![The design panel of a selected Portal with Open Build Mode highlighted above Codebase, Preview link, and Preview Resolution](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/y9jNDVWizfMOQXrlcPAl0XGylS8sZanv2PbkoDtk8PEiRDBF8gFlMLL5FiIaSCcMVDEnQGFEYOK.png)
2.  Click **Open Build Mode**. Your app fills the stage on the left, the chat sits on the right, and **Back to Canvas** replaces the canvas name at the top left.
    
    ![The top of Build Mode: Back to Canvas highlighted, the toolbar with Back, Forward, the address bar and Reload, the demo shop on the stage, and the empty chat](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/lg8YYurb2ekW4SP1gkJUjTRP1JS8OsvoUbOZceRDs1lXnEl8MO7tYjUlYnKyJbP9nFQjd5y5nYM.png)
3.  Click through the app on the stage to reach the page you want. The arrows at the left of the toolbar are Back and Forward, the button at the right end of the address bar is Reload.
    
4.  To jump to a page, click the address bar, type its path, and press `Enter`.
    
    ![The address bar focused with /checkout typed, between the Back and Forward arrows and the Reload button](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/k1uNCqRRBmLxUsQGGUDVOnEPazFzYN8DIiPfQDtk2v0OIjv3F2NKz1BrzVvWY58QRihT7T77txr.png)
5.  To share the page, click the link icon at the left end of the address bar, **Copy link to this page**. The toast reads "Link copied".
    

You now see the page you want to change. Select an element in the preview or describe a change in the chat, and the agent starts. **Back to Canvas** takes you back. `Esc` does the same once nothing is open in Build Mode.

## Other ways in

-   Right-click a frame and pick **Add to Build Chat**. Build Mode opens with the frame attached to the chat. The same button is at the top of the design panel while a frame is selected.
    
-   After the canvas agent has answered on a frame, its card offers **Add Frame to Build Chat**. A frame that did not come from your code shows **Choose where to build** instead.
    

## Shortcuts

<table style="min-width: 50px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p>Keys</p></th><th colspan="1" rowspan="1"><p>What it does</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>⌘ B</code></p></td><td colspan="1" rowspan="1"><p>Hide the chat so the stage takes the whole width. Press again to show it.</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>⌘ E</code></p></td><td colspan="1" rowspan="1"><p>Select: a click on the stage picks an element for the chat</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>⌘ D</code></p></td><td colspan="1" rowspan="1"><p>Open the <strong>Design</strong> tab, where you edit the styles of an element</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>⌘ I</code></p></td><td colspan="1" rowspan="1"><p>Go back to clicking through the app</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>Esc</code></p></td><td colspan="1" rowspan="1"><p>Close what is open, one step at a time, then Build Mode itself</p></td></tr></tbody></table>

## If it does not work

-   **Back and Forward are greyed out**: there is no page to go back or forward to yet. They light up once you move to another page.
    
-   **"Preview failed" in place of the address bar**: the app did not load. Click **Retry**. If it fails again, **Fix with agent** hands the error to the agent.
    
-   **Open Build Mode is not in the design panel**: the selection is a frame, not a Portal. Use **Add to Build Chat** there, or select the Portal.
    

## Related

-   [What is Build Mode](https://help.modeinspect.com/en/articles/30-what-is-build-mode.md)
    
-   [Preview your app at different screen sizes](https://help.modeinspect.com/en/articles/27-change-the-preview-resolution.md)
    
-   [What is a Portal](https://help.modeinspect.com/en/articles/43-what-is-a-portal.md)

## Related

- [What is Build Mode](https://help.modeinspect.com/en/articles/30-what-is-build-mode.md)
- [Preview your app at different screen sizes](https://help.modeinspect.com/en/articles/27-preview-your-app-at-different-screen-sizes.md)
- [From a captured frame to code](https://help.modeinspect.com/en/articles/25-from-a-captured-frame-to-code.md)
- [Attach a frame to the build chat](https://help.modeinspect.com/en/articles/22-attach-a-frame-to-the-build-chat.md)
- [Attach images to the build chat](https://help.modeinspect.com/en/articles/24-attach-images-to-the-build-chat.md)