Create web user interfaces with Qt WebAssembly instead of JavaScript

Get hands-on with Wasm, PyQt, and Qt WebAssembly.
Register or Login to like
Digital creative of a browser on the internet

When I first heard about WebAssembly and the possibility of creating web user interfaces with Qt, just like I would in ordinary C++, I decided to take a deeper look at the technology.

My open source project Pythonic is completely Python-based (PyQt), and I use C++ at work; therefore, this minimal, straightforward WebAssembly tutorial uses Python on the backend and C++ Qt WebAssembly for the frontend. It is aimed at programmers who, like me, are not familiar with web development.

Header Qt C++ frontend


git clone

cd wasm_qt_example


Then visit with your favorite browser.

What is WebAssembly?

WebAssembly (often shortened to Wasm) is designed primarily to execute portable binary code in web applications to achieve high-execution performance. It is intended to coexist with JavaScript, and both frameworks are executed in the same sandbox. Recent performance benchmarks showed that WebAssembly executes roughly 10–40% faster,  depending on the browser, and given its novelty, we can still expect improvements. The downside of this great execution performance is its widespread adoption as the preferred malware language. Crypto miners especially benefit from its performance and harder detection of evidence due to its binary format.


There is a getting started guide on the Qt wiki. I recommend sticking exactly to the steps and versions mentioned in this guide. You may need to select your Qt version carefully, as different versions have different features (such as multi-threading), with improvements happening with each release.

To get executable WebAssembly code, simply pass your Qt C++ application through Emscripten. Emscripten provides the complete toolchain, and the build script couldn't be simpler:

source ~/emsdk/

Building takes roughly 10 times longer than with a standard C++ compiler like Clang or g++. The build script will output the following files:

  • WASM_Client.js
  • WASM_Client.wasm
  • qtlogo.svg
  • qtloader.js
  • WASM_Client.html
  • Makefile (intermediate)

The versions on my (Fedora 30) build system are:

  • emsdk: 1.38.27
  • Qt: 5.13.1


The frontend provides some functionalities based on WebSocket.

Qt-made frontend in browser

  • Send message to server: Send a simple string message to the server with a WebSocket. You could have done this also with a simple HTTP POST request.
  • Start/stop timer: Create a WebSocket and start a timer on the server to send messages to the client at a regular interval.
  • Upload file: Upload a file to the server, where the file is saved to the home directory (~/) of the user who runs the server.

If you adapt the code and face a compiling error like this:

error: static_assert failed due to
 requirement ‘bool(-1 == 1)’ “Required feature http for file
 ../../Qt/5.13.1/wasm_32/include/QtNetwork/qhttpmultipart.h not available.”

it means that the requested feature is not available for Qt Wasm.


The server work is done by Eventlet. I chose Eventlet because it is lightweight and easy to use. Eventlet provides WebSocket functionality and supports threading.

Decorated functions for WebSocket handling

Inside the repository under mysite/template, there is a symbolic link to WASM_Client.html in the root path. The static content under mysite/static is also linked to the root path of the repository. If you adapt the code and do a recompile, you just have to restart Eventlet to update the content to the client.

Eventlet uses the Web Server Gateway Interface for Python (WSGI). The functions that provide the specific functionality are extended with decorators.

Please note that this is an absolute minimum server implementation. It doesn't implement any multi-user capabilities — every client is able to start/stop the timer, even for other clients.


Take this example code as a starting point to get familiar with WebAssembly without wasting time on minor issues. I don't make any claims for completeness nor best-practice integration. I walked through a long learning curve until I got it running to my satisfaction, and I hope this gives you a brief look into this promising technology.

What to read next
User profile image.
Stephan is a technology enthusiast who appreciates open source for the deep insight of how things work. Stephan works as a full time support engineer in the mostly proprietary area of industrial automation software. If possible, he works on his Python-based open source projects, writing articles, or driving motorbike.


I Don't understand how to download qt

I tried following every tutorial found online for installing qt. And still couldn't make the qmake file to run properly can you please update this article to reflect a proper installation method for qt

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.