explaingit

ritwickdey/vscode-live-server

★ 6,819TypeScriptAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

A VS Code extension that starts a local web server and automatically refreshes the browser every time you save an HTML, CSS, or JavaScript file, giving instant feedback while building websites.

Mindmap

mindmap
  root((repo))
    Core Feature
      Auto Reload
      Local Server
    Start Methods
      Status Bar Button
      Right-click Menu
      Keyboard Shortcut
    Customization
      Port Setting
      Browser Choice
      Ignore Files
    Advanced
      HTTPS Mode
      CORS Support
      Network Preview
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

See browser changes instantly when saving HTML or CSS files without manually hitting refresh.

USE CASE 2

Preview a website on your phone or another device by connecting to the local server over your network.

USE CASE 3

Run a local HTTPS server for pages that require a secure context to function correctly.

USE CASE 4

Configure a proxy to test pages that need API requests routed through a backend server.

Tech stack

TypeScriptVS Code

Getting it running

Difficulty · easy Time to first run · 5min
MIT license, use freely for any purpose including commercial, as long as you keep the copyright notice.

In plain English

Live Server is a Visual Studio Code extension that starts a local web server for your project and automatically refreshes your browser whenever you save a file. This means you can edit an HTML, CSS, or JavaScript file and see the result in the browser immediately without manually hitting the refresh button. It is aimed at people building websites who want a faster feedback loop while working. Starting the server takes one click on a "Go Live" button that appears in the bottom status bar of VS Code, or you can right-click an HTML file in the file explorer and choose to open it with Live Server. Keyboard shortcuts are also available. Stopping works the same way, through the same status bar button or shortcut. The extension supports customizing which port the server runs on, which directory it treats as the root of your project, and which browser it opens. You can also set it to ignore certain files so changes to those files do not trigger a reload. For setups where you want to view the site on another device on the same network, such as checking how a page looks on a phone, the extension supports connecting from other devices over the local network. HTTPS is supported for cases where your code needs a secure context to work correctly. There is also CORS support and proxy configuration for more complex setups. Multi-root workspaces, a VS Code feature where you work on multiple separate folders at once, are supported. The extension is installed from the VS Code Marketplace and requires no external tools. It is MIT licensed. The last documented release was version 5.6.1 in April 2019, so active development appears to have slowed, though the extension remains widely installed.

Copy-paste prompts

Prompt 1
I am building a simple HTML and CSS website in VS Code. How do I install Live Server and start it so my browser auto-refreshes every time I save a file?
Prompt 2
How do I configure the VS Code Live Server extension to use port 8080, open Chrome instead of the default browser, and serve from a subfolder called public?
Prompt 3
I want to test my website on my iPhone while developing on my Mac. How do I use Live Server to access the page from my phone on the same WiFi network?
Prompt 4
My JavaScript code uses the Web Crypto API which only works over HTTPS. How do I enable HTTPS mode in VS Code Live Server?
Open on GitHub → Explain another repo

← ritwickdey on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.