How to Preview Code in Visual Studio Code

Visual Studio Code has a preview workflow for each common file type:

Markdown: use the built-in rendered preview with Ctrl+Shift+V, or open it beside the source with Ctrl+K, V on Windows and Linux.
HTML: open the file and choose Show Preview from the editor title bar, or open the file in VS Code’s integrated browser.
Live web editing: install Microsoft’s Live Preview extension. It starts a local development server and refreshes the page when you save changes.

The best choice depends on whether you are previewing a document, a standalone HTML file, or a web project that needs a server.

Preview Markdown files

Markdown preview is built into VS Code; no extension is required.

Open a file whose name ends in .md.
Run Markdown: Open Preview from the Command Palette (Ctrl+Shift+P).
For a split view, run Markdown: Open Preview to the Side.

On Windows and Linux, Ctrl+Shift+V toggles the preview and Ctrl+K, V opens it to the side. macOS uses the equivalent shortcuts shown in VS Code’s keyboard shortcut reference.

Example Markdown file

# Release notes

This is a **live Markdown preview**.

- Fast to review
- No local web server required

```mermaid
graph TD
  A[Edit Markdown] --> B[Preview]
```

Inline math can use KaTeX syntax, for example: $E=mc^2$.

The preview can render Mermaid diagrams in mermaid fenced blocks and mathematical notation with KaTeX. You can lock the preview to a document and synchronize scrolling between the source and rendered pane.

Preview security

Markdown preview uses Strict security by default. Scripts are disabled and images loaded over HTTP are blocked. If a trusted project needs different behavior, use the preview security control or run Markdown: Change Preview Security Settings. Only change this for content you understand and trust.

Preview an HTML file

For a single static page, VS Code can render the file directly.

Open index.html (or another .html/.htm file).
Select Show Preview in the editor title bar.
Edit and save the HTML, CSS, or inline JavaScript. The preview updates as the file changes.

You can also open local HTML files in VS Code’s integrated browser. This is useful when you want the page and your editor in one application.

