Preview Browser

Overview

The Preview Browser is a built-in browser panel that displays your running application right next to your Claude Code session. Instead of switching between CodeMantis and a separate browser window, you can watch changes take effect in real time as Claude Code edits your code.

Automatic Dev Server Detection

When you start a development server in your project (e.g., pnpm dev, npm run dev, python -m uvicorn), CodeMantis automatically detects the local server URL and offers to open it in the Preview Browser. Detection works by monitoring terminal output for common port-binding messages like:

Local: http://localhost:3000

If automatic detection doesn't pick up your server, you can manually enter any URL in the Preview Browser's address bar.

Viewport Presets

The Preview Browser includes viewport presets so you can test responsive layouts without resizing the window:

Select a preset from the toolbar dropdown. The preview panel resizes to match the selected width, and the content renders as it would on that device class. This is especially useful when you're asking Claude Code to build responsive components and want to verify the result immediately.

Console Log Capture

The Preview Browser captures JavaScript console output (logs, warnings, and errors) and displays them in a collapsible panel below the preview. This means you can:

• Spot runtime errors without opening browser DevTools
• See console.log output from your application
• Share console output with Claude Code to help it debug issues

If your application throws an error, the console panel highlights it so you can quickly copy the message into your Claude Code session for troubleshooting.

Opening in an External Browser

Sometimes you need the full capabilities of Chrome or Safari — DevTools, network inspection, extensions, or multi-tab testing. Click the external link button in the Preview Browser toolbar to open the current URL in your default system browser.

Keyboard Shortcuts

Limitations

The Preview Browser is built on a native WebView, not a full browser engine with DevTools. For advanced debugging scenarios — network waterfall analysis, performance profiling, or testing browser-specific behavior — use an external browser.