How to Preview a VS Code Project in a Browser

To preview a VS Code project, first identify what you are running:

One static HTML file: open the file with VS Code’s integrated browser.
A web application: start its development server, then open its localhost URL.
A remote project: use the integrated browser’s remote proxy or forward the service port.
A shared preview: forward the running port and choose the required visibility.

These workflows are related but not interchangeable. Opening an HTML file does not start a framework, API, or build process. Port forwarding exposes a service that is already running; it does not start that service.

1. Preview a single HTML file

In VS Code Desktop, open the project folder and locate an .html or .htm file. Right-click it in Explorer and choose Open in Integrated Browser. You can also use the preview action in the editor toolbar. VS Code uses a local file:// URL for this mode, and edits update in real time. See Microsoft’s HTML documentation and integrated browser documentation.

Minimal example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>VS Code preview</title>
  <style>
    body { font:  system-ui; max-width: 42rem; margin: 4rem auto; padding: 0 1rem; }
  </style>
</head>
<body>
  <h1>It works</h1>
  <p>Edit this file and save it to update the preview.</p>
</body>
</html>

This direct method is useful for HTML, CSS, and small client-side JavaScript experiments. It may not work when your page expects an HTTP origin, server-side routes, module loading through a dev server, API proxying, or a framework build step.

2. Run a project that needs a development server

For React, Vue, Angular, Svelte, Next.js, Express, Django, Rails, and similar projects, use the command documented by that project. Common examples are:

# Inspect the available scripts
npm run

# Typical JavaScript project
npm install
npm run dev

# A project whose package.json defines a start script
npm start

Read the terminal output for the actual URL, such as http://localhost:3000 or http://localhost:5173. Then open that URL in VS Code’s integrated browser or in your normal browser. VS Code opens localhost links in its integrated browser by default; its browser toolbar includes Developer Tools. The port number is project-specific.

Run a static server when file URLs are insufficient

If you only have static files but need an HTTP origin, start a static server from the project directory. Microsoft’s port-forwarding example uses npx serve on port 3000; it is an example, not a requirement.

npx serve . -l 3000

Open http://localhost:3000. For a Python installation, the built-in server is another simple option:

python3 -m http.server 8000

Then open http://localhost:8000. Do not use these simple servers as production hosting.

3. Choose the right preview path

Need	What to do	Important limitation
Inspect one HTML file	Open in Integrated Browser	Uses a local `file://` URL
Run a framework or API	Start the project’s development command, then open its localhost URL	The server must already be running
See a remote workspace app	Enable the integrated browser remote proxy or forward its port	Remote proxy is documented as preview functionality
Share a local app	Use Ports view and Forward a Port	Visibility and access control affect who can reach it
Edit code in a browser	Use `vscode.dev`	It does not provide the desktop terminal or debugger

Start your application and confirm which port it listens on.
Open the Ports view in VS Code.
Choose Forward a Port.
Enter the port, or accept the suggested port.
Use the forwarded row’s actions to copy the address, open it in a browser, or open an in-editor preview.

Forwarding makes an existing service reachable through an address; it does not launch your server. Forwarded ports are private by default. If you make one public, anyone with the link may be able to access the service, so avoid exposing confidential data or an unsecured admin interface. Microsoft’s Port Forwarding documentation also states: “By default, both hosting and connecting to a tunnel require authentication with the same GitHub or Microsoft account on each end.”

Remote workspaces

The integrated browser can proxy HTTP and HTTPS requests over a remote connection when workbench.browser.enableRemoteProxy is enabled. Microsoft labels this remote proxy feature as preview functionality. With proxying enabled, localhost links retain the remote URL; without it, they open the forwarded local URL. File URLs are not proxied. Configure it in Settings JSON:

{
  "workbench.browser.enableRemoteProxy": true
}

If the remote service is not reachable, verify that the process is listening on the remote interface and that the correct port is forwarded.

5. Use vscode.dev for browser-based editing

vscode.dev is Microsoft’s zero-install editor for repositories and lightweight changes. It is useful when you need to inspect or edit files from a browser. It is not a replacement for a runtime: the browser editor does not provide the desktop terminal and debugger. For builds, servers, or debugging, use desktop VS Code, Codespaces, or Remote Tunnels.

