Preview HTML in the Browser with VS Code
Preview local HTML in VS Code with the built-in Integrated Browser, then use Live Preview for a local server and live reload.
Fast answer: Open your HTML file in VS Code, right-click it in the Explorer, and choose Open in Integrated Browser. You can also select the Show Preview icon in the editor title bar. The preview updates as you edit the file. Microsoft documents this built-in workflow in its HTML in Visual Studio Code guide.
Preview a local HTML file with VS Code
- Open the folder containing your HTML file in VS Code.
- Open
index.htmlor another HTML file. - In the File Explorer, right-click the file and select Open in Integrated Browser.
- Alternatively, with the file active, click Show Preview in the editor title bar.
- Edit the HTML or CSS and watch the integrated preview update.
If you do not see the command, open the Command Palette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS) and run Browser: Open Integrated Browser. You can also open it from View > Browser or the title-bar globe button. See Microsoft’s Integrated browser documentation for the available entry points.
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-family: system-ui, sans-serif; margin: 3rem; }
.card { max-width: 32rem; padding: 2rem; border: 1px solid #ddd; border-radius: 12px; }
</style>
</head>
<body>
<main class="card">
<h1>Hello from HTML</h1>
<p>Edit this file and watch the preview refresh.</p>
</main>
</body>
</html>Integrated Browser versus Live Preview
| Option | Setup | Behavior | Best fit |
|---|---|---|---|
| Built-in Integrated Browser | Open the file from the Explorer, editor tab, or preview icon | Renders a local HTML file and updates while you edit | Quick inspection of one HTML file |
| Microsoft Live Preview extension | Install the extension, then choose Show Preview | Runs a local development server with live reload for static and dynamic pages | A multi-page site or app that needs server behavior |
The basic preview does not require Live Preview. Microsoft’s getting-started tutorial describes Live Preview as an optional extension for a local server and live reload.
When a server is necessary
Opening a file directly is enough for plain HTML, CSS, and JavaScript that does not depend on server features. Use a local server when your app relies on relative fetch requests, ES modules affected by browser security rules, URL routing, server-side rendering, or backend endpoints. Live Preview can provide that server for static and dynamic pages.
To make Live Preview use VS Code’s integrated browser, enable livePreview.useIntegratedBrowser in Settings. The setting and browser behavior are documented by Microsoft in the Integrated browser guide.
Useful preview controls and workflow tips
- Preview from the editor: Keep the HTML tab active and select Show Preview.
- Preview from the Explorer: Right-click any HTML file and select Open in Integrated Browser.
- Open a URL: Use Browser: Open Integrated Browser from the Command Palette.
- Check localhost links: VS Code opens localhost links in the integrated browser by default when selected from the terminal, chat, or other VS Code areas.
- Use browser developer tools: For layout, console, and network debugging, open the integrated browser’s developer tools if available in your VS Code build, or open the same local URL in a full browser.
- Test responsive layouts: Resize the integrated browser and inspect breakpoints at the viewport widths your users need.
Previewing CSS, JavaScript, images, and multiple pages
Linked CSS and JavaScript
Keep paths relative to the HTML file or project root:
<link rel="stylesheet" href="css/site.css">
<script type="module" src="js/app.js"></script>If a stylesheet or script does not load, inspect the path and filename casing. A path that works on a case-insensitive filesystem can fail in deployment or on Linux.
Images and fonts
Use project-relative URLs such as images/hero.webp. Keep local font files under the project and verify their network requests in developer tools. Broken assets usually indicate an incorrect relative path, a missing file, or a server requirement.
Multiple pages
Open each page directly from the Explorer, or run Live Preview from the project so links such as /about.html and /contact.html resolve consistently. For client-side routing, use a local server and configure fallback behavior appropriate to your framework.
VS Code Desktop versus VS Code for the Web
The Integrated Browser workflow is documented for VS Code Desktop. VS Code for the Web runs inside a browser and has no terminal or debugger; it also supports only a subset of extensions. If your preview depends on a local runtime, terminal command, debugger, or unsupported extension, use VS Code Desktop or a remote development environment.
Troubleshooting
“Open in Integrated Browser” is missing
Update VS Code, confirm an HTML file is selected, and try Browser: Open Integrated Browser from the Command Palette. Direct local HTML preview behavior depends on your VS Code version; Microsoft’s release notes describe the feature in version 1.121 and the Integrated Browser as an earlier preview feature in version 1.109.
The preview does not update
Save the file, close and reopen the preview, and check whether an extension or framework build step generates the file you are viewing. If the project needs a server, use Live Preview instead of opening the file directly.
JavaScript modules or fetch requests fail
Browsers restrict some operations from file:// URLs. Start a local server with Live Preview and open the resulting localhost URL. Also verify that the requested path and port are correct.
Styles or images are missing
Inspect the browser’s network requests. Correct relative paths, filename casing, and URL encoding. A page opened from a nested directory may need ../ in its asset paths.
The page is blank
Open developer tools and check for HTML parsing errors, JavaScript exceptions, blocked resources, or a failed framework build. Replace the page temporarily with a minimal HTML document to isolate whether the problem is the editor preview or the application code.
Live Preview cannot start
Confirm the Microsoft Live Preview extension is installed and enabled, then check whether another process already uses its port. Open the extension output panel for the exact server error. A restricted VS Code Web session may not support the required runtime or extension.
Performance and reliability checklist
- Keep large generated assets outside the page while diagnosing layout so refreshes stay quick.
- Use a local server for realistic routing, module loading, and API calls.
- Check both a clean reload and a refresh after editing CSS or JavaScript.
- Test at narrow and wide viewport sizes before calling the page finished.
- Use browser developer tools to identify slow images, fonts, scripts, and failed requests.
- For repeatable previews, keep the project’s entry page and server command documented in its README.
Or skip the browser setup
If you need a screenshot of a public page or rendered build instead of an interactive local preview, ScreenshotNeo provides a website screenshot API. See the ScreenshotNeo documentation for request 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 the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server lets AI agents take screenshots, inspect pages, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
FAQ
How do I preview HTML in VS Code?
Right-click the HTML file and choose Open in Integrated Browser, or select Show Preview in the editor title bar.
Do I need Live Server or Live Preview?
No for a basic local HTML file. Use Microsoft’s Live Preview extension when you need a local development server and live reload across a site or app.
Can I preview HTML in VS Code for the Web?
VS Code for the Web has terminal, debugger, and extension limitations. Use Desktop or a remote environment when your workflow needs those capabilities.
Why does my page work in a browser but not in the preview?
Check whether the page requires a server, whether asset paths are correct, and whether scripts or requests are blocked from a file:// URL. Live Preview usually resolves server-dependent issues.
