Browser Previews

See Your App Live with Browser Previews

Browser Previews in Windsurf help you view and interact with your local web applications directly in the editor or your preferred browser. This feature is designed to make UI development and iteration faster.

Key Features:

• • View Local Deployments: See your app as it runs locally.
• • Contextual Interaction: Send UI elements and errors directly to Cascade for quicker edits and debugging.
• • Rapid Iteration: Avoid ambiguous natural language descriptions by selecting elements visually.

How to Start a Preview:

1. 1. Conversational Prompt: Ask Cascade, e.g., "Run this application".
2. 2. Manual Trigger: Use the browser preview tool icon located beneath the chat prompt.

Cascade will infer the necessary commands (like npm start) to launch your application.

Interacting with Previews:

• • Element-Specific Edits: Select an element in the preview (e.g., a button or image) and send it to Cascade with your change request (e.g., "change the color of this element"). Cascade will then propose the code changes.
• • Debugging Assistance: Previews help identify and debug errors by providing context to Cascade.
• • Data Flow Understanding: Useful for understanding how components interact with the backend.

In short, Browser Previews streamline front-end development by enabling more direct and efficient communication with the AI.

Responsive Testing: Test your application at different screen sizes.

Console Access: View browser console logs and errors.

Network Monitoring: Monitor network requests and responses.

DevTools Integration: Access browser developer tools within the preview.

Best Practices

• • Keep preview window open while developing for immediate feedback
• • Use responsive mode to test mobile layouts
• • Monitor console for JavaScript errors
• • Refresh preview if changes don't appear automatically

Common Use Cases

Frontend Development: Preview React, Vue, or Angular applications.

Static Sites: View HTML, CSS, and JavaScript projects.

API Testing: Test API endpoints with simple HTML interfaces.

Documentation: Preview documentation sites and markdown content.

Browser Previews streamline your development workflow by keeping everything within Windsurf.