Qt for WebAssembly

WebAssembly is a binary format that allows sand-boxed executable code in web pages. This format is nearly as fast as native machine code, and is now supported by all major web browsers.

Qt for WebAssembly is a platform plugin that lets you build Qt applications, which can be integrated into your web pages. It doesn't require any client-side installations and reduces the server-side resource usage.

Getting Started with Qt for WebAssembly

Install Emscripten

emscripten is a toolchain for compiling to asm.js and WebAssembly. It lets you run Qt on the web at near-native speed without plugins.

Refer to the emscripten documentation for more information about checking out the Emscripten SDK and installing and activating Emscripten for your Qt version.

After installation, you should have emscripten in your path. Check this with the following command:

 em++ --version

Each minor release of Qt supports a known-good Emscripten version. That Emscripten version will be supported for the lifetime of that Qt version.

The known-good versions are:

• Qt 5.12: 1.38.16
• Qt 5.13: 1.38.27 (multithreading: 1.38.30)
• Qt 5.14: 1.38.27 (multithreading: 1.38.30)
• Qt 5.15: 1.39.8

Use emsdk to install specific emscripten versions. For example, to install it for Qt 5.15, enter:

• ./emsdk install 1.39.8
• ./emsdk activate --embedded 1.39.8

After installation, you should have emscripten in your path. Check this with the following command:

 em++ --version

Download the binaries

The binary builds can be downloaded in the Downloads section using your Qt account.

Supported Qt modules

The following modules are supported by Qt for WebAssembly:

• QtBase
• QtDeclarative
• QtQuickcontrols2
• QtWebsockets
• QtSvg
• QtCharts
• QtMqtt

The following modules do not work:

• QtMultimedia
• QtWebView

Other modules may work, but are not supported.

Build Qt from the sources

Alternatively, you could download the Qt sources in the Downloads section, and build Qt from it.

Configure Qt as a cross-compile build for the wasm-emscripten platform. This will implicitly set the "-static" and "-no-feature-thread" options. Pass the -compile-examples option to enable examples.

 ./configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase

On Windows, make sure you have MinGW as well as sed in your PATH and configure with the following:

 configure -no-warnings-are-errors -xplatform wasm-emscripten -platform win32-g++ -nomake examples -prefix %CD%\qtbase

Build required modules:

 make module-qtbase module-qtdeclarative [other modules]

The Qt build is a static build, and does not support threads by default. Configure with -feature-thread to enable thread support.

Build and run your application

 $ /path/to/qt-wasm/qtbase/bin/qmake
 $ make

This generates the following files:

When deploying the app, the compression is typically handled on the server side. We recommend to compress the wasm binaries because this typically reduces the size of the binary by 50 %.

Test-run your application

You can test-run your application in the following way:

 /path/to/emscripten/emrun --browser=firefox appname.html

Some examples

• An example displaying a Qt logo using OpenGL calls
• An industry automation use case
• A gallery of available controls in Qt Quick Controls
• A simple text editor, written with Qt Widgets

Limitations

The most important limitation is that the Qt build is static.

For further info, refer to Qt WebAssembly Platform Notes.

External resources

• Qt for WebAssembly Technology Preview
• Qt and WebAssembly
• Qt for WebAssembly wiki
• Getting Started with Qt for WebAssembly
• Remote UIs with WebGL and WebAssembly
• WebAssembly Resource site

Licenses

Qt for WebAssembly is available under commercial licenses from The Qt Company. In addition, it is available under the GNU General Public License, version 3. See Qt Licensing for further details.