VS Code uses port 5500 by default when you run an HTML file with Live Server

When you use the Live Server extension in VS Code to preview an HTML file, it opens your browser to http://localhost:5500. The 5500 is the port number — the specific channel your computer uses to send the preview from VS Code to your browser. You do not have to type this yourself; Live Server handles it automatically when you right-click an HTML file and select "Open with Live Server".

If port 5500 is already in use by another program on your machine, Live Server will try the next available port (5501, 5502, and so on). You can see which port it chose in the bottom right corner of VS Code, where it shows "Port: 5500" or whichever number it selected. The port number matters only if you need to share your preview with someone else on your network or if you are troubleshooting why the preview will not load.

Key Takeaways

  • Live Server, the most common VS Code extension for HTML preview, uses port 5500 by default.
  • You access the preview at http://localhost:5500 in your browser, but Live Server opens this automatically.
  • If port 5500 is busy, Live Server picks the next free port and displays the number in VS Code's status bar.
  • You can change the default port in VS Code settings if you need a different number for your workflow.
  • The port number is only relevant if you are sharing the preview over a network or debugging connection issues.

How Live Server picks a port when you start it

When you right-click an HTML file in VS Code and choose "Open with Live Server," the extension checks whether port 5500 is available. If nothing else is using it, Live Server starts a small web server on that port and opens your default browser to http://localhost:5500. Your HTML file loads in the browser, and any changes you save are automatically refreshed without you having to reload the page manually.

If another program — perhaps a database, another web server, or even another instance of Live Server — is already using port 5500, Live Server will not crash. Instead, it moves to port 5501 and tries again. It keeps incrementing until it finds an open port. You can see the port number in the bottom status bar of VS Code, next to the Live Server icon. This automatic fallback means you rarely have to think about ports at all, unless you are running multiple projects at once.

Changing the default port in VS Code settings

If you want Live Server to always use a specific port instead of 5500, you can change it in VS Code settings. Open the settings file by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (Mac), type "Preferences: Open Settings (JSON)," and add these lines to the JSON file:

"liveServer.settings.port": 3000

Replace 3000 with whatever port number you prefer. Common alternatives are 3000, 8000, 8080, or 8888. After you save the settings file, the next time you start Live Server, it will try your chosen port first. If that port is busy, it will still increment to find an open one, just like before.

Why port numbers matter for web development

A port is like a mailbox number on a building — your computer's IP address is the building, and the port is which mailbox the message goes to. When you run a web server locally, it needs a port so your browser knows where to send requests. Port 5500 is arbitrary; Live Server's creator chose it because it is unlikely to conflict with other common services. Port 80 is reserved for regular web traffic, port 443 for find traffic, and ports below 1024 generally require administrator permission.

Understanding ports becomes important when you are running multiple local servers at once — perhaps Live Server on 5500 and a Node.js backend on 3000. Each needs its own port so they do not interfere. It also matters if you want to access your preview from another device on your network; you would type the host computer's IP address followed by the port, like 192.168.1.100:5500.

Accessing your preview from another computer on your network

By default, Live Server only listens on localhost, which means only your own machine can see the preview. If you want to test your HTML on a phone, tablet, or another computer on the same Wi-Fi network, you need to enable network access in Live Server settings.

Open VS Code settings and add this line to your JSON file:

"liveServer.settings.useLocalIp": true

Now when you start Live Server, it will display your computer's actual IP address in the status bar instead of localhost. You can then type that IP address and port (for example, 192.168.1.50:5500) into another device's browser to see your preview. This is useful for testing how your HTML looks on mobile or sharing a quick preview with a colleague without uploading to a server.

Other ways to run HTML files in VS Code

Live Server is the most popular choice, but it is not the only way to preview HTML in VS Code. The built-in straightforward Live Server extension works similarly but with fewer features. You can also use Python's built-in server if you have Python installed; open a terminal in VS Code, navigate to your project folder, and run python -m http.server 8000. This starts a server on port 8000 that you can access at http://localhost:8000.

Some developers use Node.js with a package like http-server. After installing it globally with npm install -g http-server, you can run http-server in your project folder, and it will start on port 8080 by default. Each method uses a different port by convention, but all work the same way: they create a local web server that your browser can connect to.

Troubleshooting when Live Server will not start

If you click "Open with Live Server" and nothing happens, the most common cause is that port 5500 (or your chosen port) is already in use and Live Server cannot find an open port nearby. Check the VS Code output panel to see error messages. You can also try changing the port in settings to something you know is free, like 9999, and try again.

Another possibility is that Live Server is not installed. Open the Extensions panel in VS Code (the icon that looks like four squares), search for "Live Server," and install the one by Ritwick Dey. It has millions of downloads and is the standard choice. After installation, reload VS Code and try again. If Live Server starts but your browser does not open automatically, you can manually type http://localhost:5500 into your address bar.

Frequently Asked Questions

Can I run multiple HTML files on different ports at the same time?

Yes. Start Live Server on your first HTML file, which takes port 5500. Then open a second HTML file, right-click it, and select "Open with Live Server" again. Live Server will automatically use port 5501 for the second file. You can see both ports in the status bar and access each preview separately in your browser.

What if I want to use port 80 instead of 5500?

Port 80 is the default web port and usually requires administrator or root permission to use. On Windows, you can run VS Code as administrator and then set the port to 80 in settings. On Mac or Linux, you may need to use sudo or adjust system permissions. For most local development, ports above 1024 like 5500 or 8000 are simpler and safer.

Does the port number change every time I start Live Server?

No. Live Server tries port 5500 first every time. It only moves to a different port if 5500 is already in use. If you close Live Server and start it again on the same file, it will go back to 5500 (assuming nothing else is using it).

Can I share my Live Server preview with someone outside my network?

Not directly through the port number. Live Server only works on your local network. To share with someone remotely, you would need to upload your files to a real web server or use a tunneling service like ngrok, which creates a public URL that forwards to your local port.

What port does VS Code use if I open an HTML file without Live Server?

If you straightforward double-click an HTML file in VS Code or open it in your browser directly, no port is involved. The file loads from your hard drive using the file:// protocol, not http://. This works for straightforward HTML but breaks features like loading external files or running JavaScript that requires a web server.