8 things to

know about
WebAssembly
The quick guide for the basics of Qt for WebAssembly
 Table of
Contents
01. 02. 03. 04.
What is Qt for Is WebAssembly targeted For which use cases is Qt What to build with
WebAssembly? only for the web? for WebAssembly useful? WebAssembly?

05. 06. 07. 08.

How to build applications Which browsers are What limitations need Where to start exploring
with Qt for WebAssembly? supported in Qt for to be considered when Qt for WebAssembly?
WebAssembly? assessing the use of Qt
for WebAssembly?
01.
What is Qt for
WebAssembly?
WebAssembly (abbreviated Wasm) is a bytecode representation
meant to be targeted by high-level programming languages such
as C++ and to be executed in a virtual machine in a web browser.
Qt for WebAssembly lets you run Qt applications on the web.
With Qt for WebAssembly, you can distribute your application as
a web application that runs in a browser sandbox. This approach
is suitable for web-distributed applications that do not require full
access to host device capabilities.

Qt for
From Qt’s perspective, WebAssembly is just another target
platform. Starting with Qt 6.4, it is an officially supported target

WebAssembly
platform for selected, relevant modules. You can download the
binary builds on Linux, macOS, and Windows host platforms and
build your Qt applications to be run inside a web browser.

lets you run

Qt applications
on the web
8 things to know
about WebAssembly
02.
Is WebAssembly
targeted only for the web?

The Qt WebAssembly offering is mainly geared towards the client, i.e., running in the
browser. However, there is widespread usage of WebAssembly on the server side using is too cumbersome, then WebAssembly is a good way to bypass app stores.
technologies like wasi and wasmer. One should mention that WebAssembly comes with restrictions because it runs
in a sandboxed environment in the web browser. WebAssembly does not have
WebAssembly can be used to implement unique use cases, which required much more access by default to the low-level hardware capabilities of the target device.
work previously. With WebAssembly, anybody can take their Qt application to run in a web This has been done to increase the security of WebAssembly applications.
browser by recompiling it for WebAssembly as a target platform. It is also possible to reuse It also allows the applications to run on multiple platforms and many web
parts of a Qt application when building all new web applications combining JavaScript and browsers without modifications.
WebAssembly components. This will reduce the development effort significantly. It also
might improve usability because UI elements are used across different platforms. Remote UIs for embedded devices are becoming more popular. WebAssembly
is a great way to implement remote UIs. Reusing large parts of an existing
Furthermore, applications using WebAssembly technology run in a web browser with zero User Interface implementation allows embedded system makers to create
installation. If Qt applications should be taken to mobile devices and the app store publishing an additional remote display or even replace the in-built display altogether.

8 things to know
about WebAssembly
03.
Qt for WebAssembly has several key use cases:

1· Taking native apps to the web by recompiling Qt C++ code to WebAssembly – often
requires working around platform limitations depending on the application and what
lower-level functionality is needed. This approach allows you to have a web story by
reusing your existing code and development resources.

2· Deploying apps without app stores – zero install, this could be especially interesting

For which use 3·

in e.g. embedded products.

Sharing e.g. embedded designs with stakeholders by sharing only an URL that allows

cases is Qt for running the design in a browser – please see DesignViewer in Qt Design Studio and
[Link]

WebAssembly 4· Embedded devices with no or limited display, occasionally needing a rich UI – reuse
your existing code, with a possibility for a companion app.

useful? 5· Remote control and monitoring of devices in the field - Again you have the opportunity
to reuse existing code, running on standard tablets and desktop computers.

8 things to know
about WebAssembly
04.
What to build
with WebAssembly?

WebAssembly, in general, has an extensive range of potential use cases. It also has superior
performance to pure javascript, which is helpful in more complex web applications. From
the Qt perspective, there are exciting use cases listed in this guide. Additionally, there are Some of the most recent Qt for WebAssembly examples include:
options for the architecture of the code as listed by [Link]:

