How to Take Screenshots and Render HTML/CSS with VS Code

To render a local HTML page in VS Code, open the HTML file and use Open in Integrated Browser or its Show Preview control. The preview reflects edits to the HTML. For automatic reload while you edit HTML and CSS, install Microsoft’s Live Preview extension, open index.html, right-click it, and choose Show Preview. To capture what you see, use Add Screenshot to Chat for the current viewport or Add Area Screenshot to Chat to select a rectangle. The full-page capture command is experimental.

This guide covers the desktop VS Code workflow, CSS and asset paths, Markdown preview, screenshots, browser-based VS Code limitations, and fixes for common problems. The exact labels and availability of experimental commands may vary by VS Code release.

1. Choose the right VS Code preview

Your goal	Use	What it does
Inspect a local HTML file	Integrated Browser	Renders the HTML in a browser view inside VS Code.
See HTML and CSS edits reload	Microsoft Live Preview	Runs a local development server with live reload for static and dynamic pages.
Preview Markdown or documentation	Built-in Markdown preview	Shows rendered Markdown, with side-by-side preview and custom stylesheet support.
Edit in a browser	VS Code for the Web	Supports editing HTML and CSS and Markdown preview, with browser-sandbox limitations.

For a web project that uses a local server, JavaScript debugging, or extensions that need desktop capabilities, use desktop VS Code. VS Code for the Web runs in a browser sandbox; its terminal and debugger are not available in the same way as desktop.

2. Render an HTML file in the Integrated Browser

1. Open your project folder in desktop VS Code.
2. Open the HTML file you want to inspect, such as index.html.
3. Open the file’s preview with Open in Integrated Browser or click Show Preview if that control is shown.
4. Keep the preview open while you edit. Save the file and check the rendered result.

The Integrated Browser renders the page using ordinary HTML and CSS rules. A linked stylesheet such as <link rel="stylesheet" href="styles.css"> is resolved relative to the HTML file’s location. Verify the spelling, capitalization, and relative path of both files before diagnosing a browser rendering issue.

A minimal example you can render is:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Preview test</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="card">
    <h1>Hello from VS Code</h1>
    <p>This page is rendered from a local HTML file.</p>
  </main>
</body>
</html>

/* styles.css */
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f2f5fa;
  color: #182230;
  font: 16px/1.5 system-ui, sans-serif;
}
.card {
  max-width: 34rem;
  padding: 2rem;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 1rem 3rem #18223018;
}

Save both files, then inspect the preview. If your actual project depends on server-side routes, build steps, or a framework dev server, launch that project’s documented server and preview its local address instead of treating a source HTML file as the complete application.

3. Add live reload for HTML and CSS

Microsoft’s Live Preview extension starts a local development server and supports live reload for static and dynamic pages. Install Live Preview by Microsoft from the VS Code extension view or Marketplace, then:

1. Open the project folder, not just a loose file, so relative assets resolve in their project context.
2. Open index.html in the editor.
3. Right-click in the editor or on the file and choose Show Preview.
4. Edit and save the HTML or CSS, then check that the preview reflects the change.

Use the extension’s preview when you want a local server and reload loop. If a reload does not happen, first save the edited file and verify that the preview points at the expected project file. Then check the extension is installed and enabled, and inspect the output or notifications for a server startup error. Avoid assuming a framework’s routes or build output are served by a plain static preview; use the framework’s own development server for that case.

4. Take a screenshot of the preview

VS Code’s Integrated Browser includes screenshot actions that capture the rendered page. The documented viewport action is Add Screenshot to Chat; it captures the current browser viewport and attaches it to the chat workflow. Use Add Area Screenshot to Chat when you want to select a rectangular portion of the visible browser.

1. Open the rendered page in the Integrated Browser.
2. Set the browser panel to the size and scroll position you want represented.
3. Run Add Screenshot to Chat for the current viewport, or Add Area Screenshot to Chat and select an area.
4. Review the resulting capture in the chat context.

These documented commands describe capturing and attaching screenshots. They do not establish a separate standalone image-file export workflow, so don’t rely on a particular save dialog, destination, or file format without checking the behavior in your installed VS Code release. If you need an image file, use a screenshot/export workflow that explicitly provides one.

Full-page capture

Full-page capture includes content beyond the current viewport, but the Integrated Browser command is experimental. Enable workbench.browser.experimentalUserTools.enabled in VS Code settings if you need to try the experimental full-page screenshot command. Because it is experimental, availability and behavior can change. For a repeatable deliverable, confirm the command exists and inspect the output in your version before building a workflow around it.

5. Render Markdown and apply custom CSS

For a README, design note, or other Markdown document, use VS Code’s built-in Markdown preview rather than an HTML preview. Open a Markdown file, then use the preview command; the side-by-side view lets you read the source and rendered result together. The preview can synchronize with the editor as you navigate.

