How To Execute HTML Code In VS Code | Run Your First File

Feed / By

VS Code does not execute HTML—you save a .html file and open it in a browser using the Integrated Browser or a preview extension such as Live Server.

After writing and saving HTML in VS Code, you want to see it live. The trick with how to execute HTML code in VS Code is understanding that VS Code writes the code and your browser renders the output. No compiler or runtime is needed—just a correctly saved file and a browser you already have.

Understanding How VS Code Handles HTML

VS Code is a code editor, not a browser. When you write HTML, VS Code provides syntax highlighting, auto-completion, and error checking, but it does not display the rendered page. That job belongs to your web browser—Chrome, Edge, Firefox, or Safari—which reads the HTML file and paints the visual result.

This separation is by design and works identically on Windows, macOS, and Linux. Any browser you have installed can open an HTML file saved from VS Code, so the workflow is the same regardless of your operating system.

How To Preview HTML In VS Code: Three Methods That Work

You have three reliable ways to see your HTML rendered after editing in VS Code. The first is built into VS Code itself; the other two come from free extensions that add convenience features.

Use The Integrated Browser

VS Code includes a built-in option called Open in Integrated Browser. Right-click your .html file in the File Explorer or in the editor tab and select that option. A browser pane opens inside VS Code, showing the rendered page. This method requires no installation and works with the current VS Code version.

Install The Live Server Extension

Live Server launches a local development server that automatically reloads the browser tab every time you save the file. From the Extensions view, search for Live Server and install it. Right-click your .html file and choose Open with Live Server. A browser tab opens, and any edit you save updates instantly. The first time, VS Code may ask you to trust the workspace and allow network access—click Trust and allow public and private networks.

Install The Open In Browser Extension

This extension adds browser-specific options to the right-click menu. After installing it from the marketplace, right-click your .html file and choose Open in Default Browser or Open in Other Browsers. It opens the file in your chosen external browser without running a local server—useful when you want to test in a specific browser quickly.

Method Setup Needed Key Feature
Integrated Browser Built into VS Code, no install Preview pane inside the editor
Live Server Install from Extensions view Auto-reloads on every save
Open In Browser Install from Extensions view Pick a specific external browser
HTML Preview Install from Extensions view Inline preview inside VS Code
Direct Browser Open No install needed Open file from your file manager
Drag and Drop No install needed Drag .html into an open browser window
Terminal Command Built into macOS/Linux open file.html or xdg-open file.html

Creating And Saving Your HTML File Correctly

None of the preview methods work if the file is not saved with the correct extension and structure. The whole process starts in VS Code the same way every time.

Open a folder in VS Code (File > Open Folder) to keep your project organized. Create a new file and name it index.html—the .html extension tells both VS Code and your browser that this is an HTML document. VS Code then applies HTML syntax highlighting and autocomplete.

Add the standard HTML 5 boilerplate. The minimal structure starts with <!DOCTYPE html>, then the <html>, <head>, and <body> tags. Type html:5 and press Tab in a new .html file to have VS Code generate the skeleton automatically.

Save the file with Ctrl+S (Windows/Linux) or Cmd+S (macOS) before previewing. The browser only reads the saved version on disk—unsaved changes stay in VS Code and do not appear in the rendered page. Microsoft’s HTML documentation for VS Code covers the full setup for the Integrated Browser workflow.

Common Mistakes And How To Fix Them

Most issues that beginners run into come from three sources: the wrong file extension, forgetting to save, or missing the basic HTML structure. Each one has a simple fix once you know what to look for.

Mistake Why It Happens The Fix
File saved as .txt instead of .html VS Code saves untitled files as plain text by default Use the .html extension when naming the file
Browser shows old unchanged content File was edited but not saved before refreshing Press Ctrl+S / Cmd+S, then refresh the browser
Blank white page in the browser Missing <!DOCTYPE html> or core HTML tags Start with the proper HTML 5 boilerplate
Wrong file opened in the browser tab Another .html file in the same folder was selected Double-check the file path shown in the browser address bar
Extension does not appear in the right-click menu Workspace trust was not granted Click Trust when VS Code prompts about the folder’s authors
Live Server does not start or shows a firewall prompt Network permission request was denied Allow public and private networks when Windows asks
Images or CSS do not load on the page File paths in the HTML point to the wrong location Use relative paths based on the HTML file’s own folder

Your HTML Workflow From File To Browser

The sequence that works every time has exactly four steps. Once this pattern becomes habit, moving from VS Code to a live browser preview takes about ten seconds.

  1. Create a project folder and open it in VS Code.
  2. Create a file with the .html extension and write or paste your HTML content.
  3. Save the file—the browser only sees saved changes.
  4. Right-click the file in VS Code and choose Open in Integrated Browser, Open with Live Server, or Open in Default Browser.

Each method opens the rendered page in a browser where you can inspect the result, test interactions, and make changes. Edit the HTML in VS Code, save, and refresh the browser to see updates. That loop—edit, save, refresh—is the entire workflow.

References & Sources