---
title: The built-in browser and preview
question: preview browser
area: quadrants
surface: desktop
audience: beginner
keywords: [web button, preview, test browser, built-in browser, globe icon, dev server, localhost, No URL, preview URL, pin a folder, device mode, mobile preview, tablet, responsive, screenshot, share link, red circle, annotate, feedback, brightness, dim preview, maximize, full window, fullscreen, picture in picture, pip, float preview, reload, hard reload, traffic lights, red yellow green dots, minimize, open in browser]
related: []
updated: 2026-07-21
---

# The built-in browser and preview

codus has a built-in browser, the preview, so you can watch the app the agent is building without leaving codus. Open it with the **web** button on the quadrant's button row, the small globe between **plan** and the quadrant settings icon. It opens a browser in the slot next to your quadrant and loads whatever your dev server is serving, so you watch the live app refresh as the agent edits the code. Two things must be true for anything to show: the neighbouring slot has to be switched on (if it is off, clicking **web** does nothing and gives no error), and there must be an address to load. codus reads that automatically from a running dev server such as `npm run dev`, or you set it by hand in the quadrant ⚙ under **Preview URL** (pin a folder first, or that box stays greyed out). With no address, the preview reads "No URL". Click **web** again to close it.

## The toolbar along the top

Hover any button for its label; these are mouse clicks, not the keyboard-only terminal.

- **Device sizes.** Four icons right of the address bar, **Native** / **Desktop** / **Tablet** / **Mobile**: click one to reshape the preview to that width and check your phone or tablet layout in place. **Native** is only for sites that block automated browsers.
- **Camera** (📷). Screenshots the current view, saves a PNG, and copies a shareable link to your clipboard.
- **Circle** (◯). Drag a red circle on the page to point something out; a **Feedback** box opens where you type what to change and press ⌘↵ (or click the green **Claude** / blue **Codex** button) to send it with the circled screenshot to the agent.
- **Sun** (☼). Dims the preview for you only, down to 20%; **Reset** returns to full. It changes how the preview looks, not your site.
- **Reload** (⟳). A normal click reloads; right-click it or press ⌘⇧R for a hard reload that bypasses the cache, for when a change will not show.

## The red, yellow, and green dots

Three coloured dots sit at the top-left of the preview, like a Mac window, but they act on the preview, not on codus. The **red dot** closes the preview (it does not quit codus). The **yellow dot** opens the current page in your normal browser like Safari or Chrome; on hover it shows a minus sign that looks like "minimize" but does not minimize, which catches people out. The **green dot** maximizes the preview into its own large codus window, the same live page bigger, with developer tools and a Git panel beside it; that window follows whichever terminal you click into, and its **×** drops the preview back into the grid.

## Float it (picture-in-picture)

Click the **❐** button on the preview's toolbar to shrink it into a small window floating over that quadrant's terminal, so you can watch the page and keep typing. Drag its top strip to move it (double-click snaps it back to the top-right), drag an edge to resize, click **⤢** to restore the full panel, or **×** to hide it (the page keeps running). The spot is remembered per quadrant. The separate **❐** in the codus title bar floats every switched-on quadrant's preview at once, up to four, which docked panels cannot do; click it again to put them all away.