diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/AreaLightHandle.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/AreaLightHandle.qml
new file mode 100644
index 00000000000..64c827dbcf4
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/AreaLightHandle.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick3D 1.15
+
+DirectionalDraggable {
+    id: handleRoot
+
+    property string currentLabel
+    property point currentMousePos
+    property string propName
+    property real propValue: 0
+    property real newValue: 0
+    property real baseScale: 5
+
+    scale: autoScaler.getScale(Qt.vector3d(baseScale, baseScale, baseScale))
+    length: 3
+    offset: -1.5
+
+    Model {
+        id: handle
+        source: "#Sphere"
+        materials: [ handleRoot.material ]
+        scale: Qt.vector3d(0.02, 0.02, 0.02)
+    }
+
+    AutoScaleHelper {
+        id: autoScaler
+        active: handleRoot.active
+        view3D: handleRoot.view3D
+    }
+
+    property real _startValue
+    property real _startScale
+
+    signal valueCommit()
+    signal valueChange()
+
+    function updateValue(relativeDistance, screenPos)
+    {
+        handleRoot.newValue = Math.round(Math.min(999999, Math.max(0, _startValue + (relativeDistance * _startScale))));
+        var l = Qt.locale();
+        handleRoot.currentLabel = propName + qsTr(": ") + Number(newValue).toLocaleString(l, 'f', 0);
+        handleRoot.currentMousePos = screenPos;
+    }
+
+    onPressed: {
+        _startScale = autoScaler.relativeScale * baseScale;
+        _startValue = propValue;
+        updateValue(0, screenPos);
+    }
+
+    onDragged: {
+        updateValue(relativeDistance, screenPos);
+        handleRoot.valueChange();
+    }
+
+    onReleased: {
+        updateValue(relativeDistance, screenPos);
+        handleRoot.valueCommit();
+    }
+}
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/LightGizmo.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/LightGizmo.qml
index 8ac93a85762..a2c8667370a 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/LightGizmo.qml
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/LightGizmo.qml
@@ -59,6 +59,9 @@ Node {
                                      || spotLightHandle.dragging
                                      || spotLightInnerHandle.dragging
                                      || spotLightFadeHandle.dragging
+                                     || areaHeightHandle.dragging
+                                     || areaWidthHandle.dragging
+
     property point currentMousePos
     property string currentLabel
 
@@ -200,16 +203,64 @@ Node {
             }
         }
 
-        LightModel {
-            id: areaModel
-            geometryName: "Edit 3D AreaLight"
-            geometryType: LightGeometry.Area
-            material: lightMaterial
+        Node {
+            id: areaParts
             visible: lightGizmo.targetNode instanceof AreaLight
-            scale: visible ? Qt.vector3d(lightGizmo.targetNode.width / 2,
-                                         lightGizmo.targetNode.height / 2, 1)
-                             .times(lightGizmo.targetNode.scale)
-                           : Qt.vector3d(1, 1, 1)
+
+            LightModel {
+                id: areaModel
+                geometryName: "Edit 3D AreaLight"
+                geometryType: LightGeometry.Area
+                material: lightMaterial
+                scale: areaParts.visible ? Qt.vector3d(lightGizmo.targetNode.width / 2,
+                                                       lightGizmo.targetNode.height / 2, 1)
+                                           .times(lightGizmo.targetNode.scale)
+                                         : Qt.vector3d(1, 1, 1)
+            }
+
+            AreaLightHandle {
+                id: areaWidthHandle
+                view3D: lightGizmo.view3D
+                color: (hovering || dragging) ? Qt.rgba(1, 1, 1, 1) : lightGizmo.color
+                position: lightGizmo.targetNode instanceof AreaLight ? Qt.vector3d(-areaModel.scale.x, 0, 0)
+                                                                     : Qt.vector3d(0, 0, 0)
+                eulerRotation: Qt.vector3d(0, 0, 90)
+                targetNode: lightGizmo.targetNode instanceof AreaLight ? lightGizmo.targetNode : null
+                active: lightGizmo.targetNode instanceof AreaLight
+                dragHelper: lightGizmo.dragHelper
+                propName: "width"
+                propValue: lightGizmo.targetNode instanceof AreaLight ? targetNode.width : 0
+
+                onNewValueChanged: targetNode.width = newValue
+                onCurrentMousePosChanged: {
+                    lightGizmo.currentMousePos = currentMousePos;
+                    lightGizmo.currentLabel = currentLabel;
+                }
+                onValueChange: lightGizmo.propertyValueChange(propName)
+                onValueCommit: lightGizmo.propertyValueCommit(propName)
+            }
+
+            AreaLightHandle {
+                id: areaHeightHandle
+                view3D: lightGizmo.view3D
+                color: (hovering || dragging) ? Qt.rgba(1, 1, 1, 1) : lightGizmo.color
+                position: lightGizmo.targetNode instanceof AreaLight ? Qt.vector3d(0, -areaModel.scale.y, 0)
+                                                                     : Qt.vector3d(0, 0, 0)
+                eulerRotation: Qt.vector3d(0, 0, 180)
+                targetNode: lightGizmo.targetNode instanceof AreaLight ? lightGizmo.targetNode : null
+                active: lightGizmo.targetNode instanceof AreaLight
+                dragHelper: lightGizmo.dragHelper
+                propName: "height"
+                propValue: lightGizmo.targetNode instanceof AreaLight ? targetNode.height : 0
+
+                onNewValueChanged: targetNode.height = newValue
+                onCurrentMousePosChanged: {
+                    lightGizmo.currentMousePos = currentMousePos;
+                    lightGizmo.currentLabel = currentLabel;
+                }
+                onValueChange: lightGizmo.propertyValueChange(propName)
+                onValueCommit: lightGizmo.propertyValueCommit(propName)
+            }
         }
 
         LightModel {
diff --git a/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc b/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc
index 0519e2e82a0..f1af244e384 100644
--- a/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc
+++ b/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc
@@ -18,8 +18,10 @@
         <file>mockfiles/LightModel.qml</file>
         <file>mockfiles/LightIconGizmo.qml</file>
         <file>mockfiles/LightGizmo.qml</file>
-        <file>mockfiles/SpotLightHandle.qml</file>
         <file>mockfiles/AdjustableArrow.qml</file>
+        <file>mockfiles/FadeHandle.qml</file>
+        <file>mockfiles/AreaLightHandle.qml</file>
+        <file>mockfiles/SpotLightHandle.qml</file>
         <file>mockfiles/IconGizmo.qml</file>
         <file>mockfiles/Overlay2D.qml</file>
         <file>mockfiles/HelperGrid.qml</file>
@@ -53,6 +55,5 @@
         <file>mockfiles/images/point@2x.png</file>
         <file>mockfiles/images/spot.png</file>
         <file>mockfiles/images/spot@2x.png</file>
-        <file>mockfiles/FadeHandle.qml</file>
     </qresource>
 </RCC>