node package manager


JavaScript powered QML Engine

Join the chat at 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>


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

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

How to use with Gulp

See gulp-qmlweb package.

How to extend

See Extending.


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