How to Preview HTML Changes Live with the VS Code Live Server Extension

Editing HTML the slow way is painful. You change a heading, save the file, find your browser, press refresh, and scroll back to where you were. Then you do it again, and again, fifty times in an hour. Small changes should not cost that many steps.

The Live Server extension for Visual Studio Code removes the refresh step completely. It opens your page in the browser, watches your files, and reloads the page the moment you save. Change a colour, save, and the browser already shows it. It feels like the page is alive.

This guide shows you how to install Live Server, use it well, adjust its most useful settings, and fix the few problems beginners commonly meet.

Quick Answer

Install the Live Server extension by Ritwick Dey from the VS Code Extensions view, open your project folder in VS Code, right-click your HTML file and choose Open with Live Server, or click Go Live in the bottom status bar. The page opens in your browser at an address such as http://127.0.0.1:5500 and reloads automatically every time you save a file.

What Live Server Actually Does

Live Server starts a small development server on your own computer and serves your project files through it. Instead of opening a file directly from the disk, your browser loads the page from that local server, at an address beginning with 127.0.0.1, which is your own machine.

The extension also watches the files in your project. When a file changes and is saved, it tells the browser to reload, and it can even update CSS without a full page refresh in many cases. Because the page comes from a real server rather than the file system, features that fail on direct file opening, such as loading modules or fetching local data files, usually work correctly here.

You can stop the server just as easily as you start it, and nothing is published to the internet. Everything stays on your computer unless you deliberately share your network address with devices on your own home network.

Step 1: Install Visual Studio Code and the Extension

1. Install Visual Studio Code from its official site if you do not have it yet.
2. Open VS Code and click the Extensions icon in the left sidebar, or press Ctrl+Shift+X.
3. Type Live Server in the search box.
4. Find the extension named Live Server by Ritwick Dey, which has many millions of installs.
5. Click Install and wait a few seconds for it to finish.

Check the publisher name carefully. Popular extensions attract copies with similar names. The official documentation for managing extensions in the VS Code Extension Marketplace guide explains how publishers and install counts are shown, which helps you pick the genuine one every time.

Step 2: Open Your Project Folder Properly

Live Server works best when VS Code has your whole project open as a folder, not just one loose file.

1. In VS Code, choose File, then Open Folder.
2. Select the folder that contains your HTML file and its CSS, images, and scripts.
3. Confirm the files appear together in the Explorer panel on the left.

Opening the folder matters for two reasons. First, the server uses that folder as its root, so links and image paths behave like they will on a real website. Second, the file watcher sees changes across the whole project, so editing a linked stylesheet also triggers a reload. Our roundup of the best VS Code extensions for beginners pairs Live Server with other tools that follow this same folder-based workflow.

Step 3: Start Live Server

Method one: right-click the HTML file

1. Open your HTML file in the editor.
2. Right-click anywhere in the code.
3. Choose Open with Live Server from the menu.

Method two: the Go Live button

Click the Go Live button in the status bar at the bottom right of the VS Code window. The button changes to show the port number while the server is running. Clicking it again stops the server.

Your default browser opens automatically at an address like http://127.0.0.1:5500/index.html. Leave that tab open while you work. If the browser does not open, copy the address from the VS Code notification and paste it into the browser yourself.

Step 4: Edit, Save, and Watch the Page Update

Now the enjoyable part. Change something visible, such as a heading or a background colour. Press Ctrl+S to save. The browser reloads by itself and shows the change, usually within a second.

• Changes only appear after saving. Unsaved edits, shown by a dot on the file tab, stay invisible in the browser.
• CSS changes often apply without losing your scroll position, which makes fine styling work pleasant.
• If you edit a file outside the open project folder, the watcher never sees it, so always edit the copy inside the folder.
• Keep the target file as a proper HTML document with a body section, because Live Server injects its reload script before the closing body tag.

If you find yourself forgetting to save, turn on auto save in the VS Code settings. With auto save set to after a short delay, the page updates as you type and pause, which feels almost magical during design work. The official VS Code documentation home page covers settings like auto save in its getting started material.

Step 5: Useful Settings Worth Changing

Open the settings, search for Live Server, and you will find options that adapt the tool to your habits:

• Port: change the default 5500 if another program already uses it, or if you run two projects at once.
• Default browser: choose which browser Live Server opens, handy when you develop in one browser and browse in another.
• Wait time: add a small delay before reloading if your save tools write files in several quick steps.
• Full reload or CSS inject: decide whether every change forces a complete page reload.

You can also store these choices in a settings.json file inside a .vscode folder in your project. Project settings travel with the folder, so a course, a team, or your future self gets the same behaviour on any machine. Change one setting at a time while you learn, so you know which option caused any new behaviour.

Step 6: Preview on Your Phone Too

The address 127.0.0.1 only works on the computer itself. To view the same live page on your phone, use your computer’s home network address instead. Live Server’s settings include an option to use your local IP, and the extension notes show the network address when it starts. Your phone must be on the same Wi-Fi, and your firewall may ask you to allow the connection the first time. This gives you instant mobile previews while you edit, which is one of the most valuable habits a new developer can build.

Common Problems and Fixes

• The page does not reload: check that the file was saved, that you edited the file inside the open folder, and that your HTML includes a closing body tag for the reload script.
• Port already in use: another server is using 5500. Stop the other server or change the Live Server port in settings and restart.
• The browser opens the wrong file: you started the server from a folder view. Right-click your intended HTML file and open it with Live Server directly.
• Images or CSS return 404 errors: the paths point outside the project folder or use the wrong file name case. Keep all assets inside the folder and use relative paths.
• Go Live button is missing: the extension is disabled or not installed. Check the Extensions view, enable it, and reload the VS Code window.

Conclusion

Live Server turns the slow edit-save-refresh cycle into a smooth, almost instant feedback loop. Install the extension by Ritwick Dey, open your project as a folder, click Go Live, and your browser stays in step with every saved change. Learn the handful of settings for port and browser, use the network address to check your phone, and you have a professional preview setup that costs nothing and takes five minutes to build.

Frequently Asked Questions

Is Live Server free to use?

Yes. The Live Server extension is free, and Visual Studio Code itself is free for Windows, Mac, and Linux. You can use both for personal learning and for paid client work without buying a licence.

Why does my page update for HTML but not for CSS?

First confirm the stylesheet is linked correctly and saved. Then check whether your browser has cached the old CSS file. A hard refresh clears it. Also confirm the CSS file lives inside the open project folder so the watcher can see it change.

Can other people see my site through Live Server?

Not by default. Live Server runs on your own machine for local development. People on your home network may reach it through your local IP address if your firewall allows it, but it is not published to the internet.

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

Opening the file directly uses a file:// address with no server and no automatic reload. Live Server uses a real local web address, reloads on save, and supports features such as module scripts and fetch requests that browsers restrict on file pages.

How do I stop Live Server when I finish?

Click the port number shown in the VS Code status bar, which is the same place the Go Live button was. Closing VS Code also stops the server. Stopping it when you finish keeps your computer tidy and frees the port for the next project.