QML

<h2 id="adoption">Adoption</h2>
<ul><li><a href="/facts/KDE_Plasma_4/TUKWBM1W">KDE Plasma 4</a>,<a class="footnote-ref" id="fnref:8" href="#fn:8">8</a> <a href="/facts/KDE_Plasma_5/ao7x6z7s">KDE Plasma 5</a> and Plasma 6 through <a href="/facts/Plasma-framework/fuAzewMT">Plasma-framework</a></li>
<li><a href="https://liri.io/">Liri OS</a></li>
<li><a href="/facts/Simple_Desktop_Display_Manager/mThPp8Ps">Simple Desktop Display Manager</a></li>
<li><a href="https://remarkable.com/">reMarkable tablet device</a><a class="footnote-ref" id="fnref:9" href="#fn:9">9</a><a class="footnote-ref" id="fnref:10" href="#fn:10">10</a></li>
<li><a href="/facts/Unity_(user_interface)/azotpDlu">Unity2D</a><a class="footnote-ref" id="fnref:11" href="#fn:11">11</a></li>
<li><a href="/facts/Sailfish_OS/YAfAbJEc">Sailfish OS</a><a class="footnote-ref" id="fnref:12" href="#fn:12">12</a><a class="footnote-ref" id="fnref:13" href="#fn:13">13</a><a class="footnote-ref" id="fnref:14" href="#fn:14">14</a></li>
<li><a href="/facts/BlackBerry_10/WCev9y98">BlackBerry 10</a><a class="footnote-ref" id="fnref:15" href="#fn:15">15</a></li>
<li><a href="/facts/MeeGo/E2wvM6YC">MeeGo</a><a class="footnote-ref" id="fnref:16" href="#fn:16">16</a><a class="footnote-ref" id="fnref:17" href="#fn:17">17</a></li>
<li><a href="/facts/Maemo/gQyp5ehf">Maemo</a><a class="footnote-ref" id="fnref:18" href="#fn:18">18</a></li>
<li><a href="/facts/Tizen/gNrC0mnG">Tizen</a><a class="footnote-ref" id="fnref:19" href="#fn:19">19</a></li>
<li><a href="/facts/Mer_(software_distribution)/bk7Fnh06">Mer</a><a class="footnote-ref" id="fnref:20" href="#fn:20">20</a><a class="footnote-ref" id="fnref:21" href="#fn:21">21</a><a class="footnote-ref" id="fnref:22" href="#fn:22">22</a></li>
<li><a href="/facts/Ubuntu_Phone/Wat4drUo">Ubuntu Phone</a><a class="footnote-ref" id="fnref:23" href="#fn:23">23</a></li>
<li><a href="/facts/Lumina_(desktop_environment)/UconFA07">Lumina (desktop environment)</a><a class="footnote-ref" id="fnref:24" href="#fn:24">24</a></li>
<li>Many <a href="https://github.com/search?l=QML&q=qml&type=Repositories">open-source applications</a></li></ul>
<h2 id="syntax-semantics">Syntax, semantics</h2>
Some <a href="/facts/Syntax_(programming_languages)/zM5oInza">syntax</a> examples follow:

<h3>Basic syntax</h3>
 import QtQuick

Rectangle {
     id: canvas
     width: 250
     height: 200
     color: "blue"

Image {
         id: logo
         source: "pics/logo.png"
         anchors.centerIn: parent
         x: canvas.height / 5
     }
 }

Objects are specified by their type, followed by a pair of braces. Object types always begin with a capital letter. In the example above, there are two objects, a Rectangle; and its child, an Image. Between the braces, one can specify information about the object, such as its properties. Properties are specified as property: value. In the example above, the Image has a property named source, which has been assigned the value pics/logo.png. The property and its value are separated by a colon.
The id property
Each object can be given a special unique property called an id. Assigning an id enables the object to be referred to by other objects and scripts. The first Rectangle element below has an id, myRect. The second Rectangle element defines its own width by referring to myRect.width, which means it will have the same width value as the first Rectangle element.

 Item {
 Rectangle {
 id: myRect
 width: 120
 height: 100
 }
 Rectangle {
 width: myRect.width
 height: 200
 }
 }

