# Preview & focus mode (https://docs.fuser.studio/docs/apps/preview)

Your app always runs live — there's no separate "run" step. On the canvas, it
renders in a framed preview inside the node. To work on it, you open **focus
mode**.

## Focus mode [#focus-mode]

Click into a node to open focus mode, a full-screen workspace with three areas:

![Focus mode: chat transcript on the left, live preview in the center, inspector on the right](/app-node-focus-finished.png)

* **Chat** (left) — the running transcript of your prompts and the agent's work.
  Collapse it to give the preview more room.
* **Preview** (center) — your live app, with a toolbar above it.
* **Inspector** (right) — opens on demand for **Edit** content or **Settings**.

On smaller screens the layout compacts: chat moves into a bottom dock and the
side panels tuck away, keeping the app itself front and center.

## The preview toolbar [#the-preview-toolbar]

Above the preview sits the URL bar and its controls:

* The **live URL** of your app, or **Not deployed** before the first build.
*  **Reload** the preview.
*  **Copy URL** to share the current address.
*  **QR code** — once published, scan to open the app on a phone.
*  **Open in new tab** to view the app full-screen in the browser.

### Viewport sizes [#viewport-sizes]

Cycle the preview between **full width**, **tablet**, and **mobile** to check how
your app responds across screen sizes without leaving focus mode.

### Preview and Code [#preview-and-code]

Toggle between  **Preview** (the running app) and  **Code** (the editor). See [Editing your app](https://docs.fuser.studio/docs/apps/editing.md) for
what the editor can do.

## More actions [#more-actions]

The  **More actions** menu in the top bar holds a few utilities:

* **Copy** the conversation as a **Transcript**, **Markdown**, or **JSON**, or
  grab **diagnostic logs** to report a problem.
* **Download bundle** — a `.zip` of the app's source plus its transcript.
* **Unpublish** — take a published app offline (see
  [Publishing](https://docs.fuser.studio/docs/apps/publishing.md)).

> [!NOTE] The preview is sandboxed
>
> Your app runs in an isolated sandbox, separate from the Fuser canvas around it. That keeps the editor responsive and your app's code safely contained as you build.

## What's next [#whats-next]

  - [Editing your app](https://docs.fuser.studio/docs/apps/editing.md): The Code editor, content inspector, markup, and media replace.

  - [Publishing & versions](https://docs.fuser.studio/docs/apps/publishing.md): Status states, the version switcher, and rollback.

  - [Sharing & your audience](https://docs.fuser.studio/docs/apps/sharing.md): Public URLs, QR codes, and what your audience sees.