Qt Live Preview for VS Code
A comprehensive Visual Studio Code extension for Qt6 development with live preview, hot reload, and full module support for both Qt Widgets and QML applications.
🚀 Features
🔥 Live Preview & Hot Reload
- Real-time Preview: Instantly see changes in your QML and Qt Widgets applications
- Hot Reload: Automatic reloading when files are modified
- Error Detection: Real-time syntax validation and error reporting
- Multi-format Support: Works with
.qml, .ui, and .cpp files
🛠️ Project Management
- Project Templates: Pre-built templates for various Qt6 application types
- Full Qt6 Module Support: All Qt6 modules including Core, Widgets, Quick, Network, Multimedia, Charts, WebEngine, 3D, and more
- CMake Integration: Automatic CMake configuration generation
- Build System: Integrated build, run, and debug commands
📱 Application Types Supported
- Qt Widgets Applications: Traditional desktop GUI applications
- QML Applications: Modern, declarative UI applications
- Qt Quick Controls: Mobile-ready applications with Material Design
- Multimedia Applications: Audio/video players and recorders
- Network Applications: Client-server applications
- Chart Applications: Data visualization with Qt Charts
- 3D Applications: OpenGL and Qt 3D applications
- Web Applications: Qt WebEngine-based browsers
📦 Installation
Method 1: From Source (Development)
Prerequisites
- Visual Studio Code 1.74.0 or higher
- Node.js 16.x or higher
- npm or yarn package manager
- Qt6 installed on your system
- CMake 3.16 or higher
- C++ compiler (MSVC, GCC, or Clang)
Build and Install Steps
# 1. Clone or navigate to the project directory
cd C:\Users\shahrear\Documents\QTLivePreview
# 2. Install dependencies
npm install
# 3. Install TypeScript and vsce globally if not already installed
npm install -g typescript vsce
# 4. Ensure Qt logo is in place
node create-icon.js
# 5. Compile TypeScript to JavaScript
npm run compile
# 6. Package the extension
vsce package
# 7. Install the generated .vsix file
code --install-extension qt-live-preview-1.0.0.vsix
Method 2: Development Mode
# 1. Navigate to project directory
cd C:\Users\shahrear\Documents\QTLivePreview
# 2. Install dependencies
npm install
# 3. Open in VS Code
code .
# 4. Press F5 to launch Extension Development Host
# This opens a new VS Code window with the extension loaded
Method 3: From VS Code Marketplace (Future)
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Qt Live Preview"
- Click Install
- Open VS Code Settings (Ctrl+,)
- Search for "qtLivePreview"
- Set
Qt6 Path to your Qt6 installation directory
Example: C:/Qt/6.5.0/msvc2019_64
🎯 Quick Start
Create a New Qt6 Project
- Open Command Palette (Ctrl+Shift+P)
- Type
Qt Live Preview: Create QT6 Project
- Select project type:
- Basic Qt6 Application
- Advanced Qt Widgets Application
- Advanced QML Application
- Qt Multimedia Application
- Qt Charts Application
- Qt Network Application
- Qt WebEngine Application
- Qt 3D Application
- Choose Qt6 modules to include
- Enter project name and location
Start Live Preview
- Open a
.qml or .ui file
- Right-click in editor →
Start Live Preview
- Or use Command Palette:
Qt Live Preview: Start Live Preview
Enable Hot Reload
- Hot reload is enabled by default
- Toggle with Command Palette:
Qt Live Preview: Toggle Hot Reload
- Status shown in status bar
🔧 Configuration
Extension Settings
| Setting |
Type |
Default |
Description |
qtLivePreview.qt6Path |
string |
"" |
Path to Qt6 installation directory |
qtLivePreview.cmakePath |
string |
"cmake" |
Path to CMake executable |
qtLivePreview.autoReload |
boolean |
true |
Enable automatic hot reload |
qtLivePreview.errorReporting |
boolean |
true |
Enable error detection and reporting |
qtLivePreview.enabledModules |
array |
["Core", "Widgets", "Quick", "QuickControls2"] |
Default Qt6 modules |
qtLivePreview.buildConfiguration |
string |
"Debug" |
Build configuration (Debug/Release) |
qtLivePreview.qmlEngine |
string |
"qml" |
QML engine executable |
Supported Qt6 Modules
Core Modules
- Core: Essential Qt functionality
- Widgets: Traditional desktop GUI components
- Quick: QML engine and Quick components
- QuickControls2: Modern QML controls
- Multimedia: Audio/video/camera functionality
- Charts: Chart and graph components
- DataVisualization: 3D data visualization
- Svg: SVG rendering classes
- OpenGL: OpenGL integration
Network & Communication
- Network: Network programming classes
- WebEngine: Chromium-based web engine
- WebSockets: WebSocket communication
- Bluetooth: Bluetooth connectivity
- SerialPort: Serial port communication
Database & Storage
- Sql: Database integration classes
- Xml: XML parsing and generation
System Integration
- PrintSupport: Printing functionality
- Sensors: Device sensor API
- Positioning: GPS and location services
- Concurrent: Multi-threading support
- Test: Unit testing framework
- Help: Help system integration
- Designer: Qt Designer integration
- UiTools: UI form loading
3D Graphics
- 3DCore: 3D engine core functionality
- 3DRender: 3D rendering classes
- 3DInput: 3D input handling
- 3DLogic: 3D logic components
- 3DAnimation: 3D animation support
- 3DExtras: Additional 3D components
🎨 Project Templates
// Full-featured desktop application with:
- Main window with menus and toolbars
- Status bar and dock widgets
- Settings persistence
- File operations
- Professional UI layout
Advanced QML Application
// Modern QML application with:
- Material Design styling
- Navigation drawer
- Multiple pages/views
- Dark/light theme support
- Responsive layout
- Custom components
// Media player with:
- Video/audio playback
- Media controls
- Playlist management
- Volume control
- Seek functionality
Qt Charts Application
// Data visualization with:
- Line charts
- Bar charts
- Pie charts
- Real-time data updates
- Interactive charts
Qt Network Application
// Network client with:
- HTTP requests
- REST API integration
- JSON parsing
- Error handling
- Progress indication
🚀 Commands
| Command |
Description |
Qt Live Preview: Create QT6 Project |
Create a new Qt6 project |
Qt Live Preview: Create QT6 Module Project |
Create project with specific modules |
Qt Live Preview: Start Live Preview |
Start live preview for current file |
Qt Live Preview: Stop Live Preview |
Stop live preview |
Qt Live Preview: Toggle Hot Reload |
Enable/disable hot reload |
Qt Live Preview: Build QT6 Project |
Build the current project |
Qt Live Preview: Run QT6 Project |
Run the current project |
Qt Live Preview: Debug QT6 Project |
Debug the current project |
Qt Live Preview: Configure Qt6 Installation |
Configure Qt6 paths |
🔍 File Support
QML Files (.qml)
- Syntax highlighting
- Live preview
- Hot reload
- Error detection
- Auto-completion (with Qt6 modules)
UI Files (.ui)
- Qt Designer form files
- Preview support
- Hot reload
- Form-to-code generation
C++ Files (.cpp, .h)
- Qt6 class templates
- MOC integration
- Build system integration
CMakeLists.txt
- Qt6 CMake integration
- Automatic module configuration
- Build configuration
🐛 Troubleshooting
Common Issues
Extension Package Not Found
Error: ENOENT: no such file or directory, open 'qtlivepreview.vsix'
Solution: Build the extension package first:
# Install dependencies
npm install
# Install vsce if not already installed
npm install -g vsce
# Compile TypeScript
npm run compile
# Package extension
vsce package
# Install the generated .vsix file
code --install-extension qt-live-preview-1.0.0.vsix
TypeScript Compilation Errors
Error: Cannot find module or its type declarations
Solution: Ensure all dependencies are installed:
# Clean install
rm -rf node_modules package-lock.json
npm install
# Or using yarn
rm -rf node_modules yarn.lock
yarn install
Qt6 Not Found
Error: Qt6 installation not found
Solution: Set the correct Qt6 path in settings:
- Open Settings → Extensions → Qt Live Preview
- Set "Qt6 Path" to your Qt installation directory
CMake Not Found
Error: CMake executable not found
Solution: Install CMake or set the correct path:
QML Engine Not Found
Error: QML engine not found
Solution: Ensure Qt6 bin directory is in PATH:
- Add
[Qt6Path]/bin to system PATH
- Or set full path to qml executable in settings
Hot Reload Not Working
Solution: Check file permissions and project structure:
- Ensure files are writable
- Check if project is in a valid workspace
- Verify Qt6 installation is complete
TypeScript Not Found
'tsc' is not recognized as an internal or external command
Solution: Install TypeScript globally:
# Install TypeScript globally
npm install -g typescript
# Verify installation
tsc --version
# Then compile the project
npm run compile
Icon File Not Found
ERROR The specified icon 'extension/images/icon.png' wasn't found in the extension.
Solution: Either create the icon file or remove the icon reference from package.json:
# Option 1: Create the images directory and add an icon
mkdir images
# Add a PNG icon file to images/icon.png
# Option 2: Remove icon reference from package.json (temporary fix)
# Edit package.json and remove or comment out the "icon" line
Debug Mode
Enable debug output:
- Open Output panel (Ctrl+Shift+U)
- Select "Qt Live Preview" from dropdown
- Check for error messages and warnings
🤝 Contributing
We welcome contributions! Please see CONTRIBUTING.md for details.
Development Setup
# Clone the repository
git clone https://github.com/algosciencecademy/qt-live-preview.git
# Navigate to project directory
cd qt-live-preview
# Install dependencies
npm install
# Install vsce globally for packaging
npm install -g vsce
# Open in VS Code
code .
# Press F5 to launch extension development host
Building and Testing
# Compile TypeScript
npm run compile
# Watch for changes during development
npm run watch
# Run linting
npm run lint
# Run tests
npm test
# Package extension for distribution
vsce package
# Install packaged extension locally
code --install-extension qt-live-preview-1.0.0.vsix
Project Structure
C:\Users\shahrear\Documents\QTLivePreview\
├── src/ # TypeScript source files
│ ├── extension.ts # Main extension entry point
│ ├── qtProjectManager.ts # Project creation and management
│ ├── livePreviewProvider.ts # Live preview functionality
│ ├── hotReloadManager.ts # Hot reload implementation
│ ├── errorReporter.ts # Error detection and reporting
│ ├── qt6ModuleManager.ts # Qt6 module management
│ └── qt6ProjectTemplates.ts # Project templates
├── out/ # Compiled JavaScript files
├── package.json # Extension manifest
├── tsconfig.json # TypeScript configuration
├── README.md # This file
└── images/ # Extension icons and assets
Release Process
# 1. Update version in package.json
# 2. Update CHANGELOG.md
# 3. Commit changes
git add .
git commit -m "Release v1.0.0"
git tag v1.0.0
# 4. Build and test
npm run compile
npm test
# 5. Package extension
vsce package
# 6. Publish to VS Code Marketplace (requires publisher account)
vsce publish
# 7. Push to repository
git push origin main --tags
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- Qt Framework team for the amazing Qt6 toolkit
- VS Code team for the excellent extension API
- Community contributors and testers
📞 Support
🔗 Links
Made with ❤️ by AlgoScience Academy
Transform your Qt6 development experience with live preview and hot reload!
