One of the most important and underestimated tools when developing QML apps, is QML live:

QML Live is a local and remote Qt Quick live reloading system. It allows you to change your QML user interface source code and view the result in realtime.

– Qt Documentation

This tool can save countless hours of development when prototyping an application, because it simply reloads the edited files without the need of recompiling them.

It is particularly useful when minor changes need to be applied on a page or a component, such as styles, colors, dimensions, etc…

Installation

This tool has been developed by Luxoft Sweden AB and it is part of the Qt framework.

To install QML live (on Linux 64 bit):

  • clone repository:

    git clone https://github.com/qtproject/qt-apps-qmllive.git

  • build and install:

    mkdir build-qmllive && cd build-qmllive

    qmake ../qt-apps-qmllive/qmllive.pro

    make -j8 && make install

Below a bash script which automates the previous steps:

#!/bin/bash

# Usage
# bash clone-and-compile-qmllive.sh <qmake-path>

if [ ! $# -eq 1 ]; then
    echo "Usage: bash clone-and-compile-qmllive.sh <qmake-path>"
    exit 1
fi

QMAKE_PATH="$1"

git clone https://github.com/qtproject/qt-apps-qmllive.git

mkdir build-qmllive
cd build-qmllive

$QMAKE_PATH ../qt-apps-qmllive/qmllive.pro
sudo make && sudo make install

exit 0

Supposing that Qt has been installed in /home/leo/ and its version is 5.12.4, the above script can be executed typing:

bash clone-and-compile-qmllive.sh /home/leo/Qt5.12.4/5.12.4/gcc_64/bin/qmake

When the installation will be completed, the files qmllivebench and qmlliveruntime will be generated in the Qt binaries path, which in our sample is /home/leo/Qt5.12.4/5.12.4/gcc_64/bin/.

Configuration

To configure QML live in Qt, open Qt Creator and in Tools --> Options --> Environment --> External Tools add a new tool (Add --> Add Tool), setting the following properties:

  • Description: QML Live Reload
  • Executable: /home/leo/Qt5.12.4/5.12.4/gcc_64/bin/qmllivebench
  • Arguments: %{CurrentProject:Path} --maxdirwatch 800 --importpath %{CurrentProject:Path}

Then in Tools --> Options --> Environment --> Keyboard, search for the qmllivebench binary and assign a new key sequence, like for example ALT + F8.

Now the combination ALT + F8 will open the QML live tool:

and editing the source code of the files will automatically trigger the update of qml live preview.

External plugins/libraries

Often bigger projects need to use external libraries which have been installed in specific locations. QML live doesn’t automatically recognize those libraries, so it could show an error message like the following one:

The error module "it.ltdev.qt.qml.components" is not installed says that in main.qml file is imported a library called it.ltdev.qt.qml.component which has not been found by the tool. This can be easily solved adding the path (where the library is located) in the preferences of QML live: File --> Preferences --> Import Paths --> Add

Adding the library path should resolve the issue (QML live restart could be needed).

Alternatives to QML live:

References: