node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »


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.