An id must begin with a lower-case letter or an underscore, and can contain no characters other than letters, digits, and underscores.

<h3>Property bindings</h3>
A property <a href="/facts/Data_binding/qp1TkWzk">binding</a> specifies the value of a property in a declarative way. The property value is automatically updated if the other properties or data values change, following the <a href="/facts/Reactive_programming/Jj8CsdKY">reactive programming</a> paradigm.
Property bindings are created implicitly in QML whenever a property is assigned a JavaScript expression. The following QML uses two property bindings to connect the size of the rectangle to that of otherItem.

 Rectangle {
 width: otherItem.width
 height: otherItem.height
 }

QML extends a standards-compliant JavaScript engine, so any valid JavaScript expression can be used as a property binding. Bindings can access object properties, make function calls, and even use built-in JavaScript objects like Date and Math.

 Rectangle {
 function calculateMyHeight() {
 return Math.max(otherItem.height, thirdItem.height);
 }
 anchors.centerIn: parent
 width: Math.min(otherItem.width, 10)
 height: calculateMyHeight()
 color: width > 10 ? "blue" : "red"
 }

<h3>States</h3>
<a href="/facts/Finite-state_machine/GMusWd0a">States</a> are a mechanism to combine changes to properties in a semantic unit. A button for example has a pressed and a non-pressed state, an address book application could have a read-only and an edit state for contacts. Every element has an "implicit" base state. Every other state is described by listing the properties and values of those elements which differ from the base state.
Example:
In the default state, myRect is positioned at 0,0. In the "moved" state, it is positioned at 50,50. Clicking within the mouse area changes the state from the default state to the "moved" state, thus moving the rectangle.

 import QtQuick

Item {
     id: myItem
     width: 200; height: 200

Rectangle {
         id: myRect
         width: 100; height: 100
         color: "red"
     }
     states: [
         State {
             name: "moved"
             PropertyChanges {
                 target: myRect
                 x: 50
                 y: 50
             }
         }
     ]
     MouseArea {
         anchors.fill: parent
         onClicked: myItem.state = 'moved'
     }
 }

State changes can be animated using Transitions.
For example, adding this code to the above Item element animates the transition to the "moved" state:

 transitions: [
 Transition {
 from: "*"
 to: "moved"
 NumberAnimation { properties: "x,y"; duration: 500 }
 }
 ]

<h3>Animation</h3>
Animations in QML are done by animating properties of objects. Properties of type real, int, color, rect, point, size, and vector3d can all be animated.
QML supports three main forms of animation: basic property animation, transitions, and property behaviors.
The simplest form of animation is a PropertyAnimation, which can animate all of the property types listed above. A property animation can be specified as a value source using the Animation on property syntax. This is especially useful for repeating animations.
The following example creates a bouncing effect:

 Rectangle {
 id: rect
 width: 120; height: 200

Image {
         id: img
         source: "pics/qt.png"
         x: 60 - img.width/2
         y: 0

SequentialAnimation on y {
             loops: Animation.Infinite
             NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
             PauseAnimation { duration: 1000 }
             NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
         }
     }
 }

<h2 id="qtc-integration">Qt/C++ integration</h2>
Usage of QML does not require Qt/C++ knowledge to use, but it can be easily extended via Qt.<a class="footnote-ref" id="fnref:25" href="#fn:25">25</a><a class="footnote-ref" id="fnref:26" href="#fn:26">26</a> Any C++ class derived from QObject can be easily registered as a type which can then be instantiated in QML.

<h3>Familiar concepts</h3>
QML provides direct access to the following concepts from Qt:

