How to Install and Use Live Server on Visual Studio Code in Windows 11

If you’re a web developer, you know how frustrating it can be to refresh your browser every time you make a small change to your HTML or CSS file. That’s where Live Server in Visual Studio Code (VS Code) saves the day.

Live Server automatically reloads your web page whenever you save changes — making your development process smoother, faster, and more interactive.

In this guide, we’ll show you exactly how to install and use Live Server on Visual Studio Code in Windows 11, step by step.

What You’ll Need Before You Start

Before diving in, make sure you’ve got a few basics ready:

A computer running Windows 11
Visual Studio Code installed (Download it here)
A simple HTML/CSS/JavaScript project to test Live Server with

That’s all you need. Let’s get started.

Step 1: Open Visual Studio Code

Launch Visual Studio Code on your Windows 11 PC.
If it’s your first time using VS Code, you’ll see a clean workspace with options like:

Open Folder — to load an existing project
New File — to start from scratch
Extensions — to add tools like Live Server

Before installing anything, let’s open the folder that contains your web files.

Step 2: Open Your Web Project Folder

Click on File → Open Folder (or press Ctrl + K + O).
Browse to your project folder — for example, a directory with your index.html file.
Click Select Folder.

Your project files should now appear in the Explorer pane on the left side of VS Code.

If you don’t have an HTML file yet, you can create one:

Right-click inside the Explorer panel.
Select New File → name it index.html.
Add a simple HTML template like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Live Server Test</title>
</head>
<body>
  <h1>Hello, Live Server!</h1>
</body>
</html>

Now we’re ready to install the Live Server extension.

Step 3: Install Live Server Extension in VS Code

Click the Extensions icon on the left sidebar (or press Ctrl + Shift + X).
In the search bar at the top, type: Live Server
Look for the extension by Ritwick Dey — it should be the first result.
Click Install.

Once installed, you’ll see a small “Go Live” button appear at the bottom-right corner of your VS Code window.

Tip: You don’t need to restart VS Code after installing Live Server — it’s ready to use immediately.

Step 4: Run Your HTML File with Live Server

Now comes the fun part — running your web page with live reloading!

Open your HTML file (e.g., index.html) in the editor.
Right-click anywhere inside the file.
Select Open with Live Server.

Alternatively, you can simply click the “Go Live” button in the bottom-right corner of the window.

Your default web browser will open automatically and display your webpage at a local address like:

http://127.0.0.1:5500/index.html

This means Live Server is now serving your files from a local development server.

Step 5: Test the Live Reload Feature

Let’s see the magic in action.

Go back to your HTML file in VS Code.
Change the text — for example:

<h1>Hello, Visual Studio Code!</h1>

Press Ctrl + S to save your file.

Now, switch back to your browser — you’ll see the page automatically refresh and display the updated text!

That’s Live Server doing its job — no manual reloading needed.

Step 6: Customize Live Server Settings (Optional)

You can tweak how Live Server behaves to suit your workflow.

In VS Code, click the gear icon ⚙️ (bottom-left corner).
Select Settings → search for Live Server.

Here you can adjust:

Port Number: Change the default port (5500) if needed.
Browser: Set which browser opens by default.
Root Folder: Define which directory should be served.
Ignore Files: Exclude specific files or folders from auto-reload.

If you prefer to edit manually, you can also add these settings in your VS Code settings.json file:

"liveServer.settings.port": 5501,
"liveServer.settings.root": "/",
"liveServer.settings.ignoreFiles": ["**/*.scss", "**/*.psd"]

These options give you full control over how your local server runs.

Step 7: Stop Live Server

When you’re done testing, you can stop Live Server with a single click.

Simply click the “Port :5500” button (or “Go Live”) again in the bottom bar.
Your local server will shut down immediately.

That’s it — your project will stop serving on localhost.

Step 8: Fixing Common Live Server Issues

If Live Server doesn’t work as expected, here are a few quick fixes:

“Go Live” button missing:
→ Reinstall the Live Server extension and restart VS Code.
Page not updating:
→ Save your file (Ctrl + S). Live Server reloads only on save.
Port already in use:
→ Change the port under Settings → Live Server → Port Number.
Blank page or error:
→ Make sure you’ve opened your project folder, not just the individual HTML file.

Wrapping Up

And that’s it! You’ve successfully learned how to install and use Live Server in Visual Studio Code on Windows 11.

With Live Server, you can preview your web projects instantly, watch your changes update in real-time, and make your front-end development process far more efficient.

Whether you’re building a simple landing page or a full web app, Live Server is a must-have tool in your VS Code setup — lightweight, fast, and effortless to use.