JS Live Preview
HTML, CSS & JavaScript Web Development with In-Editor DevTools
JS Live Preview is a fast, local web development workspace inside Visual Studio Code. Preview vanilla HTML/CSS/JavaScript with an integrated browser console, inspect DOM elements and styles, test responsive viewports, autofill test login credentials, preserve sessions across saves, or run real React, Vite, and Angular development servers and test REST APIs—without leaving your editor.
🚀 Why Choose JS Live Preview?
Traditional web development workflows in VS Code often require switching windows constantly, opening heavy browser DevTools for simple console.log debugging, installing multiple extensions for previewing and API testing, or getting logged out on every code save because session storage resets.
JS Live Preview solves these issues with a single, unified, lightweight extension:
| What Traditional Setups Do |
How JS Live Preview Solves It |
| Window Switching: Alt-Tab between editor and external browser |
In-Editor Split Screen: Live preview side-by-side with your code |
| Separate DevTools: Must open F12 DevTools to see console logs |
Built-in Console: console.log, warn, error, expandable object/array trees, and live REPL directly in VS Code |
| Broken State on Save: Page reload wipes form inputs and logs you out |
Session & Route Preservation: Keeps sessionStorage, localStorage, document.cookie, active route, and scroll position across saves |
| CSS Reload Flickers: Modifying a style tag reloads the entire HTML page |
Hot CSS Reload: Injects stylesheet changes in-place with zero page reloads |
| Repetitive Login Testing: Typing credentials manually every reload |
🔑 One-Click Autofill: Instant test account filling (Admin, User, Dev) with paired passwords |
| Device Testing Requires Chrome Device Mode: Opening external browser |
Responsive Device Presets: One-click Desktop, Tablet (768×1024), Mobile (375×667), and custom viewports |
| External REST Clients Needed: Installing separate apps like Postman |
Integrated REST API Client: Send GET, POST, PUT, PATCH, DELETE requests with formatted JSON responses |
Runaway Loops Freeze the Editor: while(true) crashes the webview |
Loop Watchdog: Detects infinite loops and offers safe, compact execution stoppage |
| Fake Framework Previews: Broken JSX preview without real tooling |
Real Framework Toolchain: Detects React/Vite/Angular and runs their real dev server with full HMR |
🌟 Key Features
1. In-Editor Live Browser Preview & Instant Reload
- Side-by-Side or External Browser: Open a live preview tab directly next to your code, or open in Chrome, Firefox, Edge, or your default browser.
- Auto-Reload on Save: Updates automatically when you save HTML, CSS, JavaScript, or linked workspace assets.
- Hot CSS Reload: Modifying a
.css file updates styles in-place without triggering a full page reload or losing component state.
- Session & Auth State Preservation: Preserves
sessionStorage, localStorage, document.cookie, the active URL route (e.g., /home.html), and scroll position across saves so you stay logged in while coding.
- Multi-Page & Relative Links: Navigate smoothly between multiple HTML pages in your workspace with accurate relative path resolution.
- Interactive Console Output: Captures
console.log, console.info, console.warn, console.error, console.debug, console.dir, and console.table.
- Interactive Object & Array Tree: Inspect complex JavaScript objects and arrays with an expandable tree view—click to reveal nested properties, prototypes, and array elements.
- Clickable Source Navigation: Runtime exceptions and console messages display precise file and line number references.
- Console Filters & Search: Filter logs by All, Log, Warn, Error, and Info with instant log counts.
- Live Console REPL: Evaluate JavaScript expressions in real time against the active preview context.
- Auto-Scroll to Bottom: Automatically scrolls to newly arriving output, with intelligent pause when you scroll up to inspect earlier logs.
- DOM Elements Inspector: Click any element on the page to inspect its HTML markup, attributes, CSS selector, and computed styles.
- Local Storage Manager: View, add, edit, rename, delete, and clear
localStorage entries directly from a dedicated tab.
3. Responsive Device Viewport Switcher
- Preview responsive layouts without opening external developer tools.
- Desktop: Full responsive width.
- Tablet: Preset 768 × 1024 viewport.
- Mobile: Preset 375 × 667 viewport.
- Custom Viewport: Enter custom width and height dimensions with persistent memory.
4. Smart Test Credential Autofill ("🔑 Autofill")
- Toolbar Quick-Fill: One-click dropdown in the preview status bar to populate test credentials (Admin, Test User, Dev) into login and signup forms.
- Paired Password Filling: Selecting an account automatically populates matching password fields in the same form.
- Non-Intrusive Suggestions: Compact, dark-mode glassmorphic popup that filters dynamically as you type and dismisses on
Escape, scroll, or outside click.
- Framework Compatible: Dispatches native
input and change events, ensuring React, Vue, Svelte, and vanilla state handlers update immediately.
5. Runaway Script & Infinite Loop Watchdog
- Built-in watchdog monitor detects runaway
while(true) loops and unresponsive scripts.
- Displays a clean, compact warning banner with options to wait or terminate execution, preventing editor freezing.
6. Modern Framework & Real Dev Server Integration
- Zero-Config Detection: Automatically detects React, Vite, Angular, Next.js, and Node.js projects when opening workspace files.
- Package Manager Aware: Identifies
npm, yarn, pnpm, or bun from lockfiles (pnpm-lock.yaml, yarn.lock, package-lock.json, bun.lockb).
- Real Framework Toolchain: Launches the project's native
dev, start, or serve script, preserving JSX/TSX transforms, TypeScript checking, and native HMR.
- Process Management: Start, stop, and restart project servers directly from VS Code commands or status indicators.
7. Built-in REST API Client
- Send HTTP requests without leaving your code editor or switching to separate desktop clients.
- Supported methods: GET, POST, PUT, PATCH, DELETE.
- Custom request headers, query parameters, and formatted JSON body editing.
- Formatted JSON response viewer with HTTP status codes, headers, execution latency (ms), and response size.
- Persisted recent request history and one-click request re-run.
8. Security & Privacy Hardened
- Binds strictly to local interface
127.0.0.1.
- Automatically blocks directory traversal and denies access to sensitive files (
.env, .git, private keys, certificates, secrets, and system files).
- Offline-first: No telemetry tracking, external data collection, or remote dependencies.
💻 Supported Workflows
| Workflow |
How JS Live Preview Runs It |
| Vanilla HTML, CSS & JavaScript |
Runs via the internal local preview server with injected console bridge, DOM inspector, and live reload. |
| React / Vite |
Automatically locates the nearest project, runs the project's native dev script, and previews with full JSX/TSX compilation and Vite HMR. |
| Angular CLI |
Runs the project's ng serve or package script with full template compilation and reload. |
| Node.js / Express |
Use Start Project Server to run the backend script, then use the built-in REST Client to test endpoints immediately. |
🏁 Getting Started
Vanilla Web Development (HTML / CSS / JS)
- Open any
.html, .css, .js, or .ts file in VS Code.
- Launch the preview using any of the following:
- Click the Live Preview icon in the editor title bar.
- Press
Ctrl+Shift+Z / Ctrl+Shift+J (Windows/Linux) or Cmd+Shift+Z / Cmd+Shift+J (macOS).
- Right-click anywhere in the editor and choose Live Preview: Open.
- Open the Command Palette (
Ctrl+Shift+P / Cmd+Shift+P) and type Live Preview: Open.
- Edit your code and save (
Ctrl+S / Cmd+S) to see changes update instantly.
React, Vite, or Angular Projects
- Open your project folder in VS Code and ensure dependencies are installed (
npm install, pnpm install, or yarn).
- Open a source file (e.g.,
src/App.tsx, src/main.jsx, or an Angular component).
- Run Live Preview: Open.
- JS Live Preview detects your package manager, starts the project's dev server, and opens the live preview tab.
Sending REST API Requests
- Open the Command Palette (
Ctrl+Shift+P / Cmd+Shift+P).
- Select Live Preview: Send REST API Request.
- Choose the HTTP method (GET, POST, PUT, PATCH, DELETE), enter the endpoint URL, and optionally add headers and a JSON body.
- View the formatted response, status code, timing, and headers in an interactive output panel.
⌨️ Keyboard Shortcuts
| Shortcut (Windows / Linux) |
Shortcut (macOS) |
Action |
Ctrl+Shift+Z |
Cmd+Shift+Z |
Open or focus Live Preview |
Ctrl+Shift+J |
Cmd+Shift+J |
Open Live Preview & focus Console |
📋 Commands
Access these commands from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
| Command |
Identifier |
Description |
| Live Preview: Open |
jsLivePreview.run |
Opens the live preview panel for the active file or project. |
| Live Preview: Open in External Browser |
jsLivePreview.openExternal |
Opens the preview in your configured external browser. |
| Live Preview: Refresh Preview |
jsLivePreview.refresh |
Reloads the preview iframe and re-fetches resources. |
| Live Preview: Clear Console |
jsLivePreview.clear |
Clears all captured console output. |
| Live Preview: Start Project Server |
jsLivePreview.startProject |
Starts the detected framework dev server (dev, start, serve). |
| Live Preview: Stop Project Server |
jsLivePreview.stopProject |
Stops the running project dev server process. |
| Live Preview: Restart Project Server |
jsLivePreview.restartProject |
Restarts the running project dev server. |
| Live Preview: Send REST API Request |
jsLivePreview.apiRequest |
Opens the interactive REST client prompt. |
| Live Preview: Re-run Last REST API Request |
jsLivePreview.rerunApiRequest |
Re-executes the most recently sent REST API request. |
⚙️ Configuration Settings
Customize JS Live Preview in your VS Code Settings (Ctrl+, / Cmd+,):
| Setting |
Type |
Default |
Description |
jsLivePreview.openLocation |
string |
"sideBySide" |
Display preview as an in-editor split panel (sideBySide) or in an external browser window (externalBrowser). |
jsLivePreview.externalBrowserApp |
string |
"default" |
Browser application to use for external preview: "default", "chrome", "firefox", or "edge". |
jsLivePreview.watchdogWarnSeconds |
number |
5 |
Elapsed seconds of script unresponsiveness before displaying a slow execution warning. |
jsLivePreview.watchdogKillSeconds |
number |
15 |
Elapsed seconds of script unresponsiveness before offering to terminate execution (infinite loop protection). |
❓ Frequently Asked Questions (FAQ)
Does JS Live Preview replace traditional Live Server?
Yes. While traditional tools only serve raw files to an external browser, JS Live Preview provides an integrated in-editor workspace complete with live reload, a built-in browser console, DOM element inspection, local storage management, responsive viewport simulation, form test autofill, and a REST API client.
How does hot CSS reload work without refreshing the page?
When you edit a CSS file, JS Live Preview updates the linked stylesheet in the preview document in-place using cache-busted timestamps. This allows instant visual feedback without resetting JavaScript variables, form inputs, or DOM state.
Why was I getting logged out in other extensions, and how does JS Live Preview fix this?
Standard iframes or webviews often drop session storage or reset back to the root URL whenever a file is saved. JS Live Preview monitors the active route, synchronizes session state, and restores the exact URL, authentication tokens, and scroll position on reload so your login session remains intact.
Can I preview React, Vite, and Next.js applications?
Yes. JS Live Preview automatically detects React, Vite, Next.js, and Angular project structures and runs your project's native development script. This ensures full JSX/TSX compilation, routing, and HMR function exactly as intended by your framework toolchain.
Do I need to install Postman or another tool to test backend endpoints?
No. The built-in REST API client supports GET, POST, PUT, PATCH, and DELETE requests with custom headers, JSON body support, formatted response viewing, and request history directly inside VS Code.
🔒 Security & Privacy
- Strict Local Binding: The built-in HTTP preview server listens solely on loopback
127.0.0.1 and does not expose ports to your local network.
- Sensitive File Protection: Requests to
.env, .git, private keys (.pem, .key), certificates, and hidden files are strictly blocked.
- Zero Telemetry: JS Live Preview does not track, collect, or transmit user code, browsing activity, or personal data.
📦 Installation
From VS Code Marketplace
Search for JS Live Preview in the Extensions view (Ctrl+Shift+X / Cmd+Shift+X) and click Install.
From VSIX
Download js-live-preview-1.1.0.vsix and install via the Command Palette:
code --install-extension js-live-preview-1.1.0.vsix
🤝 Contributing & Feedback
| |
