Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Qt 6.12’s qmlpreview tool watches QML and JavaScript files on disk and updates a running application as you edit them. The application must be built with QML debugging infrastructure enabled. If you use CMake, Qt usually configures preview support automatically for executable targets that link to Qt6::Qml, so you may not need to add a helper command.

What QML hot reload does in Qt 6.12

Qt calls this workflow qmlpreview or QML preview: the tool monitors QML and JavaScript files and applies changes to an application while it is running. It is intended for development, not as a promise that changes to embedded QML in a packaged application will update without rebuilding.

The key prerequisite is QML debugging infrastructure in the application executable. Qt documents the tool’s command form as qmlpreview [options] executable [parameters...]; the executable is the application that loads a QML document, and optional parameters are passed to it. See the Qt qmlpreview documentation.

Check whether CMake already enables preview

In a CMake project, Qt normally sets up qmlpreview support automatically for executable targets that link against Qt6::Qml. A target created with qt_add_qml_module() also already has preview support; calling qt_add_qml_preview() for that module target returns without doing anything.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The explicit helper is for a different arrangement: an executable created by the current project that is not itself a QML module, but loads QML from one or more in-project QML modules. For example, an application executable can link to a static library target created with qt_add_qml_module(). Calling qt_add_qml_preview(myapp) creates an additional target named myapp_qmlpreview that launches the preview tool on the application.

When and how to add qt_add_qml_preview()

Use the helper when you have an eligible executable and automatic preview setup has been switched off globally or for that target. It is generally unnecessary otherwise.

  1. Confirm that the target is an executable built by the current project, and that it links to the project’s QML module target or targets.

  2. After defining the executable and its links in CMake, add qt_add_qml_preview(myapp), replacing myapp with the executable target name.

    Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  3. Configure and build the project, then build or run the generated myapp_qmlpreview target to launch the preview workflow.

If versionless Qt CMake commands are disabled in the project, use qt6_add_qml_preview(myapp) instead. The helper was introduced in Qt 6.12 and is marked technology preview, so its behavior or interface may change in later releases. The detailed constraints are in Qt’s qt_add_qml_preview documentation.

Targets and builds the helper does not support

Choose an editor or command-line workflow

Workflow

Best fit

Setup and scope

CMake helper

Preview an eligible project executable

Qt normally configures support automatically; the optional helper creates a <target>_qmlpreview build target.

Qt Creator

Preview the active QML file

Use the Live Preview control in the Design or Edit mode top toolbar, or choose Build > QML Preview.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Qt VS Code extension

Preview the whole application, one QML file, or attach to a running application

Choose the appropriate preview or attach command in the extension. Labels may vary by extension version.

qmlpreview command line

Launch preview around a specific executable

Run qmlpreview [options] executable [parameters...]; the executable needs QML debugging infrastructure enabled.

Qt Creator

Open the QML file and start Live Preview from the Design or Edit mode top toolbar. Alternatively, select Build > QML Preview. Qt Creator’s Live Preview documentation describes the workflow.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Qt VS Code extension

The Qt VS Code extension documents three scopes: preview the whole application, preview a single QML file, or attach to a running Qt Quick application. For whole-application preview, select the application executable as the launch target. If the build directory is outside the workspace, set Preview: Additional Build Dirs so the extension can locate QRC files.

To attach, start the application with QML preview debugger arguments, invoke the extension’s attach command, and provide the host and port. The extension also has a command to reload the preview window. Since command labels can change between extension versions, check the installed extension’s command palette if the names differ. See the Qt VS Code extension quick preview documentation.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Why embedded QML may still need a rebuild

Live preview and resource embedding are separate concerns. Qt’s CMake QML module integration places QML files in the resource system; in a resource-based application, changing a source QML file usually requires recompiling the executable to update the packaged resources. The preview helper’s warning about missing in-project QML modules is specifically relevant when QML is embedded in Qt resources: the executable must link the modules for the intended reload support. Qt explains the deployment behavior in its QML application deployment documentation.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.