• Entire codebase in WebAssembly

• Mainframe in WebAssembly, but the UI in JavaScript / HTML DesignViewer QtQuick 3D
• Reuse of existing code by targeting WebAssembly, embedded
in a larger JavaScript / HTML application.

QML Editor Slate

8 things to know
about WebAssembly
05.
How to build
applications
with Qt for
WebAssembly?
Building Qt applications for WebAssembly is similar to building Qt
for other platforms. You need to install an SDK (Emscripten), install
Qt (or build Qt from source), and finally, build the application. Some
differences exist. For example, Qt for WebAssembly supports fewer
modules and features than other Qt builds.

Please see our technical page for more details on building:

[Link]

8 things to know
about WebAssembly
06.
Which browsers are
supported in Qt for
WebAssembly?

Desktop
Qt for WebAssembly is developed and tested on the following browsers:
• Chrome Qt does not make direct use of operating system features, and it makes no
• Firefox difference if, for example, FireFox runs on Windows or macOS. Qt does use some
• Safari operating system adaptations, for example for ctrl/cmd key handling on macOS.
• Edge WebAssembly support in browsers is evolving rapidly. We currently recommend
using Chrome or Firefox for the best possible experience.
Qt should run if the browser supports WebAssembly. Qt has a fixed WebGL requirement,
even if the application does not use hardware-accelerated graphics. Browsers that support Mobile
WebAssembly often support WebGL, though some browsers blacklist older or unsupported Qt for WebAssembly applications runs on mobile browsers such as mobile Safari
GPUs. s/[Link] provides APIs to check if WebGL is available. and Android Chrome.

8 things to know
about WebAssembly
07.
There are some limitations due to the nature of WebAssembly technology, utilizing
the Javascript sandbox for security. The most notable things to take into account are:

• The use of multithreading – needs to be enabled separately and is still experimental

in WebAssembly. Additionally, multithreading requires browser support for
SharedArrayBuffer. See caniuse sharedarraybuffer for the current supported status.

• SIMD performance enhancement – needs to be enabled separately on a need basis.

What limitations • Networking – WebSockets are the basic mechanism, although TCP/UDP sockets can
also be used with limitations. HTTP requests can also be used to the web page origin

need to be
server or to a server that supports CORS. This includes XMLHttpRequest from QML.

• Local file access – The usual dialogs don’t work on WASM. Instantiating and running

considered when
a QFileDialog will display the virtual filesystem instead of the user’s real filesystem.

• Clipboard access – some differences due to the web sandbox. In general, clipboard

assessing the
access requires user permission, which can be obtained by handling an input event
(e.g., CTRL+c) or using the Clipboard API. Browsers that support the Clipboard API are
preferred. Note that a requirement for this API is that the web page is served over

use of Qt for
a secure connection (e.g., https) and that some browsers may require changing
configuration flags.

WebAssembly?
• Debugging and profiling - Wasm debugging is done on the browser javascript console.
Debugging applications on Wasm directly within Qt Creator is not possible.

• Fonts – only a few fonts are supported by default, but the app can enhance this.

For a full list please see our documentation:

[Link]

Browsers may also not support all the latest features,

and some APIs are currently browser-specific.
8 things to know
about WebAssembly
08.
Where to start exploring
Qt for WebAssembly?

Our documentation page could be a good starting point for Qt-related matters:
[Link]

Qt WebAssembly demos:
[Link]

Generic information about WebAssembly:

[Link]

8 things to know
about WebAssembly
About The Qt Company
Qt Group (Nasdaq Helsinki: QTCOM) is a global software company with a strong
presence in more than 70 industries and is the leading independent technology
behind millions of devices and applications. Qt is used by major global companies
and developers worldwide, and the technology enables its customers to deliver
exceptional user experiences and advance their digital transformation initiatives.

Copyright © 2022 The Qt Company. All Rights Reserved.

[Link]