Back to Blog home

Web based Qt Design Viewer

Published on Wednesday October 23, 2019 by Thomas Hartmann in Qt Quick Design QML Qt for WebAssembly Qt QML UI/UX UX Qt Design Studio | Comments

Based on Qt for WebAssembly we created a QML viewer that runs in your web browser. This means that your QML application can now run in the web browser.

Here you can find the latest version of the Qt Design Viewer to test this out.

QtDesignViewer

The Qt Design Viewer comes together with a few ready-made examples.

To run a custom QML application it has to come with a .qmlproject file that defines the main QML file and the import paths. This is the same project file format used by Qt Design Studio and Qt Creator for QML projects.

The project folder has to be compressed as a ZIP file and then uploaded to the Qt Design Viewer.

You can also generate a resource file out of your project using Qt Design Studio 1.3 and upload the package that is automatically created.

resourcefile

We tested the Qt Design Viewer with recent versions of Chrome, Safari, FireFox and Edge and QML applications run really well. The startup and compilation time depends on your browser and configuration, but the actual performance of the application, once it is started, is indistinguishable, from the same application running on the desktop.

Qt Design Viewer ships with most QML modules that are part of Qt and is based on a snapshot of Qt 5.14.

The Qt Design Viewer also runs on Android and iOS and therefore provides a simple way to test your designs on those platforms.

Please try out the Qt Design Viewer, but keep in mind that this is a technical preview. Bugs and issues can be reported here. The viewer application is fully open source.

 

 

 

 

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.

The blog comment system has been migrated to a new platform. If you face any issues, please let us know via feedback@qt.io.