Livewindow - VS Code Extension
Real-time live preview inside VS Code with instant hot reload. See HTML, CSS, and JavaScript changes as you type without saving.
Resources
Features
- Instant Preview — see changes as you type (30ms response time)
- Side-by-Side View — code on left, live preview on right
- Hot Reload — CSS/JS changes reload automatically via WebSocket
- Browser Navigation — back/forward arrows like a real browser
- 50+ File Types — HTML, CSS, SCSS, JS, TS, images, fonts, video, and more
- Memory Cache — serves unsaved editor content in real-time
- Auto-Detection — opens the active HTML file automatically
- Clean UI — minimal toolbar with dark theme
Quick Start
- Install the extension
- Open any HTML file in your project
- Click the eye icon
👁 in the editor title bar (top-right)
- Edit your HTML — changes appear as you type
How It Works
- Click the eye icon or press
Ctrl+Shift+L
- HTTP server starts on
localhost:5500
- Preview panel opens beside your editor
- Type in any HTML file — content updates in real-time
- Save external files — preview reloads via WebSocket
Commands
| Command |
Description |
Shortcut |
Go Live |
Start server and open preview |
Ctrl+Shift+L |
Stop Live Server |
Stop server and close panel |
Ctrl+Shift+X |
Toggle Live Preview |
Toggle preview on/off |
Click eye icon |
Open in Live Preview |
Preview a specific HTML file |
Right-click |
Open in Browser |
Open preview in system browser |
— |
Supported File Types
Web: HTML, CSS, SCSS, LESS, JavaScript, TypeScript, JSX, TSX
Media: PNG, JPG, GIF, SVG, WebP, AVIF, MP4, WebM, MP3, WAV
Fonts: WOFF, WOFF2, TTF, OTF, EOT
Data: JSON, XML, YAML, CSV, Markdown, WASM
Configuration
| Setting |
Default |
Description |
port |
5500 |
HTTP server port |
wsPort |
5501 |
WebSocket port |
root |
"" |
Root folder to serve |
autoOpen |
false |
Auto-open on start |
columnBeside |
true |
Show beside editor |
Keyboard Shortcuts
| Key |
Action |
Ctrl+Shift+L |
Start Go Live |
Ctrl+Shift+X |
Stop Live Server |
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X)
- Search for "Live Server"
- Click Install
From VSIX
code --install-extension AyushPatil.livewindow-1.0.0.vsix
Requirements
- VS Code 1.85.0 or higher
- Node.js (for development)
License
MIT License - Copyright (c) 2025 Ayush Patil.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Support
If you find this extension helpful, please rate it on the VS Code Marketplace.