<ul><li>QObject signals – can trigger callbacks in JavaScript</li>
<li>QObject slots – available as functions to call in JavaScript</li>
<li>QObject properties – available as variables in JavaScript, and for bindings</li>
<li>QWindow – Window creates a QML scene in a window</li>
<li>Q*Model – used directly in data binding (e.g. QAbstractItemModel)<a class="footnote-ref" id="fnref:27" href="#fn:27">27</a><a class="footnote-ref" id="fnref:28" href="#fn:28">28</a><a class="footnote-ref" id="fnref:29" href="#fn:29">29</a></li></ul>
<h3>Signal handlers</h3>
Signal handlers are JavaScript callbacks which allow imperative actions to be taken in response to an event. For instance, the MouseArea element has signal handlers to handle mouse press, release and click:

 MouseArea {
 onPressed: console.log("mouse button pressed")
 }

All signal handler names begin with "on".

<h2 id="development-tools">Development tools</h2>
Because QML and JavaScript are very similar, almost all code editors supporting JavaScript will work. However full support for <a href="/facts/Syntax_highlighting/cLCr5a6w">syntax highlighting</a>, code completion, integrated help, and a WYSIWYG editor are available in the free cross-platform IDE <a href="/facts/Qt_Creator/2kNpQqME">Qt Creator</a> since version 2.1 and many other IDEs.
The qml executable can be used to run a QML file as a script. If the QML file begins with a <a href="/facts/Shebang_(Unix)/brtu1F1o">shebang</a> it can be made directly executable. However packaging an application for deployment (especially on mobile platforms) generally involves writing a simple C++ launcher and packaging the needed QML files as resources.

