Live Server
Launch a development local Server with live reload feature for static & dynamic pages.
Features
- Instant Live Reload: Automatically reloads your browser whenever you save HTML, JavaScript, or template files.
- Hot CSS Reloading: Injects updated stylesheets without full page reload, preserving your active DOM state and inputs.
- One-Click Status Bar Control:
- Click Go Live in the status bar to start the server.
- Displays the active port (e.g.
Port: 5500); click again to stop the server.
- Context Menu Integration: Right-click any
.html file or folder in the Explorer or editor tab and choose Open with Live Server.
- Smart Port Fallback: Automatically switches to the next available port if port
5500 is currently busy.
- CORS Enabled: Out-of-the-box Cross-Origin Resource Sharing headers for smooth local API testing.
- Zero Heavy Dependencies: Built with high-performance native HTTP streaming and Server-Sent Events (SSE).
Shortcuts to Start / Stop Server
| Action |
Windows / Linux |
macOS |
| Start Live Server |
Alt + L, Alt + O |
Cmd + L, Cmd + O |
| Stop Live Server |
Alt + L, Alt + C |
Cmd + L, Cmd + C |
Command Palette
Press F1 or Ctrl + Shift + P (macOS: Cmd + Shift + P) and type:
Live Server: Open with Live Server — Starts the server and opens the browser.Live Server: Stop Live Server — Stops the active server.
Extension Settings
Configure Live Server to your preferences in VS Code Settings (settings.json):
| Setting |
Default |
Description |
liveServer.settings.port |
5500 |
Local port number to run the server on. |
liveServer.settings.host |
"127.0.0.1" |
Host address to bind the server (e.g., 127.0.0.1 or localhost). |
liveServer.settings.root |
"/" |
Root folder path relative to workspace directory. |
liveServer.settings.openBrowser |
true |
Automatically opens your default web browser on start. |
liveServer.settings.wait |
100 |
Debounce delay in milliseconds before triggering reload. |
liveServer.settings.cors |
true |
Enables CORS headers on served HTTP requests. |
liveServer.settings.ignoreFiles |
[".git/**", ".vscode/**", "node_modules/**"] |
Glob patterns of files to ignore from triggering live reload. |
Quick Start & Test
- Open any project folder in VS Code.
- Create an
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Server Test</title>
</head>
<body>
<h1>Hello from Live Server!</h1>
</body>
</html>
- Click Go Live in the bottom status bar, or press
Alt + L, Alt + O.
- Your browser opens to
http://127.0.0.1:5500. Edit index.html, press save, and watch it reload instantly.
Packaging as VSIX
To generate the .vsix installer package for uploading or installing locally:
npx @vscode/vsce package
To install directly in VS Code:
code --install-extension live-server-1.0.0.vsix
License & Attribution
Made by Anshul Bhilare.
© 2026 Anshul Bhilare. All rights reserved.
| |
