Live-preview .html files inside VS Code, side by side with the editor — and click any element in the preview to jump straight to its source line.
Features
Live preview in a split view — open a rendered preview of the active .html file beside the editor.
Click-to-source sync — click any element in the preview and the editor jumps to (and highlights) the matching opening tag in the source.
Auto-reload — saving the .html file, or any local .css/.js/image it references, refreshes the preview automatically.
Multiple entry points — open the preview from:
The Command Palette (Live HTML Preview: Open to the Side)
The editor title-bar icon
Right-click inside an open .html file
Right-click an .html file in the Explorer (no need to open it first)
Right-click the tab of an open .html file
One panel per file — running the command again on a file that already has an open preview reveals the existing panel instead of creating a duplicate.
Requirements
No external dependencies — everything needed ships with the extension. Works on any .html file, whether or not it's inside a VS Code workspace.
Usage
Open an .html file.
Run Live HTML Preview: Open to the Side from the Command Palette, the editor title-bar icon, or a right-click context menu.
Edit and save the file (or a linked stylesheet/script) — the preview updates automatically.
Click any element in the preview to jump to its source location in the editor.
Known Limitations
Designed for static HTML/CSS pages. Preview reflects the file's HTML/CSS as saved — content inserted dynamically at runtime by <script> tags in the page is not click-to-source mappable, since it has no corresponding source location.
Reverse sync (editor cursor position scrolling the preview) is not implemented in this version.