The Qt Quick Web Runtime

The Qt Quick Web Runtime provides a JavaScript API for interpreting QML and running Qt Quick in the browser.

Binary distributions of the runtime enables developing for Qt Quick and QML in the Web without using a C++ compiler or Emscripten.

Building

Build one of the examles:

• examples/web Simple web test case wtih QML editor
• examples/web-ace Web test case with ACE editor integration
• examples/desktop A desktop build of the runtime

Distribution

The Qt Quick Runtime distribution consists of the following files:

qtquick.js
qtquickruntime.wasm
qtquickruntime.js
qtloader.js

Usage

The runtime renders to a html container element, where it will display a loading screen, followed by a canvas with the Qt Quick Content.

The JavaScript API supports setting QML source code and providing callbacks for handling QML code warnings and errors, as well as controlling when the download of the qtquickruntime.wasm file starts.

Usage example:

let qtQuick = new QtQuickRuntime({
    container : document.getElementById("a_container"),
    qmlStatusUpdate : function(status) {
        console.log(status)
    },
    qmlWarningsUpdate: function(warnings) {
        console.log(warnings)
    }
});
qtQuick.setQmlSourceCode("qml_source_code")
qtQuick.load()

Code Structure and Implementation

The runtime is provides a private C++ API, which is exported to JavaScript using Emscripten functionaity. This exported API is then in turn used by the public JavaScript API, which also abstracts over wasm module loading.

(inner -> outer layers)

Qt Quick / QML Reloader               : qmlreloader.h
Qt Quick Runtime C++ API              : qtquickruntime.h        qt-quick-runtime.pri
Qt Quick Runtime Emscripten export    : qtquickwebruntime.h     qt-quick-web-runtime.pri
Qt Quick Runtime JavaScript API       : qtquick.js