Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
For a basic static page, open index.html directly in a browser: double-click it, drag it into a browser window, or use the browser’s Open File command. You will see a file:// address. If scripts, modules, API calls, routing, or other browser security rules prevent the page from working, run a local HTTP server instead. VS Code adds two useful alternatives: Microsoft’s Live Preview extension for an editor-connected refresh loop, and its integrated browser for opening local HTML files.
Start with the simplest preview
Direct file opening is the fastest way to check a standalone document that uses local HTML, CSS, images, and uncomplicated JavaScript.
- Locate your project’s
index.htmlfile. - Double-click it. Your default browser should open a URL beginning with
file://. - Alternatively, drag the file into Chrome, Edge, Firefox, or another browser window, or choose the browser’s Open File command.
- Edit the file, save it, then refresh the browser manually to see the change.
This method does not create a web server. The browser reads the file from your computer, so it is useful for a simple static example but is not identical to viewing a deployed site.
When a file preview is enough
- The page is a standalone static document.
- Stylesheets, images, and scripts use correct relative paths.
- Your JavaScript does not depend on server-side routing, server APIs, or HTTP-only behavior.
- You are comfortable refreshing after each save.
Signs you need HTTP instead
Switch to a local server when modules or fetch requests are blocked, when client-side routing expects a server, when an example explicitly documents a server requirement, or when browser security behavior differs between file:// and http://localhost. A server also exposes incorrect root paths more clearly.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Preview an HTML file from VS Code
Microsoft Live Preview
Microsoft’s Live Preview extension is designed for an editor-connected workflow when your project does not already have a development server. Install Live Preview from the VS Code Extensions view, open the project folder, then open index.html. Use the file’s preview action (or the preview button supplied by the extension) to open the page in its embedded or external browser mode.
By default, edits can appear as you make them. In the extension settings, you can choose refresh on save or disable automatic refresh. This gives you a choice between immediate updates and a more deliberate save-and-refresh cycle.
Open the correct folder first
Use File → Open Folder… and select the project root, not just an arbitrary subfolder or the individual file. Relative links such as css/site.css and images/logo.svg are resolved from the document and server/workspace roots. If they fail, check the Live Preview workspace-root or server-root settings and correct the selected folder.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →VS Code’s integrated browser without an extension
VS Code can open a local HTML file in its integrated browser. In Explorer or an editor tab, open the context menu and choose Open in Integrated Browser, or use the editor toolbar’s globe button when available. Microsoft documents this action for local .html and .htm files that resolve to a file:// URL. Remote and virtual-workspace resources are excluded from these local-file actions.
This is still a file preview, not a server-backed application. If the page needs HTTP, use a local server or the project’s own development command.
Serve the project over localhost
Run the server from the directory that should act as the site root. Then open the localhost address printed by the tool. Keep the terminal running while you preview.
Python standard-library server
- Open a terminal.
- Change to the project directory:
cd /path/to/project- Start the server:
python -m http.serverVisit the local address and port shown in the terminal (commonly http://localhost:8000/). If index.html is in that directory, the root URL normally serves it. Stop the server with Ctrl+C.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Node.js server with npx
MDN’s documented example uses the http-server package through npx:
npx http-server /path/to/project -o -p 9999The command serves the directory on port 9999 and opens the index page when one is present. To avoid serving the wrong files, replace the path with the directory containing your intended site root.
Use a framework’s prescribed command
If the project is a React, Vue, Angular, Next.js, Astro, Vite, or similar application, use its documented development command instead of adding a second generic static server. Framework servers provide the transforms, routing, environment variables, and asset handling the application expects. Live Preview is most useful when no such server already exists.
Choose the right workflow
| Need | Best option | What to expect |
|---|---|---|
| Quick check of a simple page | Double-click index.html |
file:// URL and manual refresh |
| Editing in VS Code with automatic updates | Live Preview | Embedded or external preview with configurable refresh |
| Local HTML inside VS Code, no server | Integrated Browser | Local-file preview; requires a file:// resource |
| Modules, fetch, routing, or server-like browser behavior | Python, Node, or the project’s dev server | http://localhost origin |
There is no rule that every HTML file needs Live Server or another extension. Select the least complicated method that matches the page’s dependencies and desired refresh behavior.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsFix common preview problems
The page is blank
- Open browser developer tools and inspect the Console for JavaScript errors.
- Confirm that the file contains visible body content and that CSS is not hiding it.
- Try the localhost server if scripts or modules fail under
file://.
CSS, images, or JavaScript returns 404
Check capitalization and relative paths. A path is relative to the HTML document, while a server path is relative to the directory you started serving. Open the project root in VS Code and start the server there; do not serve a parent directory unless that is intentional.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
“CORS” or module errors appear
Do not assume the code is wrong. Browsers apply different security rules to local files. Start Python or Node from the project root and reload the http://localhost URL.
Live Preview shows the wrong folder
Reopen the correct workspace folder and review the extension’s workspace-root and server-root settings. A preview can be healthy while still serving a different directory than the one you are editing.
Changes do not appear
With direct file opening or the integrated browser, refresh manually. With Live Preview, check whether automatic refresh is enabled, switch to refresh-on-save if preferred, and save the file. For a framework server, check its terminal output and follow its documented reload behavior.
Recommended Free Tools
The integrated-browser command is missing
Verify that the resource is a local .html or .htm file resolving to file://. Remote and virtual workspace resources are not covered by that action. Use an ordinary browser or a localhost server instead.
Best Value
Capture a rendered page without setting up a browser
If your goal is a repeatable image or PDF rather than an interactive editing preview, ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL and returns PNG, JPEG, WebP, or PDF. Before capture it can accept consent banners and remove 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 response headers identify the page verdict and billing result.
Or skip the browser setup
Expose your local page through a reachable URL, then call the API. The complete options and response details are in the ScreenshotNeo documentation.
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 offers an MCP server with take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. Features include full-page and selector capture, device presets, custom viewport and retina scale, dark mode, PDF controls, custom CSS and JavaScript, waits, request blocking, headers, cookies, authorization, timezone, geolocation, transparent backgrounds, resizing, caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. Its parameter names are compatible with those used by other screenshot APIs, which can simplify migration.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account to try it.
Practical reliability and cost notes
- Direct files have no server process to fail, but they can expose local-file security differences.
- Local servers are predictable and free, but the terminal must remain running and the correct root must be selected.
- Framework servers are the most faithful choice for applications because they reproduce the project’s intended build and routing behavior.
- For automated captures, use explicit waits for selectors, delays, or network idle when content loads asynchronously; use caching with a chosen TTL when repeated captures do not need a fresh render.
- Keep API keys out of client-side HTML and repositories. Store them in environment variables or a protected server-side process.
Frequently Asked Questions
Can I preview an HTML file without installing anything?
Yes. Double-click index.html, drag it into a browser, or use the browser’s Open File command. Install or run a server only when the page’s dependencies require HTTP or you want automatic refresh.
Does VS Code Live Preview replace a framework development server?
Usually not. For projects with an existing prescribed development command, use that command; Live Preview is intended mainly for pages without a server.
Why does my relative path work in one preview but not another?
The file URL, workspace root, and HTTP server root can differ. Open the project root and ensure the server starts from the directory that should be the site root.
The Bottom Line
Open index.html directly for a simple page; use Live Preview for editor-connected refresh; and use Python, Node, or the project’s own development server when the page needs a real HTTP origin.
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.
