JS Live Preview

HTML, CSS & JavaScript Live Web Preview with In-Editor DevTools

JS Live Preview provides a fast, zero-config web development environment right inside Visual Studio Code. Edit your HTML, CSS, JavaScript, TypeScript, or React/Vite code and see changes update in real time with an integrated browser DevTools console, interactive DOM & CSS Box Model inspector, responsive device modes, test credential autofill, and session preservation across saves.

⚡ Core Features

🖥️ 1. Built-in Browser DevTools Console (Primary Feature)

Say goodbye to opening external browser developer tools just to read console.log output.

• Real-Time Log Capture: Intercepts console.log, console.info, console.warn, console.error, console.table, and console.dir.
• Expandable Object & Array Tree: Interactive tree viewer for complex nested JavaScript objects and arrays ({ id: 1042, user: "Alex", ... }).
• Clickable Source File Navigation: Stack traces and error messages link directly to the exact file and line number in your editor (app.js:14).
• Level Filters & Counters: Quickly filter by All, Log, Warn, Error, and Info with real-time badge counts.
• Browser-Grade Settings Gear (⚙️): Toggle options like Hide network, Preserve log, Show timestamps, and view the dynamic N hidden badge.
• Live Interactive REPL: Execute JavaScript expressions directly against the running preview context.

🔍 2. Interactive DOM Tree & Chrome-Style Element Inspector

Inspect and live-edit UI elements without leaving VS Code.

• Interactive Expandable DOM Tree: Full DOM hierarchy with syntax-highlighted HTML tags, attributes, collapsible subtrees, and instant search filtering.
• Chrome-Style Hover-to-Inspect: Click Select element (or press Ctrl+Shift+C / Cmd+Shift+C) and hover over preview elements to see 4-layer box model overlays (Margin: orange, Border: yellow, Padding: green, Content: blue) and dimension badges.
• Real-Time Live Mutation Sync: DOM updates, additions, and deletions from JavaScript scripts sync automatically into the tree via MutationObserver (no manual refresh needed).
• Visual Box Model Diagram: Color-coded diagram showing live computed Margin, Border, Padding, and Content (W × H) dimensions.
• Live CSS Property Editor: Edit CSS properties inline with real-time visual feedback in the preview.
• Breadcrumb Navigation & 1-Click Copy: Click breadcrumbs to navigate parent hierarchies, and copy CSS rules or unique selectors with one click.

🔄 3. Instant Live Reload & Session Preservation

• Zero-Flicker Reloads: Dark theme tokens eliminate annoying white screen blinks during reloads.
• Hot CSS Reload: Modifying stylesheets injects changes immediately without resetting your JavaScript state or page scroll.
• Preserve Active Route & Auth State: Keeps sessionStorage, localStorage, document.cookie, and sub-routes (e.g. /contact.jsx stays on /contact) intact when saving files.

📱 4. Responsive Device Viewports & Dark Mode Emulation

• 1-Click Viewport Presets: Switch instantly between Desktop (fluid), Tablet (768×1024), and Mobile (375×667), or enter custom dimensions.
• Theme & Color Scheme Emulation (🌓): Cycle through Auto, Light (☀️), and Dark (🌙) modes with real @media (prefers-color-scheme) emulation.

🔑 5. Smart Test Credential Autofill

• Instant Test Accounts: Click 🔑 Autofill to populate test forms with pre-configured accounts (Admin, Dev, Test User).
• Paired Password Filling: Automatically fills corresponding password fields in login and signup forms.
• Framework Compatible: Dispatches native input events for smooth integration with React, Vue, Svelte, and vanilla forms.

⚛️ 6. Framework & Toolchain Auto-Detection

• Vanilla & Modern Toolchains: Zero-config support for plain HTML/JS/CSS, TypeScript (.ts), React/JSX (.jsx, .tsx), Angular, and Vite.
• Native Dev Server Integration: Automatically detects package managers (npm, pnpm, yarn, bun) and runs the project's native dev scripts.

🚀 Getting Started

1. Open any .html, .css, .js, .ts, or .jsx file in VS Code.
2. Launch the preview using any of the following:
   • Click the Live Preview icon in the editor tab bar.
   • Press Ctrl+Shift+Z / Ctrl+Shift+J (Windows/Linux) or Cmd+Shift+Z / Cmd+Shift+J (macOS).
   • Right-click inside your editor and select Live Preview: Open.
3. Edit your code and save (Ctrl+S / Cmd+S) to see real-time updates and console output!

⌨️ Keyboard Shortcuts

📋 Available Commands

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type Live Preview:

⚙️ Configuration Settings

Customize behavior in VS Code Settings (Ctrl+, / Cmd+, search jsLivePreview):

🛡️ Privacy & Security

• Local-Only: Binds exclusively to 127.0.0.1.
• Protected Environment: Denies directory traversal and blocks access to sensitive workspace files (.env, .git, certificates, secrets).
• Zero Telemetry: No analytics or remote telemetry tracking.

Enjoying JS Live Preview? Leave a ⭐ on GitHub and rate us on the VS Code Marketplace!