HTML Live Preview & Reload
Preview local files beside your code or in your system browser, served from a safe local HTTP address with automatic reload.
English · Español
Why use it?
- Live HTML beside the editor — edit on one side and view the result on the other.
- Open in your real browser — use the same local preview URL in Chrome, Edge, Firefox, Brave, or your default browser.
- Automatic reload — HTML pages refresh when HTML, CSS, JavaScript, images, or other project files change.
- More than HTML — attempts to display folders, text/source files, images, SVG, audio, video, and PDF.
- Multiple workspaces — each project gets an independent server and the next free port.
- Secure paths — binds to
127.0.0.1, prevents path traversal, and blocks files outside the selected server root.
- Pure JavaScript — the extension source and local server are written in JavaScript.
Quick start
- Open a trusted folder in VS Code.
- Select an HTML file—or any other local file—in the editor or Explorer.
- Press
Alt+L, then Alt+P for the side preview, or Alt+L, then Alt+B for your system browser.
You can also right-click inside an editor or on a file/folder in Explorer, open HTML Live Preview & Reload, and choose Start HTML Live Server, Open Live Preview Beside, or Open Preview in Browser.
Keyboard shortcuts
The extension uses the uncommon Alt+L (Live) chord as its own prefix, avoiding standard VS Code shortcuts for search, capture, build, and file navigation.
| Action |
Windows / Linux |
macOS |
| Open live preview beside the editor |
Alt+L, then Alt+P |
⌥L, then ⌥P |
| Open preview in the system browser |
Alt+L, then Alt+B |
⌥L, then ⌥B |
| Refresh the active preview |
Alt+L, then Alt+R |
⌥L, then ⌥R |
If another extension uses one of these chords, open Preferences: Open Keyboard Shortcuts, search for HTML Live Preview, and assign your preferred keys.
What can it preview?
| File type |
Behavior |
| HTML / HTM / XHTML |
Rendered as a website with the live-reload client injected in memory |
| Folders |
Opens index.html / index.htm, or shows a navigable directory listing |
| CSS, JavaScript, JSON, XML, SQL, Markdown, logs, and source code |
Displayed as text by the browser |
| PNG, JPEG, GIF, WebP, AVIF, BMP, ICO, SVG |
Displayed with the browser's image viewer |
| PDF, audio, and video |
Streamed with byte-range support for the browser's built-in viewer |
| Office documents, archives, and unknown binary files |
Served with the correct or safe generic MIME type; the browser decides whether it can display or download them |
This is a static file server. It does not execute PHP, Python, Node.js, database queries, or other backend code.
Commands
Open the Command Palette (Ctrl+Shift+P / ⇧⌘P) and search for HTML Live Preview & Reload.
| Command |
Purpose |
| Start HTML Live Server |
Starts the local server without forcing a preview to open |
| Open Live Preview Beside |
Opens an embedded browser-like tab beside the editor |
| Open Preview in Browser |
Opens the selected file through the local server in your default browser |
| Refresh Preview |
Reloads the active embedded preview |
| Copy Preview URL |
Copies the current local URL |
| Show Running Preview Servers |
Lists servers and lets you open, copy, or stop one |
| Stop Current Preview Server |
Stops the server associated with the current file |
| Stop All Preview Servers |
Stops every server started by the extension |
Settings
| Setting |
Default |
Description |
htmlLivePreviewReload.startingPort |
3001 |
First local port to try; busy ports are skipped automatically |
htmlLivePreviewReload.reloadMode |
onSave |
onSave, onType, or off |
htmlLivePreviewReload.reloadDelay |
150 |
Debounce time in milliseconds |
htmlLivePreviewReload.serverRoot |
empty |
Optional folder relative to the workspace root |
htmlLivePreviewReload.excludeDirectories |
.git, node_modules |
Directory names ignored by automatic reload |
Example:
{
"htmlLivePreviewReload.reloadMode": "onType",
"htmlLivePreviewReload.reloadDelay": 250,
"htmlLivePreviewReload.serverRoot": "public"
}
Security and privacy
- Servers listen only on
127.0.0.1, not on your network interfaces.
- The requested real path must remain inside the configured server root, including through symbolic links.
- VS Code Workspace Trust is required because previewed HTML and JavaScript execute in a browser context.
- No analytics, telemetry, accounts, or remote services are used by this extension.
Only preview code you trust. A local HTML page can still run JavaScript and make network requests permitted by the browser.
Requirements
- VS Code
1.100.0 or newer.
- A filesystem-backed trusted workspace.
Development and packaging
npm ci
npm run check
npm run package:vsix
Press F5 to launch an Extension Development Host. The package command creates html-live-preview-reload-0.1.0.vsix, which can be installed through Extensions: Install from VSIX....
F5 runs the one-time npm: compile task and then starts the Extension Development Host. It does not wait for the permanent webpack watcher. If you want continuous compilation while developing, run npm run watch in a separate terminal.
If VS Code still remembers an older npm: watch pre-launch task after updating the repository, run Tasks: Terminate Task, then Developer: Reload Window, and press F5 again.
License
MIT © 2026 Alexey Suzdalenko.
Issues and contributions are welcome on GitHub.
| |
