Preview Qt Quick applications

You can preview Qt Quick applications and single QML files from the code editor. The changes you make to the code become instantly visible in the preview.

Previewing a Qt Quick application.

Preview the whole application

To launch and preview a Qt Quick application:

1. To launch the application:
   • Select on the editor toolbar.
   • Go to Command Palette, and select Qt: Preview changes to QML code live in your application.
2. Select the application executable as the launch target.

If the build directory is outside the workspace, select Qt: Open Qt Extension settings > Qt Qml Configuration to set it in Preview: Additional Build Dirs. This tells Qt Extension for VS Code where to look for QRC files during QML preview.

To pass command-line arguments to the application when you start it from the command palette, set them in Qt: Open Qt Extension settings > Qt Qml Configuration > Preview: Args.

Preview a single file

To preview a single QML file:

• Select on the editor toolbar.
• Go to Command Palette, and select Qt: Preview current QML file live.

Attach to a running application for live preview

To Attach to a running Qt Quick application for live preview:

1. In the Terminal, start the application with the following arguments:

   <your_executable_path> -qmljsdebugger=host:<IP_address>,port:<port_number>,block,services:QmlPreview,DebugTranslation

   Where IP_address is the IP address of the host where the application is running and port_number is the debugging port.

2. Go to Command Palette, and select Qt: Attach to a running QML application for live preview.
3. Enter the IP address where the application is running.
4. Enter the port number where the application is running.

Stop previewing

To stop previewing a Qt Quick application or a QML file:

• Close the preview window.
• Select on the editor toolbar.