Qt Design Viewer

About

Launch Qt 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
• Qt WebAssembly support
• EMSDK (https://emscripten.org/docs/getting_started/downloads.html)

Please see the CMakeLists.txt file for the required CMake and Qt version. For corresponding EMSDK version, please see the Qt for WebAssembly directory.

Building

Note 1: Build instructions are provided (and tested) for Linux and macOS hosts.

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 \
    -DFLOWVIEW_AUTO_QMLDIR=ON

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 and upload the QMLRC file you want to view.

Creating QMLRC package

1. Run Qt Design Studio version 3.0 or newer.
2. Open your project.
3. Go to File -> Export Project -> Generate Deployable Package.

This will create a <project-name>.qmlrc file in the project folder that you can upload to the Qt Design Viewer.

Live version

Check out the live version of the Qt Design Viewer on https://designviewer.qt.io.