When you open an HTML file directly (e.g. file:///Users/tim/Desktop/my-first-html.html), your browser simply reads it from your disk — there’s no web server involved.
But when you use Live Preview (e.g. in VS Code, Brackets, or other editors), it runs a local development web server for you automatically.
That’s why the URL looks like:
http://127.0.0.1:3000/my-first-html.html?serverWindowId=7c5228f2-277e-4818-b8df-2023afc670c7
Breakdown of the URL
| Part | Meaning |
|---|---|
http:// | It’s using the HTTP protocol (i.e. through a web server) |
127.0.0.1 | This is the loopback address (your own computer, also called localhost) |
:3000 | This is the port number that your local web server is listening on |
/my-first-html.html | The path to your HTML file |
?serverWindowId=... | A query parameter added by the Live Preview extension to manage browser tabs or session states |
Why live preview uses a server (and port)
-
To simulate real web behavior
Many web features (like AJAX, Fetch API, and relative links) only work properly over HTTP, not fromfile://. -
To auto-refresh your changes
The local server can detect file changes and tell the browser to reload the page instantly. -
To support scripts and resources correctly
Some paths, imports, or modules (especially in JavaScript) need an HTTP origin to work. -
To avoid CORS (Cross-Origin) issues
Running via HTTP mimics real deployment, preventing errors that happen when opening files directly.
In short
- Live Preview = mini web server on your computer
- Port number = unique “door” that your computer opens for that server
- It’s safe — everything runs locally
- It mimics how your site would behave when deployed online
Back to parent page: HTML