Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Live HTML Preview & Source SyncNew to Visual Studio Code? Get it now.
Live HTML Preview & Source Sync

Live HTML Preview & Source Sync

lequochai

| (0) | Free
Live preview HTML files inside VS Code with click-to-source sync between the rendered preview and the editor.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft