This project aims at bringing the power of QML to the web browser. Here's a sample of how QML looks like:
import QtQuick 2.0
Rectangle {
width: 500; height: 200
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: 24; font.bold: true
}
}Using one of the methods below, install the qmlweb JavaScript library:
- npm —
npm install qmlweb - GitHub releases —
tar -xaf v0.2.0.tar.gz - Manually (recommended if you cloned from git) —
npm install && npm run build
Next, simply add lib/qmlweb.js to the list of other JavaScript files in your
app's HTML file:
<script type="text/javascript" src="/lib/qmlweb.js"></script>See the examples directory for more details and complete usage examples.
Note that due to security restrictions (which are there to protect you!)
browsers do not allow loading arbitrary local files, which includes *.qml.
Because of that, to test the goodness of QmlWeb on your own machine, you
have to spin up a local http server, e.g. by running npx http-server.
Or try out qmlweb-viewer.
You can use DOM elements as the base for QML components:
var div = document.getElementById('embed'); // this is your DOM element
var engine = new QmlWeb.QMLEngine(div);
engine.loadFile('qml/main.qml');
engine.start();See also
engine.loadQML
for constructing a QML element from a source string.
You can modify the <body> element to specify what QML file to load when
the page is opened. The loaded QML element will fill the whole page.
<!DOCTYPE html>
<html>
<head>
<title>QML Auto-load Example</title>
<script type="text/javascript" src="/lib/qmlweb.js"></script>
</head>
<body style="margin: 0" data-qml="qml/main.qml">
</body>
</html>You can register QML files as Custom Elements.
Note: browser support for Custom Elements v1 is limited, and QmlWeb does not include a polyfill. You might want to load a polyfill manually.
Registering the element:
QmlWeb.registerElement('qml-main', 'qml/main.qml');Using the element:
<qml-main height="300" color="red" firstName="World"></qml-main>Top-level properties get exported as HTML attributes and are binded to them, real-time updates are possible.
Approximate modules support status for the git version could be viewed on the Projects page.
You can click on the module cards for per-class details.
See gulp-qmlweb package.
See Extending.
That will allow users to run the main Qt process on the server and render on HTML clients through WebGL. Qt WebGL streaming requires one application process on server per each client — only the painting is delegated to the client.
The usecase differs significantly from QmlWeb, as QmlWeb runs all code on the clients, attempting to reuse browser APIs as much as possible to provide better integration. No server-side code is needed, server provides static files.
PureQml aims to implement a language close to original QML, but it does not target 100% compatibility with Qt QML, unlike QmlWeb. They also provide a framework based on their language and target support for a great variety of platforms.
Transplitting all the required Qt/QML libraries to JS/WebAssembley and rendering everything to Canvas provides the best possible compatibility with upstream Qt. That comes at a price, though — the runtime is pretty big, and that approach does not allow to reuse many existing browser APIs and components.
Similar as the above «Qt/QML + Emscripten», but more up to date. Upstream issue: QTBUG-63917.
Examples at https://msorvig.github.io/qt-webassembly-examples/.