Qt Design Viewer

About

Launch Design Studio projects in Your web browser. Or share Your design on the web. The viewer that helps you do this is done with Qt for WebAssembly. The underlying technologies are WebAssembly & emscripten.

Qt Design Viewer works in a variety of web browsers which support WebAssembly, on Desktop and even on mobile.

Prerequisites

• CMake 3.16 or newer
• WebAssembly
  • Qt6.4.3 or newer
  • EMSDK (https://emscripten.org/docs/getting_started/downloads.html)

Building

Note 1: Build instructions are provided for Linux, macOS hosts and for WebAssembly target. Windows should work as well but is not tested.

Note 2: If you're building in a Docker container and you've mounted the source directory into the container, you may need to change the build path pointing out somewhere out of the source directory. Otherwise you may get errors like the following; CMake Error at /opt/qt-v.6.5.0/android-arm64-v8a/lib/cmake/Qt6/QtSyncQtHelpers.cmake:235 (message): syncqt.cpp failed for module QtQuickStudioApplication: Unable to remove file ...

First activate the correct EMSDK version:

cd emsdk
./emsdk install <emsdk-version>
./emsdk activate <emsdk-version>
source ./emsdk_env.sh
cd ..

Then build and install QtQuickDesigner Components for WebAssembly:

cd qtquickdesigner-components
cmake \
    -S . \
    -B build \
    -G Ninja \
    -DCMAKE_PREFIX_PATH=<qt-wasm-path> \
    -DCMAKE_INSTALL_PREFIX=<qt-wasm-path> \
    -DCMAKE_TOOLCHAIN_FILE=<qt-wasm-path>/wasm/lib/cmake/Qt6/qt.toolchain.cmake

cmake --build build
cmake --install build
cd ..

Then build the Qt Design Viewer:

cmake \
    -S . \
    -B build \
    -G Ninja \
    -DCMAKE_PREFIX_PATH=<qt-wasm-path> \
    -DCMAKE_INSTALL_PREFIX=build/install \
    -DCMAKE_TOOLCHAIN_FILE=<qt-wasm-path>/wasm/lib/cmake/Qt6/qt.toolchain.cmake

cmake --build build
cmake --install build

Running

You can use 'qtwasmserver' package to run the Qt Design Viewer:

To install the package:

python -m pip install qtwasmserver

And then run the server:

cd build/install
qtwasmserver .

Then open http://localhost:8000 in Your web browser.

Usage

Compress Your Qml project as a .zip file, ideally including a .qmlproject file. Or use the Build -> Generate Resource File feature of Qt Design Studio 1.3+ to pack Your project in a .qmlrc file.

The Qt Design Viewer lets You drop the .zip/.qmlrc, or load it via a file selector.

You can also select one of the premade examples. If you host the Qt Design Viewer on Your web server, You can offer your own examples. Direct links to hosted examples can be sent like this:

• https://qt-webassembly.io/designviewer/#ClusterTutorial.qmlrc
• https://qt-webassembly.io/designviewer/#CoffeeMachine.qmlrc
• https://qt-webassembly.io/designviewer/#SideMenu.qmlrc

Note

This is a static web page. The Qml application that You load runs and remains locally in Your browser, nothing gets uploaded into the cloud.

Live version

Check out the live version of the Qt Design Viewer.