The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Use the preview that matches your file. Markdown preview is built into Visual Studio Code: open a .md file and run Markdown: Open Preview (Ctrl+Shift+V on Windows/Linux), or open it beside the source with Ctrl+K V. HTML files expose Show Preview in the editor title bar. If you need a local development server that refreshes the browser whenever you save, install Microsoft’s Live Preview extension.
Choose the right VS Code preview
| What you are previewing | Best option | Where the result appears | Automatic updates | Needs an extension? |
|---|---|---|---|---|
| Markdown documentation | Markdown: Open Preview | Editor pane, beside the source or in a separate preview | Yes, while you edit | No |
| A single HTML file | Show Preview | Preview pane or integrated browser | Yes, while the file changes | No for the built-in preview |
| A web page that needs a local server | Microsoft Live Preview | Integrated browser or another browser window | Yes, through live reload | Yes |
| VS Code in a browser at vscode.dev | Markdown preview and browser-capable web extensions | Browser tab or editor surface | Depends on the extension and browser support | Only extensions that support browser execution |
Your choice depends on four questions: is the file Markdown or HTML, does it need server-side behavior, must the page reload automatically, and should the result stay inside VS Code?
Preview Markdown files without installing anything
Open a rendered preview
- Open or save a file whose name ends in
.md. - Press Ctrl+Shift+V on Windows or Linux. You can also open the Command Palette and run Markdown: Open Preview.
- Edit the Markdown source. The rendered pane follows the changes in real time.
To keep the source and rendered document visible together, press Ctrl+K, then V, or run Markdown: Open Preview to the Side. The macOS key equivalents are listed in VS Code’s official keyboard-shortcut reference; use the Command Palette if you do not want to memorize platform-specific keys.
Control which document is shown
A preview can be locked to one document when several Markdown files are open. You can also synchronize scrolling between the source and rendered panes. These controls are useful for long READMEs because the rendered heading you are reading stays aligned with the source you are editing.
#1 Best Overall
Render diagrams and equations
Mermaid diagrams render when they are placed in a mermaid fenced code block. Mathematical notation is rendered with KaTeX. If a diagram or equation does not appear, first check that the fence language is exactly mermaid and that the Markdown syntax is valid before changing preview settings.
Understand Markdown preview security
Markdown preview starts in Strict security mode. Scripts are disabled and images served over HTTP are blocked. This prevents arbitrary active content from running while you read a document, but it can make a locally authored example look incomplete.
For a trusted workspace, open the preview security control or run Markdown: Change preview security settings to choose a different policy. Only relax the policy for files and workspaces you trust; changing it can allow content in the rendered document to execute or load.
Preview an HTML file with VS Code’s built-in command
Use Show Preview
- Open an
.htmlor.htmfile. - In the editor title bar, select Show Preview.
- Change the HTML, CSS, or inline JavaScript and watch the preview update in real time.
This is the quickest route for a static page: you do not need to configure a project or start a separate server. The preview is intended for inspecting the page you are editing, not for reproducing every production hosting condition.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Rank #2
Open the file in the integrated browser
VS Code can display local HTML and HTM files in its integrated browser. This gives you a browser surface inside the editor while keeping the project and source tree in the same application. If you need normal browser developer tools, extensions, or a separate window, open the local file in your regular browser instead.
Get live reload with Microsoft Live Preview
Install and start the extension
- Open the Extensions view in VS Code.
- Search for Live Preview and install the extension published by Microsoft.
- Open your project’s
index.html. - Right-click in the editor and choose Show Preview.
Live Preview launches a local development server with live reload for static and dynamic pages. When you change your code, the browser automatically refreshes to show the latest version. This is preferable to opening a file directly when your page relies on a predictable local URL or references multiple assets.
Choose where Live Preview opens
Live Preview can use VS Code’s integrated browser. Enable the livePreview.useIntegratedBrowser setting when you want the preview to stay inside the editor. Leave it disabled when you prefer the system browser. The extension’s Show Preview command remains the entry point in either case.
When a server is actually necessary
- Use the built-in HTML preview for a quick check of one file.
- Use Live Preview when you want a local development server and automatic browser refresh.
- Use your project’s own development server when the application depends on a framework, backend routes, or build steps that Live Preview does not provide.
Previewing in vscode.dev
VS Code for the Web supports Markdown preview, and its HTML and CSS language experiences are close to the desktop edition. Browser limits still apply: the terminal and debugger are unavailable, and only extensions that support browser execution can run. That means Markdown preview is a reliable choice in vscode.dev, while a server-based HTML workflow depends on whether the required extension and project can operate in the browser.
A practical workflow for a small web page
- Create a folder and open it with File > Open Folder.
- Add
index.html, a stylesheet, and any images or scripts your page references. - Start with the file’s Show Preview action to verify markup and basic styling.
- Install Microsoft Live Preview if you need a local URL and automatic refresh as you edit.
- Enable
livePreview.useIntegratedBrowserif keeping the page inside VS Code is more convenient. - Before sharing the page, test it in the browser you support; an editor preview is not a substitute for production hosting or cross-browser testing.
Troubleshoot a preview that is missing or stale
There is no Markdown preview
Confirm that the file is saved with a .md extension and that you are running the Markdown command on the active editor. If the keyboard shortcut does nothing, use the Command Palette and search for Markdown: Open Preview; keybindings can be customized or unavailable on a different platform.
The HTML Show Preview action is not visible
Make sure the active file ends in .html or .htm. Reopen the file if the editor was opened before the language mode was recognized, then look again in the editor title bar. For a project that needs a server, install Microsoft Live Preview and use its right-click Show Preview command.
Markdown content is blank or images do not load
Strict security disables scripts and blocks HTTP images by design. Replace an HTTP image with an HTTPS or local asset when possible. If the workspace is trusted and you understand the risk, use the preview security control or Markdown: Change preview security settings.
The page does not refresh after an edit
Use Live Preview when you require live reload rather than relying on a direct file view. Confirm that the Microsoft extension is installed and that you launched its Show Preview command from the HTML editor. If you are using the integrated browser, verify the livePreview.useIntegratedBrowser setting and reopen the preview.
Mermaid or math is shown as plain text
For Mermaid, use a fenced block whose language tag is exactly mermaid. For equations, check the Markdown notation and surrounding delimiters. Preview support does not correct malformed source.
You are working in vscode.dev and expect a terminal
The web edition does not provide the desktop terminal or debugger. Move the project to desktop VS Code, or use a browser-capable extension and a development workflow that does not require those unavailable services.
Performance, reliability, and cost considerations
Markdown preview and the basic HTML preview are built into VS Code, so there is no separate service charge. Their main limits are the document’s own content and the browser surface in which you open it. Live Preview adds a local server and reload cycle, which is useful during editing but should not be treated as a deployment environment.
For repeatable checks, keep assets in the workspace, use consistent relative paths, and choose one preview mode for the team. The integrated browser reduces context switching; an external browser is useful when you need browser-specific inspection. In vscode.dev, plan around the absence of terminal and debugger support before choosing a server-dependent workflow.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Or skip the browser setup
If your goal is a clean image or PDF of a public page rather than an interactive editor preview, ScreenshotNeo provides a website screenshot API and MCP server. It accepts one GET request and can return PNG, JPEG, WebP, or PDF. Before capture it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled.
Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and each response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
One-call examples
See the full parameter reference in the ScreenshotNeo documentation. Replace the URL with the page you need to capture.
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 also supports full-page captures with lazy images loaded, CSS-selector element captures, dark mode, 12 device presets or any viewport, retina scale, PDF paper and margin controls, custom CSS and JavaScript, clicks before capture, hidden selectors, waits for selectors, delays or network idle, request and resource blocking, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, resizing, selectable cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, a usage API, and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify a migration.
The Free plan includes 1,000 shots each month with no card. Paid plans start at $5 for 3,000 shots; Growth is $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is included on every plan. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; and the MCP server lets AI agents take screenshots. Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I preview Markdown and its source at the same time?
Yes. Run Markdown: Open Preview to the Side, or use Ctrl+K V on Windows/Linux.
Does Live Preview replace a framework’s development server?
No. It provides a local server and live reload for pages you open through its Show Preview command; framework projects may still require their own tooling.
What is the difference between the integrated browser and an external browser?
The integrated browser keeps local HTML inside VS Code. An external browser is separate and is useful when you need browser-specific inspection or extensions.
Recommended Free Tools
Can vscode.dev run every desktop VS Code extension?
No. Only extensions that support browser execution can run, and the web edition has no terminal or debugger.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
