Docs
Download

Dev Preview

An embedded browser that runs your project's dev server behind a stable proxy origin, with device emulation, an Output/Console/Diagnostics drawer, script discovery across nine sources, and sessions that survive a relaunch.

Reviewed

Overview

A Dev Preview panel runs your project's dev server and shows what it serves in a browser embedded inside Daintree. Your UI updates as agents change the code, without a second window to tab into. Each panel owns its own dev-server session, keyed by project and panel, so several previews can run side by side without colliding.

The panel's toolbar is the same one the Browser panel uses, plus a responsive-preview cluster only Dev Preview shows. Underneath, the webview never talks to the dev server directly: it loads a fixed proxy origin that Daintree owns, which is what keeps cookies and localStorage intact across a restart. That mechanism is described in How the preview is served.

Starting a preview

The launcher in the toolbar is the primary way in: open it and pick Dev preview. That row dispatches devServer.start, which opens the panel with the project's configured dev command already loaded, rather than a bare preview you then have to configure. The panel palette (Command-N Control-N Control-N ) and the worktree context menu still work and land in the same place.

Show, hide or reorder the Dev Preview toolbar button in Settings > Toolbar. On a fresh profile the browser and dev-preview buttons live in the launcher's panel tray rather than as standalone toolbar buttons; saved layouts are left alone.

Empty states

A panel with no dev command running shows one of two prompts, depending on whether Daintree found a likely script.

If it found a candidate, the panel shows a Start the dev server heading and:

  • An Auto-detected [command] chip naming the script it picked
  • A Run [command] button (it reads "Detecting…" while it works out the launch details)
  • A Use a different script… popover listing every detected runner with its command and source
  • An Open project settings link for configuring the command by hand

If nothing was detected, the panel shows Set a dev command with an inline text input (placeholder npm run dev) and a Run button. The command is validated on submit, with an inline warning when it is empty or malformed.

Switching scripts

Once a server is running, the panel header carries a Switch dev script dropdown showing the active script's name. It lists every detected candidate with its command; picking a different one saves it to project settings and stops the current server so the new command starts clean.

The rest of Dev Preview

  • Discovery and serving for how Daintree finds your dev command, picks a port, and puts a stable proxy origin in front of it, plus what happens to a session when you close the panel.
  • Tools for the toolbar, device emulation, find in page, and the Output, Console and Diagnostics drawer.
  • Troubleshooting for a server that will not start, a URL that is never detected, a blank page, and blocked navigation.

Beyond one panel

Two things lift Dev Preview out of its own panel.

Open in Portal promotes the current preview URL into a Portal tab on the same session partition, so cookies, localStorage and IndexedDB carry across (sessionStorage does not). The preview panel stays open: this is a second view of the same signed-in app, not a move.

The dev-server dashboard lives in the Portal, toggled from the server icon in the Portal toolbar. It lists every dev-server session Daintree is running, across worktrees and projects, with the worktree name, port, status, the server's last output line, and per-row restart and stop buttons. Stopped sessions are hidden, except sessions restored from the relaunch manifest, which stay listed precisely because they are an offer to restart. An errored row is stoppable, which is how you clear it.

Agents and external MCP clients reach the same controls at the Action tier: devPreview.reloadPreview, devPreview.restart, devPreview.promoteToPortal, and portal.toggleDevDashboard. Console output is readable through browser.getConsoleMessages, which is Workbench-tier and targets dev-preview panels specifically. See MCP Server and Daintree Assistant.

Two-pane layout

Dev Preview pairs well with the two-pane split layout. Turn on "prefer preview" in Settings > Terminal (Panel Grid) and Daintree places Dev Preview panels in the secondary pane, so you see agent work and your running app side by side.

Note
QuickRun is not Dev Preview. QuickRun runs any command in a terminal or dock task. Dev Preview connects the embedded browser to your configured dev server. Use QuickRun for build scripts and test runners; use Dev Preview when you want a live browser next to your code. See QuickRun.

Settings reference

  • Dev server command: the command to run (e.g. npm run dev). Project Settings
  • Dev server load timeout: how long to wait for the server to respond, 1 to 120 seconds, default 30. Project Settings
  • Auto-inject --turbopack for Next.js 15+ projects: on by default. Only takes effect on Next.js 15+; older projects have the flag stripped either way. Project Settings > Dev Server Command
  • Environment variables: injected into the dev server process. Settings > Project > Variables
  • Prefer preview: places Dev Preview panels in the secondary pane automatically. Settings > Terminal (Panel Grid)
  • Dev Preview toolbar button: show, hide or reorder it. Settings > Toolbar
  • Always show dev server in launcher: offers the dev server row even when the project has no command configured. Settings > Toolbar > Launcher palette

Viewport preset, rotation, DPR, zoom-to-fit and drawer state are per-panel state Daintree remembers, not Settings options.

Tip
Dev Preview suits frontend work. Have an agent implement a component while you watch the changes land live, then flip on a viewport preset to check it on mobile without leaving Daintree.