Welcome to QmlSandboxExtension, a specialized tool designed to streamline the development process for QML experiments. This extension allows you to preview your QML files directly within Visual Studio Code, eliminating the need for context switching and enhancing your productivity.
To get started:
- Open or create a file with QML content
- Check at the bottom right corner that
QMLlanguage is detected properly - Click on the
runicon appeared at the top right corner of your QML file or pressCtrl+Shift+Qto open the preview window
- Preview QML: This extension allows you to preview standalone QML files in
a sandbox environment. To open the preview window, simply click on the
runicon located at the top-right corner of your QML file, use theOpen QML Sandboxcommand, or pressCtrl+Shift+Q.
Make sure that VSCode properly identifies your file as QML; otherwise, the icon won't appear. QML language support is provided through the
bbenoist.QMLextension dependency.
-
Screenshot: You can take screenshot of your QML scene by clicking on the
cameraicon in the top-right corner of the preview window or by using theScreenshot QML Scenecommand. -
Live-Update: The QML preview auto-updates with each file change. To disable this updates, click the
QML Live-updateitem in the status bar when the QML WebView is open. After disabling live-update, an icon for manual QML sandbox tab update will appear at the top of code editor. -
Special Qml Engine modes: You can switch between different QML engine view modes like Overdraw, Batches and Clip, using dropdown menu in
runbutton. Overdraw mode shows the layers of your QML scene in 3D space. Batches mode shows the separate batches that are rendered in your QML scene. Clip mode shows the clipping regions of your QML scene.
- Cmake/Ninja
- aqtinstall (optional script for Qt installation)
- Qt 6.6.3
- Emscripten 3.1.37
We welcome and appreciate contributions! If you would like to contribute to QmlSandboxExtension, please fork the repository and submit a pull request.