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 the installation procedure.

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

em++ --version

Build Qt from the sources

Download the Qt 5.12 sources and build Qt from source. Specify that we are cross-compiling for wasm using emscripten:

$ ~/Qt/5.12.0/Src/configure -xplatform wasm-emscripten -nomake examples -prefix $PWD/qtbase
$ make module-qtbase module-qtdeclarative [other modules]

The Qt build is a static build, and does not support threads.

Build your application

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

This generates the following files:

Generated fileBrief Description
app.htmlHTML container
qtloader.jsJS API for loading Qt apps
app.jsJS API for loading Qt apps
app.wasmemscripten app binary

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 %.

Some examples

Limitations

The most important limitation is that the Qt build is static, and does not support threads.

For further info, refer to Known_issues_and_platform_notes.

External resources

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.

See also WebAssembly Resource site, Getting Started with Qt for WebAssembly, and Remote UIs with WegGL and WebAssemblhy.

© 2019 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.