Live HTML Preview & Source Sync

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

1. Open an .html file.
2. Run Live HTML Preview: Open to the Side from the Command Palette, the editor title-bar icon, or a right-click context menu.
3. Edit and save the file (or a linked stylesheet/script) — the preview updates automatically.
4. 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.

License

MIT