> ## Documentation index
> Fetch the complete documentation index at: https://haarness.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview pages and use the browser

Desktop can show what Haarness builds without leaving the window: an HTML page, a chart or a
report opens as a live preview, and a browser next to the chat lets you and the agent try a
website or your dev server.

**You need:** Desktop with a project open. Previews and the browser show in Desktop; a chat in the
terminal UI can use this browser only while the same chat is open in Desktop. To let agents work
in your own Chrome instead, from Desktop or the terminal UI, see
[Use your Chrome](https://haarness.ai/docs/desktop/use-your-chrome.md).

## Preview a page Haarness makes

Ask for something you can look at, inside your project:

```text
Create an interactive sales dashboard in sales.html using embedded sample data and inline
JavaScript, then preview it.
```

When Haarness has written the file, the Files panel opens beside the chat with the page running.
It refreshes each time Haarness previews the file again.

- **Preview** runs the page; **Code** shows the source, which you can edit. Preview runs your
  unsaved edits too.
- HTML, SVG, Markdown and images can be previewed.
- Each preview in the chat is a card that keeps the exact version from that moment. Expand it, or
  click **Open preview** to put that version in the panel.

### Go back to an earlier version

Earlier preview cards offer **Compare**, to see what changed since, and **Restore**, to put that
version back in the file. Restore saves the current file first, so **Undo restore** brings it
back. A version open in the panel offers **Show current** and **Restore this version**.

If the file changed since you opened the version, the restore fails rather than overwrite the
newer change. Versions are kept with your Haarness data, not in your project or its Git history.
Each version can be up to 5 MiB, and the newest 500 are kept.

### What a preview page can do

A preview runs in a locked-down frame. It cannot reach your files, the app's storage, other
websites or forms that submit somewhere, and it cannot open pop-ups. Inline JavaScript and CSS
work, and libraries load from the public `unpkg.com` CDN; links to jsDelivr, cdnjs and D3 are
loaded from there instead. Embed images and data in the page, and use system fonts.

## Browse next to the chat

Open the side panel and choose **Browser**, or press ⌘⇧B (Ctrl+Shift+B on Windows and Linux).
Use **+** for another tab, type an address, and use Back, Forward and Reload as in any browser.

- Each chat has its own tabs, cookies and logins. Logins are temporary: they reset when Desktop
  restarts. This browser never uses your Chrome profile; for a task that needs your own
  sign-ins, [use your Chrome](https://haarness.ai/docs/desktop/use-your-chrome.md).
- You can browse from a new chat before sending anything. When you send the first message, those
  tabs move into the chat, so the agent can use them right away.
- Pages load through the computer that runs your Haarness server, so `localhost` is that
  computer, which makes it handy for a dev server. Links to `localhost` in a chat open in this
  browser by default; other web links open in your system browser. Change both in
  **Settings → Browser**.
- The camera, microphone and screen sharing are blocked for every page.

Ask Haarness to use it: "open localhost:3000, fill in the sign-up form and tell me what fails", or
"take a screenshot of the pricing page". The agent uses the same tabs you see. When it opens a page
while the side panel is closed, the panel opens on the Browser, unless you put the Browser away in
this chat; then **Show side panel** gets a dot instead.

## Show the agent part of a page

To point at exactly what you mean, such as a broken button:

1. Click **Pick an element** (the crosshair beside the address bar), or press ⌘⇧C
   (Ctrl+Shift+C elsewhere).
2. Hover over the page: the element under the pointer is outlined. Click it.
3. It becomes a chip in the message box, with the keyboard there, so you can type your note
   and send.

Shift-click picks several elements, and Esc stops. While you pick, your clicks and keys never
reach the page, so nothing on it runs. The chip carries the element's address, text and a short
piece of its HTML, not a screenshot; ask the agent for one if you need it.

## Control what the agent may do in the browser

Browser actions go through the same [permissions](https://haarness.ai/docs/security/permissions.md) as everything else.
Out of the box the agent may use any website in this browser without asking, in **Review** too.
To be asked first, set the site, or the **Default** row for every site, to **Requires approval**
under **Agent site permissions** below.

**Settings → Browser** has more control. Choose **This project** or **Global default** first:

- **Agent browser control** turns the agent's browser tools on or off. You can still browse
  yourself.
- **Agent site permissions** sets, for a site such as `https://example.com` or
  `http://localhost:5173`, whether the agent may browse it, download from it and upload to it:
  **Always allow**, **Requires approval** or **Block**.
- **Remember site approvals**, off by default, lets an "always" answer cover a site, so you are
  not asked again for it.

The rest of the page applies to this computer: where links open, **Browsing history**,
**Download history**, **Ask where to save downloads**, and **Clear browsing data**, which closes
this project's tabs and clears its cookies, site storage, cache, history and downloads.

The **Chrome** group on the same page sets up and controls your own Chrome. Its settings apply to
every project on this computer, whichever scope you chose, and it asks about every site by
default. A site you **Block** under **Agent site permissions** is blocked in Chrome too. When a
chat also has tabs in Chrome, the Browser panel says so. See
[Use your Chrome](https://haarness.ai/docs/desktop/use-your-chrome.md).

The browser is not offered for a project on one of
[your other computers](https://haarness.ai/docs/desktop/settings.md#work-on-another-machine).

## Next

- [Settings](https://haarness.ai/docs/desktop/settings.md): everything else you can change in Desktop
- [Use your Chrome](https://haarness.ai/docs/desktop/use-your-chrome.md): let agents work in your own Chrome, signed in
  as you
- [Permissions](https://haarness.ai/docs/security/permissions.md): what Haarness may do without asking