node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

qmlweb

JavaScript powered QML Engine

Join the chat at https://gitter.im/qmlweb/qmlweb Build Status codecov

npm Bower GitHub tag

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:

  • npmnpm install qmlweb
  • Bowerbower install qmlweb
  • GitHub releasestar -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>

How to use with Gulp

See gulp-qmlweb package.

How to extend

See Extending.

History

  1. git://anongit.kde.org/qmlweb, see Webapps written in qml not far from reality anymore,
  2. @JoshuaKolden/qmlweb,
  3. @Plaristote/qmlweb,
  4. @labsin/qmlweb,
  5. @arnopaehler/qmlweb.