How to Preview HTML in Visual Studio
Preview a standalone HTML file or running web app in Visual Studio, choose a browser, debug it, and fix missing preview commands.
Direct answer: Open the .html file in Visual Studio, focus its editor, then choose File > View in Browser. In Visual Studio 2022, the shortcut is Ctrl+Shift+W. You can also right-click the editor and choose View in Browser. To select a different browser, use File > Browse With… and make your choice the default.
This workflow previews one file. If your HTML belongs to an ASP.NET or another web project, start the project with its configured run target instead. Visual Studio builds and starts the application, launches the selected browser, and opens the configured localhost URL.
Preview a standalone HTML file
- Create or open a file whose name ends in
.html, such asindex.html. - Click inside the HTML editor so that document has focus.
- Choose File > View in Browser, press Ctrl+Shift+W, or right-click empty space in the editor and select View in Browser.
- Visual Studio opens the file in the selected browser. Save the file and run the command again when you need to refresh the preview.
A minimal file you can use to verify the workflow is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Visual Studio preview test</title>
<style>
body { font: 16px system-ui, sans-serif; margin: 3rem; }
.status { color: #176b3a; font-weight: 600; }
</style>
</head>
<body>
<h1>HTML preview works</h1>
<p class="status">Rendered by the browser launched from Visual Studio.</p>
</body>
</html>Choose which browser opens the file
- Open the HTML document in Visual Studio.
- Choose File > Browse With….
- Select an installed browser.
- Set it as the default for this command if Visual Studio offers that option, then click Browse.
The browser preview uses normal browser rendering. It does not provide a special HTML designer, automatic reload, or a server for APIs and routes.
Preview a web application instead of one file
Use the project run target when the page depends on server-side code, routing, authentication, API calls, Razor, MVC, Web Forms, or a build step.
- Open the solution and select the web project in Solution Explorer.
- Choose the configured run target and browser from the toolbar.
- Press F5 to build, start, and debug, or Ctrl+F5 to run without the debugger.
- Visual Studio launches the browser at the application’s configured URL, commonly a
localhostaddress.
This path serves files through the application’s development server. Use it when opening file:// directly would give the wrong result because of relative paths, server routing, CORS, cookies, authentication, or backend requests.
Debug the page in the browser
For JavaScript debugging, start the project with the debugger and attach to the selected browser when prompted. You can then set breakpoints, inspect variables, and read console output. Browser developer tools remain useful for layout, network requests, accessibility, and runtime errors.
Know which Visual Studio preview feature you need
| What you are previewing | Use this workflow | What it does |
|---|---|---|
One standalone .html file |
View in Browser | Opens that file in an installed browser. |
| ASP.NET or another web project | Project run target | Builds and starts the app, then opens its configured URL. |
Markdown (.md) |
Markdown editor Preview or Shift+F7 | Shows processed Markdown HTML; it is not the HTML-file preview command. |
| HTML Toolbox controls | HTML designer | Provides designer editing tools when a document is open in that designer. |
| Web Forms live editing | Built-in Web Forms Designer in current Visual Studio releases | Web Live Preview was removed in Visual Studio 2026 release notes. |
When View in Browser is missing
Work through this checklist in order:
- Focus the editor: click inside the HTML document before opening the File menu or context menu.
- Check the extension: confirm the file is really
.html, rather than.txtwith HTML content. - Open the document directly: commands can differ when focus is on Solution Explorer, a designer, Markdown, or another editor.
- Check your Visual Studio version: the Microsoft Q&A workflow documents Visual Studio 2022, and command visibility can vary by installation.
- Use the project run target: if the file belongs to a web app, start the project instead of trying to open a loose file.
- Verify a browser is installed: use Browse With… to see available browser choices.
Common preview problems and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| The command is not visible | The editor is not focused, the extension is wrong, or the Visual Studio version differs. | Focus the .html editor, confirm the extension, and check the installed version. |
| CSS or images do not load | Relative paths resolve from a different location, or the file was moved. | Check paths such as css/site.css and images/logo.png; inspect the browser console and network panel. |
| JavaScript fetch calls fail | A file:// page does not provide the same origin or server behavior as your app. |
Run the web project through its configured server and use its localhost URL. |
| Client-side routes return 404 | The development server is not configured to fall back to the app entry point. | Start the project and configure its route fallback; opening the HTML file directly cannot supply server routing. |
| Changes are not visible | The browser has a cached resource or the file was not saved. | Save the file, reload the page, and use a hard reload in browser developer tools when needed. |
| Breakpoints never bind | The script loaded from a different path, a source map is missing, or the page was opened outside the debug session. | Start with F5, verify the script URL, and inspect the browser’s Sources panel. |
| Markdown preview shows HTML but the HTML command is absent | Markdown and HTML have separate editor commands. | Use the Markdown Preview button or Shift+F7 for .md; use View in Browser for .html. |
Preview considerations for reliable development
Use the right environment
A standalone preview is fast for static markup, local CSS, and simple scripts. A running project is more reliable for anything involving a server, environment variables, authentication, cookies, generated assets, API calls, or route handling.
Check responsive layouts
Resize the browser window and use its device emulation tools to inspect narrow and wide viewports. Test at the breakpoints your CSS actually defines rather than relying on one desktop width.
Inspect failures instead of guessing
Use the browser console for JavaScript exceptions, the Network panel for missing resources and HTTP responses, and the Elements panel for computed styles. A blank page can be a runtime exception, an incorrect path, or a server response problem.
Keep previews repeatable
- Keep assets in predictable folders and use consistent relative paths.
- Use a project run target when the page requires a server.
- Record the browser and Visual Studio version when reporting a preview issue.
- Use a clean browser profile or private window when cookies and cached assets affect the result.
Or skip the browser setup
If you need a rendered image of a page rather than an interactive development preview, ScreenshotNeo provides a single GET request for a PNG, JPEG, WebP, or PDF. Its options include full-page capture with lazy images loaded, CSS-selector element capture, device presets or custom viewports, dark mode, retina scale, custom CSS and JavaScript, waits, request blocking, headers, cookies, user agents, timezone, geolocation, caching, signed links, asynchronous jobs, bulk capture, and PDF controls. See the ScreenshotNeo API documentation for the complete parameter list.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
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(`HTTP ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', buffer);ScreenshotNeo accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, CAPTCHAs, 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 exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 shots per month without a card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free. Create a free ScreenshotNeo account.
FAQ
What is the shortcut to preview HTML in Visual Studio?
For a focused standalone HTML editor in Visual Studio 2022, press Ctrl+Shift+W.
Can I preview HTML without creating a project?
Yes. Open the .html file and use View in Browser. Create or run a project only when you need server behavior.
Why does my HTML look different in Visual Studio and the browser?
Visual Studio edits the document; the installed browser performs the rendering. Browser zoom, extensions, cached files, viewport size, and missing assets can change the result.
Is Web Live Preview available in Visual Studio 2026?
No. Visual Studio 2026 release notes say it was deprecated and removed; Web Forms users are directed to the built-in Web Forms Designer.
Should I use Markdown Preview for an HTML file?
No. Markdown Preview and Shift+F7 are for .md documents. Use View in Browser for .html.
