Live Preview HTML

The ultimate universal previewer for VS Code
Preview HTML, JSX, Vue, Svelte, Markdown, XML, CSV, PDFs, images, videos, and audio — all inside your workspace.

Preview Screenshots

Screenshots available in the screenshots/ folder and on the website.

Key Features

• Simultaneous Multiple Previews — Open and arrange multiple live previews side-by-side. Supports multiple panels for the same file.
• Built-in Browser — Enter any HTTP/HTTPS URL in the address bar to browse external websites directly. Perfect for previewing React, Next.js, Vue, Angular, and any web application running on localhost.
• Real-Time Live Sync — Source changes cascade instantly into the preview viewport with scroll-preserving hot-reload via Server-Sent Events (SSE).
• Element Inspector — Hover elements to see bounding boxes and dimensions. Click to inspect HTML, attributes, and computed styles. Copy HTML with one click.
• Responsive Viewport Simulator — Toggle between Desktop, Tablet (768px), Mobile (375px), or custom dimensions instantly.
• Quick Browse — One-click access to common dev servers: React (localhost:3000), Next.js (localhost:3000), Vite (localhost:5173).

File Preview Support

• HTML/CSS/JS — Real-time keystroke synchronization and scroll-preserving hot-reload.
• JSX, TSX, Vue, Svelte, Astro — Framework component previews with live reload.
• Markdown — Beautifully rendered with dual-mode editing (Preview vs. Textarea Editor) and save directly to VS Code workspace or disk.
• XML — Formatted documents with colorful syntax highlights.
• CSV/SSV — Comma, semicolon, tab, or space-separated files auto-detected and parsed into readable data tables.
• PDFs — Premium client-side rendering via PDF.js with sidebar thumbnails, search, page navigation, ink drawing overlay, high-DPI scaling, zoom controls, print/download, and advanced layout options (scroll modes, spreads, rotation).
• Images — PNG, JPG, JPEG, WEBP, GIF, SVG loaded directly in the webview with smooth click-and-drag panning, zoom in/out, mouse-wheel scrolling, reset button, and file info overlay (filename, size, dimensions, last modified).
• Video — Custom player for MP4, WebM, MOV, MKV, AVI with always-visible controls, timeline scrubber, play/pause, volume/mute, speed selector (0.5x to 2x), Picture-in-Picture, fullscreen, and keyboard hotkeys.
• Audio — Custom player for MP3, WAV, OGG, M4A, FLAC, AAC with dynamic canvas waveform visualizer analyzing frequencies in real-time.

Inspector & DevTools

• Element Inspector — Hover to highlight, click to inspect. Shows tag, attributes, and computed styles.
• Locate in Editor — Jump directly to the source line of any inspected element.
• Dev Panel — Open VS Code DevTools for advanced debugging.

What's New in v7.0.2

• JSON Preview — Pretty-printed JSON with syntax highlighting directly in the preview panel.
• JS/JSX/TS/TSX Code Preview — Syntax-highlighted code preview for JavaScript, TypeScript, JSX, and TSX files.
• SVG Code Editor — View and edit SVG source code with a built-in toggle in the SVG preview.
• Fixed Image Zoom Controls — Zoom in/out buttons now work correctly in the wrapper image preview.
• Improved X Icon Branding — The Live Preview HTML logo now features an SVG X icon for better visual identity.
• Version 7.0.2 — Bug fixes, improved previews, and expanded file support.

Previous Versions

Installation

From VSIX (Manual)

1. Download the latest .vsix file from Releases
2. Install in VS Code:

   code --install-extension htmlpreview-vscode-7.0.2.vsix
   

Dev Testing (F5)

1. Open this folder in VS Code
2. Press F5 (Run > Start Debugging)
3. In the new host window, open any supported file
4. Click the Live Preview HTML button in the status bar or right-click and select Live Preview HTML

Build from Source

npx @vscode/vsce package
code --install-extension htmlpreview-vscode-7.0.2.vsix

Usage

1. Open Preview — Right-click any supported file in the explorer or editor and select "Live Preview HTML", or use the status bar button.
2. Browse Websites — Type any URL in the address bar and press Enter or click Go.
3. Quick Browse — Click the menu (three dots) to quickly open React, Next.js, or Vite dev servers.
4. Viewport Simulation — Click the monitor icon to switch between Desktop, Tablet, and Mobile views.
5. Element Inspector — Click the cursor icon, then hover/click elements in the preview to inspect.
6. Markdown Editing — Double-click the preview to switch to edit mode. Click Save to write changes.

Supported Languages

html htm css scss less javascript typescript javascriptreact typescriptreact vue svelte astro markdown xml csv json yaml php ruby

Supported File Types

Keyboard Shortcuts

Open Source & Contributions

This is an open-source project! We welcome developers to contribute, submit bug reports, suggest improvements, and build features.

1. Fork the repo on GitHub
2. Create a branch for your feature: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m "Add amazing feature"
4. Push your branch: git push origin feature/amazing-feature
5. Open a Pull Request

Info

• Version: 7.0.2
• Developer: Rupesh9369
• GitHub: https://github.com/Rupesh9369/htmlpreview-vscode
• License: MIT
• Keywords: vscode, live preview, html, css, react, next.js, vue, svelte, markdown, csv, xml, pdf, image viewer, video player, audio player, waveform, element inspector, browser, devtools, responsive, realtime, hot reload, live sync, web development, frontend, fullstack