Runnable HTML 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 test</title>
  <style>
    body { font: 16px system-ui; max-width: 42rem; margin: 3rem auto; padding: 0 1rem; }
    .status { color: #087f5b; }
  </style>
</head>
<body>
  <h1>Preview is working</h1>
  <p class="status">Edit this file and save it to see the change.</p>
  <button id="time">Show time</button>
  <script>
    document.querySelector('#time').addEventListener('click', () => {
      document.querySelector('.status').textContent = new Date().toLocaleTimeString();
    });
  </script>
</body>
</html>

Use Live Preview for a local web server and live reload

Use Microsoft’s Live Preview extension when the page needs a local development server, relative asset paths, or automatic browser refresh. Install the extension published by Microsoft, open index.html, then right-click the file and choose Show Preview. Live Preview launches a local server; when you change the code, the browser refreshes.

You can choose VS Code’s integrated browser by enabling livePreview.useIntegratedBrowser in settings.

{
  "livePreview.useIntegratedBrowser": true
}

Use a server instead of opening file:// URLs when your page uses modules, fetch requests, service workers, or paths that depend on a site root.

Recommended project layout

my-site/
├── index.html
├── css/
│   └── site.css
├── js/
│   └── app.js
└── images/
    └── logo.svg

Open the project folder in VS Code, then start Live Preview from index.html. Keep asset references relative to the project root:

<link rel="stylesheet" href="css/site.css">
<script type="module" src="js/app.js"></script>

Choose the right preview workflow

Goal	Use	Server required?	Refresh behavior
Read a Markdown document	Built-in Markdown preview	No	Updates while editing
Check one static HTML file	HTML Show Preview	No for simple files	Updates while editing
Test a web project	Microsoft Live Preview	Yes, local server included	Browser refreshes after changes
Use browser-only VS Code	`vscode.dev` preview features	Browser dependent	Depends on the supported extension

VS Code for the Web supports Markdown preview and many HTML/CSS editing features, but browser constraints mean the desktop terminal and debugger are unavailable, and only extensions that support browser execution can run.

Preview Markdown and HTML side by side

For Markdown, open the preview to the side with Ctrl+K, V. For HTML, open Show Preview, then drag the preview editor into a second editor group if you want source and output visible together. Keep the preview open while editing to catch broken links, missing styles, and layout changes early.

Common problems and fixes

There is no Markdown preview

Cause: the file is not recognized as Markdown or is unsaved with another extension.

Fix: save it with a .md extension, check the language mode in the status bar, and run Markdown: Open Preview from the Command Palette.

Show Preview is missing for HTML

Cause: the active editor is not an HTML file, or the file is opened outside the workspace in a way that prevents the preview command from appearing.

Fix: save the file as .html, select it in the Explorer, and reopen it. For a project with multiple assets, start Live Preview from index.html.

CSS or images do not load

Cause: the relative path is wrong, the filename case differs, or the page was opened as a file:// URL while expecting a server root.

Fix: verify paths relative to the HTML file, match case exactly, and use Live Preview for projects that need a local server.

JavaScript modules fail

Cause: browsers restrict some module and fetch behavior on file:// pages.

Fix: serve the project through Live Preview and use <script type="module"> with a correct relative path.

Markdown images are blocked

Cause: Strict Markdown preview security blocks HTTP images.

Fix: use HTTPS or a local image, or change the preview security setting only in a trusted workspace.

Live Preview does not refresh

Cause: the wrong file is being served, the extension is not running, or the browser tab is disconnected.

Fix: stop and restart Show Preview, confirm that index.html is the entry point, save the file, and check the Output panel for extension errors.

The integrated browser is unavailable

Cause: the setting is disabled or the environment cannot run the integrated browser.

Fix: set livePreview.useIntegratedBrowser to true, reload VS Code, or open the preview in your normal browser.

Performance and reliability tips

Use the built-in Markdown preview for documentation; it avoids starting a server.
Use Live Preview for projects with many assets or client-side routing so paths behave like a website.
Keep generated files and large dependency folders outside the files watched by the preview where practical.
When a page depends on an API, verify that the API allows requests from the local origin and that authentication is configured safely.
Check both desktop and narrow viewport layouts in the preview before sharing a page.
Remember that a local preview proves your local files render; it does not prove that a deployed site has the same headers, redirects, fonts, or production data.

Or skip the browser setup

If you need a repeatable screenshot for documentation, tests, previews, or an AI workflow, ScreenshotNeo captures a URL with one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing result.

ScreenshotNeo also provides an MCP server for Claude, Cursor, and other MCP clients, with take_screenshot, get_page_info, and capture_pdf tools.

See the ScreenshotNeo API documentation for the full option set.

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(`HTTP ${res.status}`);
const data = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', data));

Useful capture options

ScreenshotNeo supports full-page capture with lazy images loaded, CSS element capture, dark mode, device presets or custom viewports, retina scale, PDF paper sizes and page ranges, custom CSS and JavaScript, clicks, selector waits, delays, network-idle waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, caching with a chosen TTL, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, and a usage API. Parameters used by other screenshot APIs also work, which helps when switching.

The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan. Create a free ScreenshotNeo account.

FAQ

Can VS Code preview CSS by itself?

CSS needs a document to render. Open an HTML file with Show Preview or use Live Preview for a page that links the stylesheet.

Does Markdown preview execute JavaScript?

Not under the default Strict security policy. Scripts are disabled, and HTTP images are blocked.

Do I need Live Preview for every HTML file?

No. Simple standalone files can use Show Preview. Use Live Preview when you need a local server, automatic browser reload, modules, fetch requests, or project-style paths.

Can I use preview in vscode.dev?

Yes, Markdown preview is available and HTML/CSS support is close to desktop VS Code, but terminal, debugger, and extension support are limited by the browser environment.

For a local review, share the source or a hosted URL. For a repeatable image or PDF from a URL, use ScreenshotNeo so the capture settings and billing verdict are returned with the response.