6. Debug the page after it opens

Open the integrated browser’s Developer Tools to inspect the DOM, console, network requests, and layout. For a fuller debugging session, VS Code supports Edge and Chrome debugging and can debug inside its integrated browser with the editor-browser launch type. Microsoft’s browser debugging guide includes launch configuration examples.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "editor-browser",
      "request": "launch",
      "name": "Open local app",
      "url": "http://localhost:3000"
    }
  ]
}

Replace the URL and launch type with the browser configuration supported by your VS Code version. Set breakpoints in source files, reload the page, and use the Console and Network panels to isolate runtime and loading errors.

7. Capture a repeatable screenshot

For a local preview, use the integrated browser while developing. For a repeatable URL capture in CI, documentation, visual regression checks, or an external review, use a screenshot service after the app is reachable. ScreenshotNeo accepts one GET request and returns PNG, JPEG, WebP, or PDF. It supports full-page captures with lazy images loaded, CSS element selection, custom CSS and JavaScript, waits, device presets, viewport and retina settings, headers, cookies, authentication, blocking rules, caching, asynchronous jobs, bulk capture, and signed webhooks. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

8. Troubleshooting

Symptom	Likely cause	Fix
Open in Integrated Browser is missing	The file is not recognized as HTML, or you are using a remote/virtual resource	Use an `.html`/`.htm` file in VS Code Desktop, or run an HTTP server
Blank page from a file	The app expects an HTTP origin or a build step	Start the project’s dev server or a static HTTP server
localhost refuses the connection	The server stopped, uses another port, or listens in a different environment	Check terminal output, restart it, and open the exact URL
CSS or JavaScript is stale	Cached assets or an unbuilt source change	Save and rebuild, then reload with Developer Tools open
API calls fail in the browser	Wrong base URL, CORS policy, proxy configuration, or unavailable backend	Inspect Network and Console errors; run the required API service and configure the project’s documented proxy
Remote preview cannot connect	Remote proxy is disabled, the port is not forwarded, or the process is local to another machine	Enable remote proxy or forward the remote port; remember that file URLs are not proxied
A forwarded link exposes sensitive data	The port was made public	Return it to private visibility, stop forwarding, and protect the service with authentication
Screenshot shows a consent banner or popup	The capture happened before the page was cleaned or interacted with	Use waits, click actions, hide selectors, or a capture service that handles consent UI

9. Performance, reliability, and cost

Local preview

Keep the dev server running while editing so reloads do not repeat installation or build setup.
Use the framework’s development mode for fast source updates; use a production build when checking final asset behavior.
Record the actual port and environment variables used by the project so another developer can reproduce the preview.

Forwarded services

Forward only the port you need and stop forwarding when finished.
Private visibility limits access; public visibility requires an explicit access decision.
Remote proxying is preview functionality, so keep a port-forwarding path available when reliability matters.

Automated captures

Wait for a selector, a delay, or network idle when content is asynchronous.
Use full-page capture only when you need it; a viewport capture is usually smaller and quicker to process.
Use caching with a chosen TTL for unchanged pages and asynchronous jobs for long or bulk captures.
ScreenshotNeo bills only clean shots. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers.

10. Or skip the browser setup

If you need an image or PDF of a public page rather than an interactive local debugging session, call ScreenshotNeo directly. See the ScreenshotNeo API documentation for options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Replace the URL with the page you want to capture. Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. The MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

11. FAQ

Can I preview a project without installing an extension?

Yes. Static HTML can open in VS Code’s integrated browser. A framework project still needs its normal runtime command.

Does port forwarding start my app?

No. Start the server first, then forward the port it uses.

Why does a file preview differ from localhost?

A file preview uses file://; localhost uses HTTP. Origin rules, module loading, routing, and API behavior can therefore differ.

Can vscode.dev run npm scripts?

The browser editor is for editing and repository work. Use desktop VS Code, Codespaces, or another remote runtime for terminal commands and debugging.

Should I make a forwarded port public?

Only when everyone with the link should access the service and the service is protected appropriately. Private is the default.