Browser previews

When a change is ready to try, bring the app into the conversation. A browser pane lets you try an app, inspect a generated page, or review a mockup while the agent's explanation stays in view. You can open a local HTML file with no development server, or connect the pane to the server your project already uses.

Open a page beside your conversation

Choose Browser from a new-pane launcher, then enter a URL in the address field. Use your app's actual address, such as the localhost URL printed by its development server.

For an HTML file, open it from Files, then choose Pane actions → Open rendered in web pane in its source pane. This works well for the example guestbook: it runs from index.html and needs no install or server command.

Back and Forward move through the pane's navigation history; hold either button to choose a history entry. Refresh becomes Stop while a page is loading. Expand pane gives the page more room without losing its place in the workspace. Bookmark the pane to return to it later.

If a site needs your regular browser, copy its address there. Loading errors and web-pane notices also offer Open in browser. Notices near the address field explain events such as a blocked popup, so you can decide how to proceed.

Form submission limitation

The current web-pane runtime can intercept a JavaScript-handled form submission and navigate before the page's save handler runs. In the example guestbook, this can make Leave a note navigate instead of adding the note.

For saving, reset, and persistence checks, open the project's index.html directly in a regular browser and reload that same page. Storage there is separate from hob's preview. Typing and trying the character counter still work in the pane; a successful counter check does not verify submission. See Testing for the complete recipe.

Keep file previews up to date

A static HTML preview watches its HTML file automatically. When the agent changes a stylesheet or script too, add those files to the watch list:

1. Open the web pane's Pane actions menu.
2. Choose Configure static artifact….
3. Under Reload when these files change, enter one pattern per line, relative to the HTML file's folder, then choose Save.

For the guestbook, use:

style.css
app.js

The settings dialog shows whether live reload is watching folders and whether its push connection is ready. Patterns support **, braces, and character ranges; prefix a pattern with ! to exclude matches. Keep patterns inside the artifact folder, with no more than 64 patterns.

This is useful beyond apps: an agent can generate an HTML report or mockup, open it once, then refine it while you watch the result.

Save a development-server recipe

For a project that needs a server, hob can keep its start command with the preview. First open the server's intended localhost URL, then choose Pane actions → Configure preview server….

Enter the project's real start command and working directory. For example, a project with a dev script in package.json might use npm run dev from its root. The guestbook has no such script and does not need this setup.

Choose Save, then Start when you want hob to run the command. If the address already responds, hob uses that server instead of starting another process on the same port. Leave the command empty when you always manage the server elsewhere, such as in a terminal pane.

For a server started by the pane, open Show server output to read its output. The pane menu offers Stop server, Restart server, and Copy server command. If startup fails, inspect the output and check the command, directory, dependencies, and expected URL.

Saving the recipe preserves how to start the server; it does not preserve a running process across a hob restart. A restored workspace can bring back the preview and its setup, ready for you to resume the work.

Point out what you want changed

Choose Inspect in the web pane header to select an element and leave a note on it. You can copy the collected feedback or use Send To Agent to bring it into an agent conversation. This gives feedback a location: “tighten this spacing” has more meaning when it names the element you selected.

Agents can point in the other direction too. They can read the live page, open a preview, and offer attention links to the detail you should review. See Working with your agent for the character-counter example and the difference between attention, annotations, and walkthroughs.

Choose where links open

The globe control marks a browseable pane: the web pane hob uses as the workspace's target for in-app web navigation. Each workspace has one such target at a time. This is useful when you want incoming links to use a particular pane while another preview stays beside your work.

Mobile View, in the pane menu, shows the page in a narrow mobile viewport. Use it for a quick layout check; it is separate from hob roam, which lets you work away from your desk.

hob pane open web --file index.html --watch 'style.css,app.js'

hob pane open web --url http://localhost:5173 --command 'npm run dev' --cwd . --start

Next