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
• Android
  • Qt6.5.0 or newer
  • OpenSSL (https://github.com/KDAB/android_openssl)
  • Android SDK and NDK (https://developer.android.com/studio)
• WebAssembly
  • Qt6.4.3 or newer
  • EMSDK (https://emscripten.org/docs/getting_started/downloads.html)

Building

Build instructions are provided for Linux, macOS hosts and for Android and WebAssembly targets. Windows should work as well but is not tested.

Note: 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 ...

Android

Note: Android build instructions can also be used on desktop (or host) for testing purposes. Just replace the CMAKE_TOOLCHAIN_FILE path with the path to your Qt host installation.

First build and install QtQuickDesigner Components for Android:

cd qtquickdesigner-components
cmake \
    -S . \
    -B build \
    -G Ninja \
    -DCMAKE_TOOLCHAIN_FILE=<qt-android-path>/lib/cmake/Qt6/qt.toolchain.cmake \
    -DCMAKE_INSTALL_PREFIX=<qt-android-path> \
    -DANDROID_SDK_ROOT=<android-sdk-path> \
    -DANDROID_NDK_ROOT=<android-sdk-path>/ndk/<ndk-version> \
    -DANDROID_OPENSSL_PATH=<openssl-path>

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

Then build the Qt Design Viewer:

cmake \
    -S . \
    -B build \
    -G Ninja \
    -DCMAKE_TOOLCHAIN_FILE=<qt-android-path>/lib/cmake/Qt6/qt.toolchain.cmake \
    -DANDROID_SDK_ROOT=<android-sdk-path> \
    -DANDROID_NDK_ROOT=<android-sdk-path>/ndk/<ndk-version> \
    -DANDROID_OPENSSL_PATH=<openssl-path>

cmake --build build

WebAssembly

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_TOOLCHAIN_FILE=<qt-wasm-path>/wasm/lib/cmake/Qt6/qt.toolchain.cmake \
    -DCMAKE_INSTALL_PREFIX=<qt-wasm-path>

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

Then build the Qt Design Viewer:

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

cmake --build build

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.