VS Code: How to Run an HTML File

To run an HTML file in VS Code, you can either open it directly in your web browser by right-clicking the file in the Explorer and selecting “Reveal in File Explorer� (then double-click it), or use the built-in “Open with Live Server� extension for a live-reloading preview. The quickest no-install method is to right-click the file tab and choose “Copy Path,� then paste it into a browser’s address bar. This article explains all the standard ways, when to use each, and how to fix common issues.

Why Running HTML Is Different From Other Languages

Unlike Python or JavaScript, HTML is not executed by a runtime—it is interpreted by a web browser. That means you don’t need a compiler or a server for a simple static page. The browser reads the HTML file, builds the Document Object Model (DOM), and renders it. This distinction matters because it gives you several equally valid ways to “run� the file, depending on whether you need live reloading, server-side features, or just a quick look.

Method 1: Open Directly in Your Default Browser (No Extensions)

This is the simplest approach and works for any HTML file that doesn’t rely on server-side code or fetch requests to local files.

1. Open your HTML file in VS Code.
2. Right-click anywhere in the editor and select “Open in Default Browser� (if you have the “Open in Browser� extension) or use the file explorer method below.
3. Alternatively, in the Explorer sidebar (Ctrl+Shift+E), right-click the HTML file and choose “Reveal in File Explorer� (Windows) or “Reveal in Finder� (Mac), then double-click the file.
4. You can also drag the HTML file from your file manager directly into an open browser window.

This method uses the file:// protocol. It’s fine for static pages, but you’ll run into CORS errors if your page tries to load local JSON or module scripts.

Method 2: Using Live Server (Recommended for Development)

The Live Server extension by Ritwick Dey is the most popular tool for this. It starts a local development server and automatically reloads the browser whenever you save your file.

1. Install the extension from the VS Code marketplace (Ctrl+Shift+X, search “Live Server�).
2. Open your HTML file.
3. Right-click in the editor and select “Open with Live Server�.
4. A browser tab opens at http://127.0.0.1:5500/ (or another port if 5500 is busy).
5. Save your HTML file (Ctrl+S) and the browser updates instantly.

Live Server uses the http:// protocol, which avoids the CORS restrictions of file://. This is essential if you’re using ES6 modules, fetching local JSON, or using certain browser APIs that require a secure context.

Method 3: Using the VS Code Terminal

If you prefer the command line, you can run a simple HTTP server from the terminal. This is useful when you don’t want to install an extension.

1. Open the integrated terminal (Ctrl+`).
2. Navigate to your project folder: cd path/to/your/folder.
3. Run one of these commands (you need Python or Node.js installed):
   • Python 3: python -m http.server 8000
   • Node.js (with npx): npx serve
4. Open your browser and go to http://localhost:8000/yourfile.html.

This method gives you the same benefits as Live Server (http protocol) but without the auto-reload feature. You’ll need to manually refresh the browser after each change.

Method 4: Using the “Preview� Panel (Built-in)

VS Code has a built-in simple preview for HTML files that doesn’t require any extensions. It’s less powerful than Live Server but useful for quick checks.

1. Open your HTML file.
2. Press Ctrl+Shift+P to open the Command Palette.
3. Type “Simple Browser: Show� and select it.
4. Enter the full path to your HTML file (or use the file:// URL).

This opens a small preview pane inside VS Code. It’s handy for a quick look but doesn’t support live reload or some modern features.

Common Problems and How to Fix Them

Here are the most frequent issues people run into when trying to run HTML files in VS Code:

• “Can’t find the fileâ€� error: Make sure the file has the .html extension (not .txt). In Windows, hidden file extensions can mask this—enable “File name extensionsâ€� in File Explorer.
• Blank page in browser: Check the browser’s developer console (F12) for errors. Often it’s a JavaScript error or a missing closing tag. Also verify that the file path has no special characters like # or spaces that might break the URL.
• Live Server not starting: The default port 5500 might be occupied. Open the extension settings and change the port. Also ensure you have the latest version of the extension.
• CORS errors when using fetch: This happens when you open the file directly with file://. Use Live Server or the terminal method to serve it over HTTP.
• Changes not showing after refresh: If you’re not using Live Server, you may need to hard-refresh (Ctrl+F5) to bypass the browser cache.

How to Choose the Right Method

Your choice depends on what you’re building:

• Static page with no external files: Open directly in the browser is fine.
• Page with local CSS/JS files: Direct opening works, but Live Server is more convenient for development.
• Page using ES6 modules or fetch: Must use an HTTP server (Live Server or terminal).
• Quick preview inside VS Code: Use the Simple Browser.
• Team project with a build step: You might need a more advanced setup like npm scripts or a task runner, but that’s beyond basic HTML.

Frequently Asked Questions

Can I run HTML in VS Code without an extension?

Yes. Right-click the file in the Explorer and select “Reveal in File Explorer,� then double-click it. Or use the built-in Simple Browser via the Command Palette. No extension is required for a basic static page.

Why does my HTML file open as text instead of rendering?

This usually happens when the file extension is not .html or when the browser’s file association is broken. Right-click the file, choose “Open with,â€� and select your browser. On Windows, you can also go to Settings > Apps > Default apps to set the default browser.

What is the difference between Live Server and opening the file directly?

Live Server serves the file over HTTP (like a real web server), which allows modern JavaScript features and avoids CORS restrictions. Opening directly uses the file:// protocol, which is simpler but limited. Live Server also auto-reloads the page on save.

How do I view the HTML file in a specific browser like Chrome or Firefox?

Install the “Open in Browser� extension, then right-click and choose “Open in Other Browsers.� Or, after revealing the file in your file manager, right-click and select “Open with� and pick your browser.

Can I use Live Server with multiple HTML files?

Yes. Live Server serves the entire workspace folder. If you have multiple HTML files, you can navigate between them in the browser by changing the URL path. The auto-reload works for whichever file is currently open in the browser.

Is there a way to run HTML with a keyboard shortcut?

Yes, but you need to set it up. Install the “Open in Browserâ€� extension, then go to File > Preferences > Keyboard Shortcuts, search for “Open in Default Browser,â€� and assign a key combination like Ctrl+Alt+O.

Related

• Load Calculator Tool: How It Works & How to Use It
• Free Cloud Storage Tablets: What to Know
• Vim Recover Deleted Swap File?