TBX Live Server
Professional live development server with integrated webview preview, multi-server management, and instant reload capabilities for modern web development in VS Code.
✨ Key Features
🚀 Integrated Webview Preview
- Side-by-side editing: Code and preview in the same window
- Instant reload: Changes reflect immediately without manual refresh
- Multi-format support: HTML, CSS, JavaScript, and static assets
- Responsive testing: Built-in device simulation tools
🔄 Multi-Server Management
- Multiple servers: Run several projects simultaneously
- Easy switching: Quick dropdown to switch between active servers
- Port management: Automatic port assignment and conflict resolution
- Status tracking: Visual indicators for all running servers
📊 Enhanced Status Bar
- Live indicators: Real-time server status in the status bar
- Quick actions: Start/stop servers with one click
- Port display: See which ports are active at a glance
- Error notifications: Immediate feedback on server issues
⌨️ Command Palette Integration
- Quick commands: Access all features via Command Palette
- Keyboard shortcuts: Efficient workflow with hotkeys
- Context-aware: Commands adapt to your current workspace
- Batch operations: Manage multiple servers efficiently
🎯 Perfect For
- Frontend Development: React, Vue, Angular, vanilla HTML/CSS/JS
- Static Sites: Documentation, portfolios, landing pages
- Prototyping: Quick mockups and proof-of-concepts
- Learning: Educational projects and tutorials
- Testing: Cross-browser compatibility and responsive design
🚀 Quick Start
- Install: Search for "TBX Live Server" in VS Code Extensions
- Open Project: Open any folder containing HTML files
- Start Server: Right-click an HTML file → "Open with Live Server"
- Preview: Your site opens in the integrated webview panel
⚙️ Configuration
Customize your development experience:
{
"liveServer.settings.port": 5500,
"liveServer.settings.root": "/",
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.AdvanceCustomBrowserCmdLine": "",
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoreFiles": [".vscode/**", "**/*.scss", "**/*.sass"]
}
🔧 Advanced Features
- Custom ports: Configure specific ports for different projects
- File watching: Intelligent file change detection
- Browser sync: Synchronized scrolling and interactions
- HTTPS support: Secure development environment
- Proxy support: Integration with backend APIs
📝 Requirements
- VS Code: Version 1.74.0 or higher
- Node.js: Version 14.0 or higher (for advanced features)
- Modern Browser: Chrome, Firefox, Safari, or Edge
🐛 Troubleshooting
Port conflicts? The extension automatically finds available ports.
Files not reloading? Check your file watching settings and firewall.
Webview not loading? Ensure VS Code has internet access for CDN resources.
📚 Documentation
🤝 Contributing
We welcome contributions! Please see our Contributing Guide for details.
📄 License
MIT License - see LICENSE for details.
💖 Support This Project
If TBX Live Server helped solve a problem or saved you time, consider buying me a coffee! Your support helps maintain and improve this extension for the entire community.
🙏 Acknowledgments
Built with ❤️ by the TBX team. Special thanks to the VS Code community for their feedback and contributions.
Ready to supercharge your web development? Install TBX Live Server today! 🚀
