How to Preview HTML in VS Code with an Extension
Preview HTML while you edit in VS Code with Microsoft Live Preview, Live Server, or the built-in browser. Fix paths, remote workspaces, and refresh issues.
Fastest answer: install Microsoft’s Live Preview extension, open an HTML file, and select the preview button in the editor title bar. Live Preview starts a local server and refreshes the page as you edit. For a local file without an extension, right-click the file and choose Open in Integrated Browser.
Choose the right preview method
| Method | Best for | What it provides |
|---|---|---|
| Live Preview (Microsoft) | Static HTML projects without a server | Local server, embedded or external preview, live refresh, browser developer tools |
| Live Server (Ritwick Dey) | A conventional “Go Live” workflow | Separate browser, live reload, configurable port and root, multi-root support, HTTPS and proxy options |
| Integrated Browser | Opening one local HTML file quickly | Built-in file:// preview with no extension |
| Your framework’s dev server | React, Angular, Vue, Vite, Next.js, and similar apps | Build transforms, routing, dependencies, and framework-specific behavior |
Preview HTML with Microsoft Live Preview
1. Open the project folder
Use File → Open Folder and select the folder that contains your HTML project. Opening the project root is important because Live Preview serves from the workspace root unless you change livePreview.serverRoot. A typical layout is:
my-site/
├── index.html
├── styles.css
└── images/
└── logo.svg2. Install the extension
Open Extensions (Ctrl/Cmd + Shift + X), search for Live Preview by Microsoft, and install it. The Marketplace identifies the extension as ms-vscode.live-server.
3. Open an HTML file
Open index.html or another .html file. Look in the editor title bar for the preview button. You can also right-click the file and choose the Live Preview command, or run its command from the Command Palette (Ctrl/Cmd + Shift + P).
4. Edit and refresh
Live Preview normally reflects edits as you type. To control this, open Settings and search for livePreview.autoRefreshPreview. Set it to refresh while editing, refresh only when you save, or disable automatic refresh. Live Preview can open inside VS Code or in an external browser. Use the integrated browser toolbar to open developer tools when you need to inspect the DOM, console, network requests, or CSS.
Minimal runnable 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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Hello from Live Preview</h1>
<p>Edit this file and watch the preview update.</p>
</main>
</body>
</html>/* styles.css */
body {
font-family: system-ui, sans-serif;
max-width: 42rem;
margin: 4rem auto;
padding: 0 1rem;
line-height: 1.6;
}Use VS Code’s built-in Integrated Browser without an extension
For a local HTML file, right-click the file in Explorer or its editor tab and choose Open in Integrated Browser. You can also use the globe button in the editor toolbar. VS Code opens a file:// URL directly inside its integrated browser.
This route is useful for a single static file, but it does not provide the local HTTP server behavior that some assets, fetch calls, modules, service workers, or application routers require. The file action is unavailable for remote or virtual workspace resources.
Use Live Server instead
Live Server is a separate extension by Ritwick Dey. Launch it by clicking Go Live in the status bar, right-clicking an HTML file and choosing Open with Live Server, or running its Command Palette command.
Choose Live Server when you want a separately opened browser, a familiar Go Live button, or server-oriented controls such as port, server root, HTTPS, proxy, and multi-root workspace settings. Choose Live Preview when you want the preview integrated into VS Code and your project does not already have a development server.
Serve a project yourself when an extension is not enough
Framework applications should normally use their existing development command. For a plain static project, any local HTTP server works. For example, with Python installed:
python3 -m http.server 8000Open http://localhost:8000 in VS Code’s integrated browser or your normal browser. This approach is useful when you need predictable HTTP behavior or a custom build step, but it does not provide Live Preview’s editor integration by itself.
Workspace roots and asset paths
Most “my CSS or images are missing” reports come from opening the wrong folder. If index.html references styles.css, the server root must expose both files at the expected relative paths.
<!-- index.html at the project root -->
<link rel="stylesheet" href="styles.css">
<img src="images/logo.svg" alt="Logo">Open the folder containing index.html as the workspace. If the project has a nested site directory, set livePreview.serverRoot to that directory in VS Code settings. Microsoft’s FAQ notes that files outside the server root may preview while their relative paths fail to resolve correctly.
Remote SSH, containers, and Codespaces
The built-in file:// action is for local resources and is not available for remote or virtual workspace resources. For an HTTP service running remotely, VS Code’s integrated browser can proxy HTTP or HTTPS when remote proxying is enabled.
In Codespaces, check the Ports view for the forwarded URL. Live Preview’s FAQ commonly references forwarded ports 3000 and 3001; open that URL and reopen the preview if it does not appear automatically.
Framework applications
Live Preview is aimed at projects that do not already have a server. For React, Angular, Vue, Vite, Next.js, and similar applications, start the framework’s development server and open its URL in the integrated browser. This preserves bundling, client-side routing, hot module replacement, environment variables, and other framework behavior that a static preview cannot reproduce.
Troubleshooting checklist
| Symptom | Likely cause | Fix |
|---|---|---|
| No preview button | The extension is missing or no HTML file is active | Install Microsoft Live Preview, focus an HTML editor, or use the file context menu/Command Palette. |
| CSS, images, or links return 404 | The workspace root is above or beside the asset directory | Open the project root and verify relative paths; set livePreview.serverRoot when the site is nested. |
| Changes do not appear | Auto-refresh is disabled or set to save-only | Check livePreview.autoRefreshPreview, save the file, or reload the preview. |
| JavaScript errors | A syntax error, blocked module, or wrong URL | Open integrated-browser developer tools, inspect Console and Network, and confirm the page is served over HTTP when modules or fetch are used. |
| SPA route shows 404 after refresh | A static server does not know client-side routes | Use the framework’s development server or configure a server fallback to index.html. |
| Remote preview unavailable | The resource is in SSH, a container, or another virtual workspace | Run an HTTP server remotely and use a forwarded/proxied URL; do not rely on the local-file command. |
| Codespaces preview missing | The port was not forwarded or the preview URL is stale | Forward the running port in Ports, open its URL, then reopen the preview. |
| React/Angular page is blank | The app needs its own build server | Run the project’s documented development command and open that server URL. |
Performance and reliability tips
- Open the smallest workspace that contains the site so file watching has fewer paths to monitor.
- Keep generated folders such as dependency caches and build output outside the watched root when possible.
- Use save-only refresh for large pages or expensive scripts to avoid rerunning the page on every keystroke.
- Use the browser console and network panel to separate a preview problem from an application error.
- Test the production build with its real server before release; an editor preview is a development aid, not a deployment environment.
- For remote workspaces, prefer a forwarded HTTP server and verify that the browser can reach every API and asset origin.
Or skip the browser setup
If you need a repeatable screenshot instead of an interactive editor preview, ScreenshotNeo returns an image or PDF from one GET request. See the ScreenshotNeo API docs for all options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
FAQ
Can I preview HTML in VS Code without installing anything?
Yes. Use Open in Integrated Browser on a local HTML file. It opens a file:// URL and is best for simple local pages.
Which extension is Microsoft’s?
Install Live Preview by Microsoft. It hosts a local server and can show the result inside VS Code or in an external browser.
Is Live Preview the same as Live Server?
No. Both can serve static files and reload changes, but Live Preview emphasizes an integrated VS Code preview while Live Server emphasizes the Go Live workflow and server settings.
Why do relative paths fail?
The server root is usually wrong. Open the folder that contains the HTML entry file, or configure livePreview.serverRoot for a nested site directory.
Should I use an extension for a React or Angular project?
Usually use the framework’s own development server, then open its HTTP URL in VS Code’s integrated browser.
