qmlweb

JavaScript powered QML Engine

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
   }
}

How to use

Add the library to your web page

Using one of the methods below, install the qmlweb JavaScript library:

npm — npm install qmlweb
Bower — bower 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/qt.js to the list of other JavaScript files in your app's HTML file:

<script type="text/javascript" src="/lib/qt.js"></script>

Auto-load

You may then modify the <body> element to specify what QML file to load when the page is opened.

<!DOCTYPE html>
<html>
  <head>
    <title>QML Auto-load Example</title>
  </head>
  <body style="margin: 0;" data-qml="qml/main.qml">
    <script type="text/javascript" src="/lib/qt.js"></script> 
  </body>
</html>