<h2 id="external-links">External links</h2>
<ul><li><a href="http://doc.qt.io/qt-5/qmlreference.html">QML Reference Documentation</a></li>
<li><a href="http://doc.qt.io/qt-5/qmlfirststeps.html">First steps with QML</a></li>
<li><a href="http://doc.qt.io/qt-5/qtquick-codesamples.html">QML Examples and Tutorials</a></li>
<li><a href="http://blog.qt.io/">Qt Blog</a></li>
<li><a href="http://doc.qt.io/qt-5/qml-tutorial.html">QML Tutorial</a></li>
<li><a href="http://wiki.qt.io/Developer_Guides">Qt Developer Guides</a></li>
<li><a href="http://blog.qt.io/blog/2010/10/19/exporting-qml-from-photoshop-and-gimp/">Exporting QML from Photoshop and GIMP</a></li>
<li><a href="https://www.qt.io/product/qt6/qml-book">QML Book</a></li></ul>
<h3>How-tos</h3>
<ul><li><a href="http://doc.qt.io/qt-5/qtqml-cppintegration-topic.html">Integrating QML and C++</a></li>
<li><a href="http://doc.qt.io/qt-5/qtqml-cppclasses-topic.html">Important C++ Classes Provided By The Qt QML Module</a></li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1">"Qt Quick Tutorial". August 7, 2020. Retrieved March 9, 2025. <a href="https://wiki.qt.io/Qt_Quick_Tutorial" target="_blank">https://wiki.qt.io/Qt_Quick_Tutorial</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></li>
<li id="fn:2">"Qt 3D Overview: Qt 3D 5.13.1". doc.qt.io. <a href="https://doc.qt.io/qt-5/qt3d-overview.html" target="_blank">https://doc.qt.io/qt-5/qt3d-overview.html</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></li>
<li id="fn:3">"All QML Types: Qt 5.13". doc.qt.io. Retrieved September 7, 2019. <a href="https://doc.qt.io/qt-5/qmltypes.html" target="_blank">https://doc.qt.io/qt-5/qmltypes.html</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></li>
<li id="fn:4">Knoll, Lars (2013-04-15). "Evolution of the QML engine, part 1". Retrieved 2018-05-11. <a href="http://blog.qt.io/blog/2013/04/15/evolution-of-the-qml-engine-part-1/" target="_blank">http://blog.qt.io/blog/2013/04/15/evolution-of-the-qml-engine-part-1/</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></li>
<li id="fn:5">"What's New in Qt 5.2". Retrieved 2018-05-11. <a href="http://doc.qt.io/qt-5/whatsnew52.html" target="_blank">http://doc.qt.io/qt-5/whatsnew52.html</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></li>
<li id="fn:6">"Qt Quick Compiler". Retrieved September 7, 2019. <a href="http://doc.qt.io/QtQuickCompiler/" target="_blank">http://doc.qt.io/QtQuickCompiler/</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></li>
<li id="fn:7">"Deploying QML Applications: Qt 5.13". doc.qt.io. Retrieved September 7, 2019. <a href="https://doc.qt.io/qt-5/qtquick-deployment.html#qml-caching" target="_blank">https://doc.qt.io/qt-5/qtquick-deployment.html#qml-caching</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></li>
<li id="fn:8">"Development/Tutorials/Plasma4/QML/GettingStarted". KDE TechBase. KDE. <a href="https://techbase.kde.org/Development/Tutorials/Plasma4/QML/GettingStarted" target="_blank">https://techbase.kde.org/Development/Tutorials/Plasma4/QML/GettingStarted</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></li>
<li id="fn:9">Dragly, Svenn-Arne (December 2017). "Developing for the reMarkable tablet". dragly. <a href="https://dragly.org/2017/12/01/developing-for-the-remarkable/" target="_blank">https://dragly.org/2017/12/01/developing-for-the-remarkable/</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></li>
<li id="fn:10">"QML Demo for the reMarkable Paper Tablet". GitHub. 9 March 2022. <a href="https://github.com/reHackable/reHackable-HelloWorld" target="_blank">https://github.com/reHackable/reHackable-HelloWorld</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></li>
<li id="fn:11">"Ubuntu's Unity Written In Qt/QML For "Unity Next"". Michael Larabel. <a href="https://www.phoronix.com/scan.php?page=news_item&px=MTMxNzM" target="_blank">https://www.phoronix.com/scan.php?page=news_item&px=MTMxNzM</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></li>
<li id="fn:12">"Combining C++ with QML in Sailfish OS applications". <a href="https://sailfishos.org/develop/tutorials/combining-c-with-qml/" target="_blank">https://sailfishos.org/develop/tutorials/combining-c-with-qml/</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></li>
<li id="fn:13">"Tutorial - QML Live Coding With Qt QmlLive". <a href="https://sailfishos.org/wiki/Tutorial_-_QML_Live_Coding_With_Qt_QmlLive" target="_blank">https://sailfishos.org/wiki/Tutorial_-_QML_Live_Coding_With_Qt_QmlLive</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></li>
<li id="fn:14">"QML to C++ and C++ to QML". Jolla. <a href="https://together.jolla.com/question/86050/qml-to-c-and-c-to-qml/" target="_blank">https://together.jolla.com/question/86050/qml-to-c-and-c-to-qml/</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></li>
<li id="fn:15">"QML fundamentals". Blackberry. <a href="http://developer.blackberry.com/native/documentation/dev/qml_fundamentals/" target="_blank">http://developer.blackberry.com/native/documentation/dev/qml_fundamentals/</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></li>
<li id="fn:16">"Intro to QML for Meego". Nokia. Archived from the original on 2018-01-04. Retrieved 2018-01-03. <a href="https://web.archive.org/web/20180104015312/https://slidedocument.com/intro-to-qml-meego" target="_blank">https://web.archive.org/web/20180104015312/https://slidedocument.com/intro-to-qml-meego</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></li>
<li id="fn:17">"MeeGo and Qt–QML demos assault MWC". IoT Gadgets. 23 February 2011. <a href="https://www.iotgadgets.com/2011/02/meego-qt-qml-demo-assaults-mwc-nokia-intel/" target="_blank">https://www.iotgadgets.com/2011/02/meego-qt-qml-demo-assaults-mwc-nokia-intel/</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></li>
<li id="fn:18">"QML on N900". maemo.org. Maemo Community. <a href="http://wiki.maemo.org/QML" target="_blank">http://wiki.maemo.org/QML</a> <a href="#fnref:18" class="footnote-back-ref">↩</a></li>
<li id="fn:19">"Qt Launches on Tizen with Standard Look and Feel". 20 May 2013. <a href="http://qtfortizen.blogspot.no/2013/05/1.0alpha1.html" target="_blank">http://qtfortizen.blogspot.no/2013/05/1.0alpha1.html</a> <a href="#fnref:19" class="footnote-back-ref">↩</a></li>
<li id="fn:20">"Mer". <a href="http://www.merproject.org/" target="_blank">http://www.merproject.org/</a> <a href="#fnref:20" class="footnote-back-ref">↩</a></li>
<li id="fn:21">"Mer wiki". <a href="https://wiki.merproject.org/wiki/Main_Page" target="_blank">https://wiki.merproject.org/wiki/Main_Page</a> <a href="#fnref:21" class="footnote-back-ref">↩</a></li>
<li id="fn:22">"Lipstick QML UI on MeeGo CE / Mer". IoT Gadgets. 6 October 2011. <a href="https://www.iotgadgets.com/2011/10/lipstick-qml-ui-meego-ce-mer/" target="_blank">https://www.iotgadgets.com/2011/10/lipstick-qml-ui-meego-ce-mer/</a> <a href="#fnref:22" class="footnote-back-ref">↩</a></li>
<li id="fn:23">"QML - the best tool to unlock your creativity". Ubuntu. <a href="https://docs.ubuntu.com/phone/en/apps/qml/" target="_blank">https://docs.ubuntu.com/phone/en/apps/qml/</a> <a href="#fnref:23" class="footnote-back-ref">↩</a></li>
<li id="fn:24">"Looking at Lumina Desktop 2.0". TrueOS. 19 August 2020. <a href="https://www.trueos.org/blog/looking-lumina-desktop-2-0/" target="_blank">https://www.trueos.org/blog/looking-lumina-desktop-2-0/</a> <a href="#fnref:24" class="footnote-back-ref">↩</a></li>
<li id="fn:25">Alpert, Alan. "The Qt/QML User Story". Incorrigible Imaginings. <a href="https://imaginitis.net/the-qtqml-user-story-redux/" target="_blank">https://imaginitis.net/the-qtqml-user-story-redux/</a> <a href="#fnref:25" class="footnote-back-ref">↩</a></li>
<li id="fn:26">Alpert, Alan. "The many ways to unite QML and C++". Qt Developer Days. BlackBerry. <a href="https://www.qtdeveloperdays.com/north-america/many-ways-unite-qml-and-c.html" target="_blank">https://www.qtdeveloperdays.com/north-america/many-ways-unite-qml-and-c.html</a> <a href="#fnref:26" class="footnote-back-ref">↩</a></li>
<li id="fn:27">Dahlbom, J (22 April 2010). "QAbstractItemModels in QML views". The missing pieces. <a href="https://jdahlbom.wordpress.com/2010/04/22/qabstractitemmodels-in-qml-views/" target="_blank">https://jdahlbom.wordpress.com/2010/04/22/qabstractitemmodels-in-qml-views/</a> <a href="#fnref:27" class="footnote-back-ref">↩</a></li>
<li id="fn:28">"Sorting and filtering a TableView". The Qt Company. <a href="https://blog.qt.io/blog/2014/04/16/qt-weekly-6-sorting-and-filtering-a-tableview/" target="_blank">https://blog.qt.io/blog/2014/04/16/qt-weekly-6-sorting-and-filtering-a-tableview/</a> <a href="#fnref:28" class="footnote-back-ref">↩</a></li>
<li id="fn:29">Brad, van der Laan (11 July 2014). "How to use Qt's QSortFilterProxyModel". ImaginativeThinking. <a href="http://imaginativethinking.ca/use-qt-qsortfilterproxymodel/" target="_blank">http://imaginativethinking.ca/use-qt-qsortfilterproxymodel/</a> <a href="#fnref:29" class="footnote-back-ref">↩</a></li>
</ol>

QML open-in-new

QML