> ## 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.

# Desktop app and browser

> What you can do in the Wonder desktop app and in a browser, which computers and browsers Wonder runs on, and how to install, update and find your way around the desktop app.

Wonder runs as a desktop app on macOS and Windows, and in a browser at [app.wonder.so](https://app.wonder.so/). Both open the same account, workspaces and files. The desktop app adds everything that works with your code on your computer: chats with Claude Code or Codex, your repositories and your running app.

**Before you start** · Web and desktop · Free plan

## Choose the desktop app or a browser

| | Desktop app | Browser |
| - | - | - |
| Design on the canvas, variables and icons | Yes | Yes |
| Workspaces, members, sharing and real-time editing | Yes | Yes |
| [Wonder MCP](https://wonder.design/docs/wonder-mcp.md) from your own agent or editor | Yes | Yes |
| Chats with Claude Code or Codex beside the canvas | Yes | No |
| Your repositories and worktrees | Yes | No |
| Dev view: files, code changes and terminals | Yes | No |
| [Preview your running app](https://wonder.design/docs/preview-your-running-app.md) | Yes | No, you see a published Preview only |
| [Publish your app](https://wonder.design/docs/publish-your-app.md) | Yes | No, but anyone can open the published link |
| Settings > Agents, Usage, Default Models and Memory | Yes | No |

On a phone, you can sign up, sign in and finish onboarding. Everything else asks you to open Wonder on your computer.

## Install the desktop app

Download Wonder from [wonder.design/downloads](https://wonder.design/downloads). It runs on:

* **macOS** on Apple Silicon or Intel
* **Windows** x64

On a Mac, move Wonder to your **Applications** folder. Wonder can only update itself from there.

The desktop app brings its own tools, so you don't need to install them first:

* **Git** and the **GitHub CLI**. Wonder uses its own copies.
* **Claude Code** and **Codex**. Wonder installs them itself. You sign in with your own Claude or ChatGPT account.

You do need **Node.js** on your computer to run a Node app in the Preview: version 20.19 or later, or 22.12 or later on version 22. The demo app in onboarding is the one exception: it brings its own.

To sign in, the desktop app opens your browser. See [Sign in to the desktop app](https://wonder.design/docs/your-account.md#sign-in-to-the-desktop-app).

## Update the desktop app

Wonder downloads updates in the background. When one is ready, an **Update** button appears at the top right of the window. Its tooltip says **Restart to update**, or **Reload to update** when Wonder only needs to reload.

1. Click **Update**. Wonder restarts, or reloads, on the new version.
2. If a chat is still working, Wonder asks first, for example **1 chat is still working**. Choose:
   * **Restart when it finishes**: Wonder restarts as soon as every chat is done. Until then, a notice says **Restarting when your chat finishes**, with **Restart now**.
   * **Restart now**: stops the chat mid-reply and restarts.
   * **Cancel**: keeps working on this version.

To look for an update yourself, open the app menu and choose **Check for updates**. On a Mac it's the **Wonder** menu in the menu bar; on Windows, click **Menu** at the top right of the window.

## Find your way around the desktop app

* **Repositories**: the sidebar on the left lists your repositories and their worktrees. Each chat runs in its own worktree, a separate copy of the repository on its own branch. Press <kbd>⌘</kbd> <kbd>B</kbd> to show or hide it.
* **The chat**: chat with Claude Code or Codex beside the canvas. Press <kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>B</kbd> to show or hide it.
* **The canvas**: your designs, and your running app in a Preview next to them.
* **Tabs**: your files and Previews open as tabs at the top of the window. The first tab, **Files**, lists your files.

### Switch between the canvas and Dev view

Dev view gives your chat more room, with your worktree's local files, code changes and terminals beside it. It's the same worktree, agent and conversation you had on the canvas.

Use the switch at the top right of the window: the palette for **Design**, `{}` for **Code**. Or press <kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>.</kbd>. Press <kbd>⌘</kbd> <kbd>J</kbd> to show or hide the changes and terminal panel.

When you first open the desktop app, Wonder asks **What best describes you?** **Designer** starts you on the canvas and **Developer** in Dev view. You can switch any time.

On Windows, use <kbd>Ctrl</kbd> for <kbd>⌘</kbd> and <kbd>Alt</kbd> for <kbd>⌥</kbd>.

## Open Wonder links in the desktop app

When the desktop app is installed, links to a design open in it instead of your browser. The browser tab says **Opened in the desktop app**. Click **Stay in the browser** to keep working there.

To change this, open **Settings** > **Preferences** and, under **Advanced**, turn **Open Wonder links in the desktop app** on or off. Wonder turns it on the first time you sign in to the desktop app.

To open a file from the browser yourself, open the Wonder menu in the file and choose **Open in desktop app**. It's there while **Open Wonder links in the desktop app** is on.

## Use Wonder in a browser

The canvas runs in **Google Chrome**, the browser Wonder recommends, and in other Chromium browsers such as **Microsoft Edge**, **Opera** and **Brave**. In Safari or Firefox, you can sign in and manage your account, workspaces and settings, but opening a file shows **This browser isn't supported**. Download the desktop app, or click **Get Google Chrome**.

Wonder draws the canvas with your graphics card. If your browser can't use it, Wonder shows **Enable hardware acceleration** with the steps for your browser. In Chrome:

1. Paste `chrome://settings/system` in the address bar.
2. Turn on **Use graphics acceleration when available**.
3. Click **Relaunch**.

## If something goes wrong

* **The Update button doesn't restart Wonder.** If a chat is still working, Wonder waits for it. Choose **Restart now** to restart anyway.
* **Wonder couldn't install the update.** On a Mac, Wonder isn't in your **Applications** folder. Click **Move Wonder**, and Wonder restarts from there.
* **Node.js isn't installed** in the Preview. Click **Download Node.js**, install it, and start the Preview again. See [Fix Preview problems](https://wonder.design/docs/fix-preview-problems.md).
* **Wonder for desktop did not open.** The desktop app isn't installed on this computer. Click **Download**.
* **Chats, repositories or the Preview are missing.** They're only in the desktop app. A file shared from another organization also opens without them.

## Related

* [Your account](https://wonder.design/docs/your-account.md)
* [Preview your running app](https://wonder.design/docs/preview-your-running-app.md)
* [Wonder MCP](https://wonder.design/docs/wonder-mcp.md)
* [Support](https://wonder.design/docs/support.md)


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