Qt for WebAssembly

Qt for WebAssembly makes it possible to build Qt applications as WebAssembly modules in order to target Web browsers.

Qt for WebAssembly is currently in development. A tech preview release is scheduled for release with Qt 5.11.0.

This Wiki page is also a work in progress, please see the development tracking bug for more information: https://bugreports.qt.io/browse/QTBUG-63917

Getting the code

The sources can be downloaded from your Qt Account, in the Downloads section. For the latest revision of the code, you can also check it out from our git repositories directly:

qtbase branch: wip/webassembly ( git clone -b wip/webassembly https://code.qt.io/qt/qtbase.git )

qtdeclarative branch: wip/webassembly ( git clone -b wip/webassembly https://code.qt.io/qt/qtdeclarative.git )

qtwebsockets branch: wip/webassembly ( git clone -b wip/webassembly https://code.qt.io/qt/qtwebsockets.git )

Other repositories should use the "5.11.0" branch to be compatible.

Building Qt

Requirements: Emscripten (known-good version: 1.37.33)

Supported host dev platforms: Linux, macOS, Windows Subsystem for Linux

./configure -xplatform emscripten -confirm-license -opensource -developer-build -release -static -no-thread -nomake tests -nomake examples  -no-dbus -no-headersclean -no-feature-networkinterface  -system-libpng -no-ssl -no-warnings-are-errors

make

Building and running applications

/path/to/qmake && make

Start a web server (e.g. "python -m SimpleHTTPServer"), open e.g. localhost:8000/appname.html in a web browser. We test on Chrome, Firefox, and Safari (all desktop). Firefox (nightly) currently has the most performant wasm compiler, and is recommended for dev work.

You can also use:

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

Note: If you are using Firefox, you can use CTRL+SHIFT+K to open the debug console.

Known issues and platform notes

• Included Qt repositories in Qt for WebAssembly 5.11.0 TP:
  • Qt Base (Qt Core, Qt Gui, Qt Widgets, ...) (8a63cd94fbba0afafc00b467277a2648143d2890)
  • Qt Declarative (Qt Qml, Qt Quick) (5f4698c4e7952d64e78e3a06de5ac28d68415b19)
  • Qt Graphical Effects (80b9da7ac42468453b7d130bd0a322a1312ad0e3)
  • Qt Quick Controls (88ff352d5145b5761179ee42164a0bfcd4f1d54a)
  • Qt Quick Controls 2 (60f3106b3fe537f1f26230bf0b59525cf98d6789)
  • Qt Svg (b1ca1bb725fd8768782d8105b782932f95b70908)
  • Qt Web Sockets (5c64a39482cba6ad4bc4337bd7475f96cfad9109)
  • Qt Charts (4f66d1ffeecd95b4bf6666b71536c42dea7450ed)
• Supported development host systems: Linux and MacOS, and Windows Subsystem for Linux.
• Supported browsers: We develop and test mainly on desktop systems. Tested browsers include Chrome, Safari, Opera and Firefox. Some mobile testing is done on Android and iOS devices. Safari on iOS currently failing to load Qt applications with an "out of executable memory" error.
• Due to disabled threading support in WebAssembly at the moment, the configure string above will build Qt with no threading support. If your application relies on threading, this may lead to unexpected effects.
• Nested event loops are not supported. Applications should not call e.g. QDialog::exec() or create a new QEventLoop object.
• Applications do not have access to system fonts. Font files must be distributed with the application, for example in Qt resources. Qt for WebAssembly itself embeds one such font.
• Qt renderes application content to a canvas element, and does not use (other) )native DOM elements. This means accessibility (screen readers) are not supported and that text inputs won't trigger virtual keyboards.

Expected footprint (download size): Wasm modules as produced by the compiler can be large, but compress well.

Example	gzip	brotli
helloglwindow (QtCore + QtGui)	2.8M	2.1M
wiggly widget (QtCore + QtGui + QtWidgets)	4.3M	3.2M
SensorTag (QtCore + QtGui + QtWidgets + QtQuick + QtCharts)	8.6M	6.3M

Compression is typically handled on the web server side, using standard compression features: the server compresses automatically or picks up pre-compressed versions of the files. There's generally no need to have special handling of wasm files.

You can find a full list of known issues here: https://bugreports.qt.io/browse/QTBUG-63917