isabella232 / qtdesignviewer

Viewer application for .qmlproject based QML applications

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.

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.