To apply a stylesheet to Markdown preview, configure markdown.styles with a workspace-relative CSS path or an HTTPS stylesheet URL. For example, a workspace setting can point at a project file:

{
  "markdown.styles": ["docs/preview.css"]
}

Markdown preview has security restrictions. Under the strict setting, scripts are disabled, and insecure resources can be blocked. Treat it as a documentation renderer, not as a general browser for running arbitrary page scripts. If a stylesheet or external resource is missing, check the path and whether the resource is permitted by the preview’s security behavior.

6. CSS and asset checks before debugging

• Save both files. Unsaved editor contents may not match what the preview server serves.
• Check relative paths. A stylesheet path is relative to the HTML document; image and font paths have their own URL context.
• Check case. A path that works on a case-insensitive filesystem may fail on a case-sensitive one.
• Check the project root. Opening a file outside the intended folder can make relative URLs resolve differently.
• Check server assumptions. A page that relies on application routes or generated assets needs the appropriate dev server and build process.
• Separate Markdown from HTML. Markdown preview security rules and custom styles apply to that renderer, not to the Integrated Browser.

7. Troubleshooting

Symptom	Likely cause	Fix
Preview command is missing	You are in a different editor context, the extension is absent, or the command label differs in your release.	For Live Preview, install or enable Microsoft’s extension and open an HTML file. For Integrated Browser actions, check current VS Code documentation and command availability.
Page appears unstyled	CSS path is wrong, file changes are unsaved, or the stylesheet failed to load.	Save both files; verify the href, relative directory, and capitalization.
CSS edits do not appear	The preview is showing a different file, reload did not occur, or the edited CSS is not the linked stylesheet.	Confirm the preview URL/file, check the stylesheet link, save, and reopen or refresh the preview.
Images or fonts are missing	Asset URLs resolve from a different directory or the server cannot serve the referenced path.	Check each URL relative to the HTML/CSS file that references it and confirm the asset is inside the served project.
JavaScript app or route fails	A direct file preview does not run the project’s build/server setup or handle app routes.	Start the framework’s documented dev server and preview its local address.
Markdown scripts or remote resources are blocked	Markdown preview applies security restrictions.	Use supported Markdown preview styling and avoid depending on scripts; use a browser preview for interactive HTML.
Cannot use terminal or debugger in browser VS Code	VS Code for the Web is constrained by its browser sandbox.	Use desktop VS Code when the project needs terminal, debugging, or broader extension support.
Full-page screenshot action is unavailable	The command is experimental and its setting may be disabled or absent in the installed release.	Enable workbench.browser.experimentalUserTools.enabled and verify the command in that release; use another explicit export path if needed.

8. Performance, reliability, and choosing a capture path

For quick visual checks, rendering a local page in the editor keeps the code and preview together. Live Preview’s local server and reload loop reduce repetitive manual opening, but the page still depends on the project’s assets and runtime being available. Framework builds, large pages, remote fonts, and third-party scripts can affect how quickly the rendered state settles. Save changes, wait for the intended state, and capture at the viewport size you mean to review.

For screenshots used in reviews or bug reports, record the page state that matters: viewport dimensions, scroll position, and whether the image is a viewport or area capture. A viewport screenshot cannot show below-the-fold content. The built-in full-page option is experimental, so treat it as less predictable than the established viewport and area commands.

For repeated captures of public pages, a screenshot API can remove the need to configure a local browser workflow. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. It returns PNG, JPEG, WebP, or PDF from a GET request; its features include viewport and full-page captures, selector capture, custom CSS and JavaScript, wait conditions, device presets, and more. Use a local VS Code preview when the page exists only in your workspace; use a remote capture API when you need a screenshot of a URL accessible to the service.

Or skip the browser setup

For a URL you can reach remotely, ScreenshotNeo takes a screenshot with one request. See the ScreenshotNeo API documentation for parameters and formats.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import 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 accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. All features are available on every plan. These calls capture remote URLs; they do not upload a local workspace file automatically.

Learn about ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.

9. FAQ

Can VS Code preview HTML without an extension?

Yes. VS Code’s Integrated Browser can preview HTML. Microsoft’s Live Preview extension is useful when you want its local development server and live reload workflow.

Can I see HTML and CSS side by side?

Open the HTML editor and its browser preview in separate editor groups or panels, then arrange them side by side. For Markdown, use the built-in side-by-side Markdown preview command.

Does the VS Code HTML preview save a PNG automatically?

The documented screenshot actions capture the viewport or an area and attach the result to chat. The reviewed documentation does not establish a standalone file export flow; verify the current release or use a tool that explicitly exports an image.

Can I use the preview for a page on localhost?

Yes, when a local development server is running and the browser view can reach its address. This is often the right approach for applications that require a framework server or routes.

Is full-page capture stable?

The Integrated Browser full-page command is experimental. Check its availability and output in your VS Code release before depending on it.