Preview Browser

The preview browser gives you a built-in web browser panel for testing your apps, complete with device emulation, Chrome DevTools, and element inspection.

Tab Management

Manage multiple preview tabs like a regular browser:

Create tabs - Cmd+T opens a new blank tab
Close tabs - Cmd+W closes the active tab
Switch tabs - Cmd+1-9 jumps to numbered tabs
Reorder tabs - Drag tabs to rearrange

Tab Types

Manual tabs - Created by user
Server tabs - Auto-created when dev server detected (linked to terminal)

Tab Indicators

Favicon from page
Page title (updates on navigation)
Loading spinner during page load
Green pulsing dot on tabs connected to running dev servers

Smart URL Bar

The URL bar understands what you want to navigate to:

Input	Result
`localhost:3000`	`http://localhost:3000`
`127.0.0.1:5000/api`	`http://127.0.0.1:5000/api`
`example.com`	`https://example.com`
`search query`	Google search

Shortcuts:

Cmd+L - Focus URL bar and select all text
Enter - Navigate to entered URL
Escape - Cancel editing

Device Preview Modes

Test responsive designs with realistic device frames:

Mode	Viewport	Features
Desktop	Full-width	White background
Tablet	820×1093	iPad frame with status bar
Phone	390×844	iPhone frame with status bar

Device frame details:

Rounded corners
Black bezel
Status bar with real time
Home indicator pill

Device mode is saved per project.

Embedded DevTools

Full Chrome DevTools available inline:

Opening DevTools

Cmd+Option+I - Toggle DevTools panel
Click the DevTools button in toolbar

Position Options

Bottom - DevTools below preview (good for wide screens)
Right - DevTools beside preview (good for tall screens)

Features

Full Elements, Console, Network, Sources panels
Element inspection
Live CSS editing
JavaScript console
Network request monitoring

Element Picker

Inspect page elements without opening DevTools:

Click the element picker button (crosshairs icon)
Hover over elements - they highlight as you move
Click to select an element
View element details in popover

Element Info Captured

Tag name
ID and CSS classes
Unique CSS selector
Text content preview
Element dimensions

Console Capture

Browser console logs are captured for debugging:

Log Levels: log, warn, error, info, debug

Logs captured per tab (max 100 entries)
Automatically cleared when page reloads
Available via MCP for Claude integration

Server Detection Integration

Preview automatically connects with detected dev servers:

Terminal detects server on port
Preview creates a new tab linked to that terminal
Tab shows green indicator while server is running
Tab auto-navigates to server URL