Eonmirth Live Preview
See HTML/CSS/JS changes instantly as you type. No save, no refresh needed.
A powerful VS Code extension by Eonmirth that shows live preview of HTML/CSS/JS files in a split pane, updating in real-time as you type. Perfect for beginners and rapid prototyping.
✨ Features
🚀 Instant Live Updates
- Updates preview within 300ms after you stop typing
- No save required - see changes as you type
- No browser refresh needed - completely automatic
- Smooth updates with scroll position preservation
📱 Responsive Preview
Switch between different device frames:
- Desktop (full width)
- Mobile (375px - iPhone size)
- Tablet (768px - iPad size)
Zoom controls: 50%, 75%, 100%, 125%, 150%
🎯 Smart File Support
- HTML (.html, .htm) - Full rendering with linked resources
- CSS (.css) - Auto-detects related HTML or shows color preview
- JavaScript (.js) - Auto-wraps in HTML and shows console output
- Markdown (.md) - Renders as formatted HTML
- Console Output - Captures
console.log(), console.warn(), console.error()
- Error Display - JavaScript errors shown in red banner
- Click-to-Jump - Click error to jump to line in editor
- Resource Loading - Automatically loads linked CSS and JS files
🎨 Beautiful UI
- Integrates seamlessly with VS Code themes
- Clean, modern toolbar
- Collapsible console panel
- Professional error display
📦 Installation
From VS Code Marketplace
- Open VS Code
- Press
Ctrl+P / Cmd+P
- Type:
ext install eonmirth.eonmirth-live-preview
- Press Enter
From VSIX File
- Download the
.vsix file
- Open VS Code
- Go to Extensions view (
Ctrl+Shift+X)
- Click
... → Install from VSIX...
- Select the downloaded file
🎯 Usage
Automatic Preview
Just open any HTML, CSS, or JavaScript file - the preview opens automatically!
Manual Preview
- Open a file (HTML, CSS, JS, or Markdown)
- Press
Ctrl+K V (Windows/Linux) or Cmd+K V (Mac)
- Or use Command Palette:
Eonmirth Live Preview: Open
- 🖥️ Desktop - Full width preview
- 📱 Mobile - 375px mobile view
- 📐 Tablet - 768px tablet view
- 🔍 Zoom - Adjust preview size
- 🔄 Refresh - Manual refresh
- 📋 Console - Toggle console panel
- 🌐 Browser - Open in external browser
🛠️ How It Works
Live Update Mechanism
// Listens to file changes
vscode.workspace.onDidChangeTextDocument(event => {
// 300ms debounce - waits for you to stop typing
setTimeout(() => {
// Updates preview via postMessage
panel.webview.postMessage({ html: newContent });
}, 300);
});
Resource Resolution
- Automatically resolves relative paths (
./styles.css)
- Loads linked CSS and JavaScript files
- Converts file paths to
file:// URIs for webview
Console Capture
// Injected into your HTML
console.log = function(...args) {
// Sends to parent preview panel
window.parent.postMessage({ type: 'console', args });
originalLog.apply(console, args);
};
📝 Examples
Basic HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<script src="script.js"></script>
</body>
</html>
CSS File
When you open styles.css, the extension will:
- Look for
index.html in the same folder
- If found, preview it with your CSS applied
- If not found, show CSS code with syntax highlighting
JavaScript File
Opening a .js file automatically wraps it with HTML and shows console output!
⚙️ Configuration
Currently, Eonmirth Live Preview works out of the box with no configuration needed. Future versions may include:
- Custom debounce timeout
- Auto-open preference
- Default device frame
- Custom device sizes
🎯 About Eonmirth
Eonmirth creates powerful, user-friendly developer tools that boost productivity and improve workflows. Our mission is to make development faster, easier, and more enjoyable.
Our Products
- Eonmirth Live Preview - Instant HTML/CSS/JS preview (this extension)
- More developer tools coming soon!
Tagline: "Building tools that developers love"
🐛 Troubleshooting
Preview not updating?
- Make sure the file is saved at least once
- Check for syntax errors in your HTML
- Try manual refresh (🔄 button)
Linked CSS/JS not loading?
- Ensure paths are relative (
./styles.css not /styles.css)
- Check that files exist in the specified location
- Use developer tools console for errors
Console not showing output?
- Click the 📋 Console button to open panel
- Refresh the preview
- Check that you're using
console.log() not alert()
- Update Speed: <100ms after 300ms debounce
- Memory Usage: ~30MB per preview panel
- Max File Size: Tested up to 5000 lines
- Concurrent Previews: Multiple files supported
📄 License
MIT License - see LICENSE file for details
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📧 Support
🌟 Acknowledgments
Built with ❤️ by Eonmirth using:
- VS Code Extension API
- TypeScript
- Modern Web Technologies
Enjoy faster web development with Eonmirth Live Preview! 🎉
Eonmirth - Creating developer tools that boost productivity
