Add initial version of studio components and effects

Change-Id: I8a1836693dec4fef44b6e209e558b9033c119d15
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

127 files changed, 6093 insertions, 2 deletions

diff --git a/.qmake.conf b/.qmake.conf
new file mode 100644
index 0000000..bc074d5
--- /dev/null
+++ b/.qmake.conf
@@ -0,0 +1,6 @@
+load(qt_build_config)
+
+CONFIG += warning_clean
+DEFINES += QT_NO_FOREACH
+
+MODULE_VERSION = 5.12.0
diff --git a/imports/imports/imports.pro b/imports/imports/imports.pro
deleted file mode 100644
index fce98ce..0000000
--- a/imports/imports/imports.pro
+++ /dev/null
@@ -1,2 +0,0 @@
-TEMPLATE = subdirs
-SUBDIRS =
diff --git a/src/imports/components/ArcItem.qml b/src/imports/components/ArcItem.qml
new file mode 100644
index 0000000..bae5e35
--- /dev/null
+++ b/src/imports/components/ArcItem.qml
@@ -0,0 +1,242 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick 2.9
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias capStyle: path.capStyle
+    property alias dashOffset: path.dashOffset
+
+    property real begin: 0
+    property real end: 90
+
+    property real arcWidth: 10
+
+    property real arcWidthBegin: arcWidth
+    property real arcWidthEnd: arcWidth
+
+    property real radiusInnerAdjust: 0
+    property real radiusOuterAdjust: 0
+
+    property real alpha: end - begin
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+    property bool outlineArc: false
+
+    property bool round: false
+
+    property bool roundEnd: round
+    property bool roundBegin: round
+
+    function myCos(angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        return Math.cos(angleInRadians)
+    }
+
+    function mySin(angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        return Math.sin(angleInRadians)
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var x = centerX + radius * Math.cos(angleInRadians)
+        return x
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var y = centerY + radius * Math.sin(angleInRadians);
+        return y
+    }
+
+    function calc()
+    {
+        path.__xRadius = root.width / 2 - root.strokeWidth / 2
+        path.__yRadius = root.height / 2 - root.strokeWidth / 2
+
+        path.__Xcenter = root.width / 2
+        path.__Ycenter = root.height / 2
+
+        path.startX = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.begin - 180) +  root.__beginOff * myCos(root.begin)
+        path.startY = root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.begin - 180) + root.__beginOff * mySin(root.begin)
+
+        arc1.x = root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.end - 180) + root.__endOff * myCos(root.end)
+        arc1.y = root.polarToCartesianY(path.__Xcenter, path.__Ycenter,  path.__yRadius, root.end - 180) + root.__endOff * mySin(root.end)
+
+        arc1.radiusX =  path.__xRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
+        arc1.radiusY =  path.__yRadius - root.__endOff / 2 -root.__beginOff / 2 + root.radiusOuterAdjust
+
+        arc1.useLargeArc =  root.alpha > 180
+    }
+
+
+    onWidthChanged: calc()
+    onBeginChanged: calc()
+    onEndChanged: calc()
+    onAlphaChanged: calc()
+
+    ShapePath {
+        //closed: true
+        id: path
+
+        property real __xRadius
+        property real __yRadius
+
+        property real __Xcenter
+        property real __Ycenter
+
+        fillColor: "transparent"
+        strokeColor: Qt.transparent
+        strokeWidth: 1
+        capStyle: ShapePath.FlatCap
+    }
+
+    property real __beginOff: {
+
+        if (root.arcWidthEnd > root.arcWidthBegin)
+            return (root.arcWidthEnd - root.arcWidthBegin) / 2
+
+            return 0;
+    }
+
+    property real __endOff: {
+
+        if (root.arcWidthBegin > root.arcWidthEnd)
+            return (root.arcWidthBegin - root.arcWidthEnd) / 2
+
+            return 0;
+    }
+
+    property real __startP: root.arcWidthBegin + __beginOff
+    property real __endP: root.arcWidthEnd + __endOff
+
+    Item {
+        id: shapes
+        PathArc {
+            id: arc1
+            property bool add: true
+        }
+
+        PathLine {
+            relativeX: root.arcWidthEnd * myCos(root.end)
+            relativeY: root.arcWidthEnd * mySin(root.end)
+            property bool add: !root.roundEnd && (root.outlineArc && root.alpha < 360)
+
+        }
+
+        PathArc {
+            relativeX: root.arcWidthEnd * myCos(root.end)
+            relativeY: root.arcWidthEnd * mySin(root.end)
+            radiusX: root.arcWidthEnd /2
+            radiusY: root.arcWidthEnd /2
+            property bool add: root.roundEnd && (root.outlineArc && root.alpha < 360)
+        }
+
+        PathMove {
+            relativeX: root.arcWidthEnd * myCos(root.end)
+            relativeY: root.arcWidthEnd * mySin(root.end)
+            property bool add: root.outlineArc && root.alpha == 360
+        }
+
+        PathArc {
+            id: arc2
+            useLargeArc: arc1.useLargeArc
+
+            radiusX: path.__xRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2  + root.radiusInnerAdjust
+            radiusY:path.__yRadius - root.arcWidthBegin + root.__beginOff / 2 + root.__endOff / 2 + root.radiusInnerAdjust
+
+            x: path.startX + root.arcWidthBegin * myCos(root.begin)
+            y: path.startY + root.arcWidthBegin * mySin(root.begin)
+
+            direction: PathArc.Counterclockwise
+
+            property bool add: root.outlineArc
+        }
+
+
+        PathLine {
+            x: path.startX
+            y: path.startY
+            property bool add: !root.roundBegin && root.outlineArc && root.alpha < 360
+
+        }
+
+        PathArc {
+            x: path.startX
+            y: path.startY
+            radiusX: root.arcWidthEnd /2
+            radiusY: root.arcWidthEnd /2
+            property bool add: root.roundBegin && root.outlineArc && root.alpha < 360
+        }
+
+        PathMove {
+            x: path.startX
+            y: path.startY
+            property bool add: root.outlineArc && root.alpha == 360
+        }
+    }
+
+    function invalidatePaths() {
+        if (!root.__completed)
+            return
+
+        for (var i = 0; i < shapes.resources.length; i++) {
+            var s = shapes.resources[i];
+            if (s.add)
+                path.pathElements.push(s)
+        }
+
+    }
+
+    property bool __completed: false
+
+    Component.onCompleted: {
+        root.__completed = true
+        invalidatePaths()
+        calc()
+    }
+}
diff --git a/src/imports/components/BorderItem.qml b/src/imports/components/BorderItem.qml
new file mode 100644
index 0000000..f46dc9a
--- /dev/null
+++ b/src/imports/components/BorderItem.qml
@@ -0,0 +1,189 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+    width: 200
+    height: 150
+
+    property int radius: 10
+
+    property int topLeftRadius: radius
+    property int bottomLeftRadius: radius
+    property int topRightRadius: radius
+    property int bottomRightRadius: radius
+
+    //property alias gradient: path.fillGradient
+
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias dashOffset: path.dashOffset
+    property alias capStyle: path.capStyle
+
+    //property alias fillColor: path.fillColor
+
+    property bool drawTop: true
+    property bool drawBottom: true
+    property bool drawRight: true
+    property bool drawLeft: true
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    Item {
+        anchors.fill: parent
+        anchors.margins: -root.strokeWidth / 2
+    }
+
+    ShapePath {
+        id: path
+        joinStyle: ShapePath.MiterJoin
+
+        strokeWidth: 4
+        strokeColor: "red"
+        fillColor: "transparent"
+
+        startX: root.topLeftRadius
+        startY: 0
+
+
+    }
+
+
+    Item {
+        id: shapes
+
+        PathLine {
+            x: root.width - root.topRightRadius
+            y: 0
+            property bool add: root.drawTop
+        }
+
+        PathArc {
+            x: root.width
+            y: root.topRightRadius
+            radiusX: root.topRightRadius
+            radiusY: root.topRightRadius
+            property bool add: root.drawTop && root.drawRight
+        }
+
+        PathMove {
+            x: root.width
+            y: root.topRightRadius
+            property bool add: !root.drawTop
+        }
+
+
+        PathLine {
+            x: root.width
+            y: root.height-root.bottomRightRadius
+            property bool add: root.drawRight
+        }
+
+        PathArc {
+            x: root.width-root.bottomRightRadius
+            y: root.height
+            radiusX: root.bottomRightRadius
+            radiusY: root.bottomRightRadius
+            property bool add: root.drawRight && root.drawBottom
+        }
+
+        PathMove {
+            x: root.width-root.bottomRightRadius
+            y: root.height
+            property bool add: !root.drawRight
+        }
+
+        PathLine {
+            x: root.bottomLeftRadius
+            y: root.height
+            property bool add: root.drawBottom
+        }
+
+        PathArc {
+            x: 0
+            y: root.height-root.bottomLeftRadius
+            radiusX: root.bottomLeftRadius
+            radiusY: root.bottomLeftRadius
+            property bool add: root.drawBottom && root.drawLeft
+        }
+
+        PathMove {
+            x: 0
+            y: root.height-root.bottomLeftRadius
+            property bool add: !root.drawBottom
+        }
+
+        PathLine {
+            x: 0
+            y: root.topLeftRadius
+            property bool add: root.drawLeft
+        }
+
+        PathArc {
+            x: root.topLeftRadius
+            y: 0
+            radiusX: root.topLeftRadius
+            radiusY: root.topLeftRadius
+            property bool add: root.drawTop && root.drawLeft
+        }
+    }
+
+    //onDrawBottomChanged: invalidatePaths()
+    //onDrawTopChanged: invalidatePaths()
+    //onDrawLeftChanged: invalidatePaths()
+    //onDrawRightChanged: invalidatePaths()
+
+    function invalidatePaths() {
+        if (!root.__completed)
+            return
+
+        for (var i = 0; i < shapes.resources.length; i++) {
+            var s = shapes.resources[i];
+            if (s.add)
+                path.pathElements.push(s)
+        }
+
+    }
+
+    property bool __completed: false
+
+    Component.onCompleted: {
+        root.__completed = true
+        invalidatePaths()
+    }
+}
diff --git a/src/imports/components/FlipableItem.qml b/src/imports/components/FlipableItem.qml
new file mode 100644
index 0000000..3ce316b
--- /dev/null
+++ b/src/imports/components/FlipableItem.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.9
+
+Flipable {
+    id: flipable
+    width: 240
+    height: 240
+
+    property alias flipAngle: rotation.angle
+    property real opacityFront: 1
+    property real opacityBack: 1
+    property int xAxis: 0
+    property int yAxis: 1
+
+    Binding {
+        target: flipable.front
+        value: opacityFront
+        property: "opacity"
+        when: flipable.front !== undefined
+    }
+
+    Binding {
+        target: flipable.back
+        value: opacityBack
+        property: "opacity"
+        when: flipable.back !== undefined
+    }
+
+    property bool flipped: false
+
+
+    Component.onCompleted: {
+        flipable.front = flipable.children[0]
+        flipable.back = flipable.children[1]
+    }
+
+    transform: Rotation {
+        id: rotation
+        origin.x: flipable.width/2
+        origin.y: flipable.height/2
+        axis.x: flipable.xAxis; axis.y: flipable.yAxis; axis.z: 0
+        angle: 0    // the default angle
+    }
+}
diff --git a/src/imports/components/IsoItem.qml b/src/imports/components/IsoItem.qml
new file mode 100644
index 0000000..301489d
--- /dev/null
+++ b/src/imports/components/IsoItem.qml
@@ -0,0 +1,36 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick 2.9
+import QtQuick.Extras 1.4
+
+Picture {
+
+}
diff --git a/src/imports/components/PieItem.qml b/src/imports/components/PieItem.qml
new file mode 100644
index 0000000..09120da
--- /dev/null
+++ b/src/imports/components/PieItem.qml
@@ -0,0 +1,127 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick 2.9
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias dashOffset: path.dashOffset
+    property alias capStyle: path.capStyle
+
+    property real begin: 0
+    property real end: 90
+
+    property real alpha: end - begin
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    property bool hideLine: {
+        if (alpha <= 0)
+            return true
+        if (alpha >= 360)
+            return true
+        return false
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var x = centerX + radius * Math.cos(angleInRadians)
+        return x
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        var angleInRadians = angleInDegrees * Math.PI / 180.0;
+        var y = centerY + radius * Math.sin(angleInRadians);
+        return y
+    }
+
+    ShapePath {
+        id: path
+
+        property real __xRadius: width / 2 - strokeWidth / 2
+        property real __yRadius: height / 2 - strokeWidth / 2
+
+        property real __Xcenter: width / 2
+        property real __Ycenter: height / 2
+
+        fillColor: "transparent"
+        strokeColor: Qt.transparent
+        capStyle: ShapePath.FlatCap
+
+        strokeWidth: 1
+
+        startX: root.hideLine ? root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.begin - 180)
+                              : __Xcenter
+        startY: root.hideLine ? root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.begin - 180)
+                              : __Ycenter
+        //startX: __Xcenter
+        //startY: __Ycenter
+
+        PathLine {
+            x: root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.begin - 180)
+            y: root.polarToCartesianY(path.__Xcenter, path.__Ycenter, path.__yRadius, root.begin - 180)
+        }
+
+        PathArc {
+            id: arc
+
+            x: root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.end - 180)
+            y: root.polarToCartesianY(path.__Xcenter, path.__Ycenter,  path.__yRadius, root.end - 180)
+
+            radiusY: path.__yRadius;
+            radiusX: path.__xRadius;
+
+            useLargeArc: root.alpha > 180
+        }
+
+        PathLine {
+            x: root.hideLine ? root.polarToCartesianX(path.__Xcenter, path.__Ycenter, path.__xRadius, root.end - 180)
+                             : path.__Xcenter
+            y: root.hideLine ? root.polarToCartesianY(path.__Xcenter, path.__Ycenter,  path.__yRadius, root.end - 180)
+                             : path.__Ycenter
+        }
+    }
+}
+
diff --git a/src/imports/components/RectangleItem.qml b/src/imports/components/RectangleItem.qml
new file mode 100644
index 0000000..33c71b9
--- /dev/null
+++ b/src/imports/components/RectangleItem.qml
@@ -0,0 +1,121 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+    width: 200
+    height: 150
+
+    property int radius: 10
+
+    property int topLeftRadius: radius
+    property int bottomLeftRadius: radius
+    property int topRightRadius: radius
+    property int bottomRightRadius: radius
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias dashOffset: path.dashOffset
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    Item {
+        anchors.fill: parent
+        anchors.margins: -root.strokeWidth / 2
+    }
+
+    ShapePath {
+        id: path
+        joinStyle: ShapePath.MiterJoin
+
+        strokeWidth: 4
+        strokeColor: "red"
+
+        startX: root.topLeftRadius
+        startY: 0
+
+        PathLine {
+            x: root.width - root.topRightRadius
+            y: 0
+        }
+
+        PathArc {
+            x: root.width
+            y: root.topRightRadius
+            radiusX: root.topRightRadius
+            radiusY: root.topRightRadius
+        }
+
+        PathLine {
+            x: root.width
+            y: root.height - root.bottomRightRadius
+        }
+
+        PathArc {
+            x: root.width - root.bottomRightRadius
+            y: root.height
+            radiusX: root.bottomRightRadius
+            radiusY: root.bottomRightRadius
+        }
+
+        PathLine {
+            x: root.bottomLeftRadius
+            y: root.height
+        }
+
+        PathArc {
+            x: 0
+            y: root.height - root.bottomLeftRadius
+            radiusX: root.bottomLeftRadius
+            radiusY: root.bottomLeftRadius
+        }
+        PathLine {
+            x: 0
+            y: root.topLeftRadius
+        }
+
+        PathArc {
+            x: root.topLeftRadius
+            y: 0
+            radiusX: root.topLeftRadius
+            radiusY: root.topLeftRadius
+        }
+    }
+}
diff --git a/src/imports/components/SvgPathItem.qml b/src/imports/components/SvgPathItem.qml
new file mode 100644
index 0000000..d23b63b
--- /dev/null
+++ b/src/imports/components/SvgPathItem.qml
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Timeline 1.0
+import QtQuick.Shapes 1.0
+
+Shape {
+    width: 200
+    height: 200
+
+    property alias gradient: shape.fillGradient
+    property alias strokeStyle: shape.strokeStyle
+    property alias strokeWidth: shape.strokeWidth
+    property alias strokeColor: shape.strokeColor
+    property alias dashPattern: shape.dashPattern
+    property alias joinStyle: shape.joinStyle
+    property alias fillColor: shape.fillColor
+    property alias path: pathSvg.path
+    property alias dashOffset: shape.dashOffset
+    property alias capStyle: shape.capStyle
+
+    property bool antialiasing: false
+    layer.enabled: antialiasing
+    layer.smooth: antialiasing
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    id: svgPathItem
+
+    ShapePath {
+        id: shape
+        strokeWidth: 4
+        strokeColor: "red"
+
+        PathSvg {
+            id: pathSvg
+
+            path: "M91,70.6c4.6,0,8.6,2.4,10.9,6.3l19.8,34.2c2.3,3.9,2.3,8.7,0,12.6c-2.3,3.9-6.4,6.3-10.9,6.3H71.2 c-4.6,0-8.6-2.4-10.9-6.3c-2.3-3.9-2.3-8.7,0-12.6l19.8-34.2C82.4,72.9,86.4,70.6,91,70.6 M91,69.6c-4.6,0-9.2,2.3-11.8,6.8l-19.8,34.2c-5.2,9.1,1.3,20.4,11.8,20.4h39.5c10.5,0,17-11.3,11.8-20.4l-19.8-34.2C100.2,71.9,95.6,69.6,91,69.6L91,69.6z"
+        }
+    }
+}
diff --git a/src/imports/components/TriangleItem.qml b/src/imports/components/TriangleItem.qml
new file mode 100644
index 0000000..738eef5
--- /dev/null
+++ b/src/imports/components/TriangleItem.qml
@@ -0,0 +1,240 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick 2.9
+import QtQuick.Shapes 1.0
+
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    property alias gradient: path.fillGradient
+    property alias strokeStyle: path.strokeStyle
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias dashPattern: path.dashPattern
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias dashOffset: path.dashOffset
+
+    property int pLineXStart
+    property int pLineXEnd
+    property int pLineYStart
+    property int pLineYEnd
+
+    property point topIntersection1
+    property point topIntersection2
+    property point leftIntersection1
+    property point leftIntersection2
+    property point rightIntersection1
+    property point rightIntersection2
+
+    property int radius: 5
+    property real arcRadius: radius
+
+    property real leftMargin: 0
+    property real topMargin: 0
+
+    property real rightMargin: 0
+    property real bottomMargin: 0
+
+    property bool antiAlias: false
+    layer.enabled: antiAlias
+    layer.smooth: antiAlias
+    layer.textureSize: Qt.size(width * 2, height * 2)
+
+    ShapePath {
+        id: path
+
+        property real __width: root.width - root.strokeWidth - root.leftMargin - root.rightMargin
+        property real __height: root.height - root.strokeWidth - root.topMargin - root.bottomMargin
+        property real xOffset: root.strokeWidth / 2 + root.leftMargin
+        property real yOffset: root.strokeWidth / 2 + root.topMargin
+
+        fillColor: "transparent"
+        strokeColor: Qt.transparent
+        strokeWidth: 1
+        capStyle: ShapePath.FlatCap
+
+        startX: root.topIntersection1.x + path.xOffset
+        startY: root.topIntersection1.y + path.yOffset
+
+        PathArc {
+            radiusX: root.arcRadius
+            radiusY: root.arcRadius
+
+            x: root.topIntersection2.x + path.xOffset
+            y: root.topIntersection2.y + path.yOffset
+
+        }
+
+        PathLine {
+            x: root.rightIntersection1.x + path.xOffset
+            y: root.rightIntersection1.y + path.yOffset
+        }
+
+        PathArc {
+            radiusX: root.arcRadius
+            radiusY: root.arcRadius
+
+            x: root.rightIntersection2.x + path.xOffset
+            y: root.rightIntersection2.y + path.yOffset
+        }
+
+        PathLine {
+            x: root.leftIntersection1.x + path.xOffset
+            y: root.leftIntersection1.y + path.yOffset
+        }
+
+        PathArc {
+            radiusX: root.arcRadius
+            radiusY: root.arcRadius
+
+            x: root.leftIntersection2.x + path.xOffset
+            y: root.leftIntersection2.y + path.yOffset
+        }
+
+        PathLine {
+            x: root.topIntersection1.x + path.xOffset
+            y: root.topIntersection1.y + path.yOffset
+        }
+
+
+
+    }
+
+    onWidthChanged: calc()
+
+    onHeightChanged: calc()
+
+    onRadiusChanged: calc()
+    onArcRadiusChanged: calc()
+
+    onTopMarginChanged: calc()
+    onBottomMarginChanged: calc()
+    onLeftMarginChanged: calc()
+    onRightMarginChanged: calc()
+
+    Component.onCompleted: root.calc()
+
+    function normalize(x, y)
+    {
+        var length = Math.sqrt(x*x+y*y)
+
+        return {
+            x: x / length,
+            y: y / length
+        }
+    }
+
+    function dotProduct(x1, y1, x2, y2)
+    {
+        return x1 * x2 + y1 * y2;
+    }
+
+    function project(x1, y1, x2, y2)
+    {
+        var normalized = normalize(x1, y1)
+
+        var dot = dotProduct(normalized.x, normalized.y, x2, y2)
+
+        return {
+            x: normalized.x * dot,
+            y: normalized.y * dot
+        }
+    }
+
+    function intersect(x1, y1, x2, y2, x3, y3, x4, y4)
+    {
+        var denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
+
+        var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom
+        var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom
+        return {
+            x: x1 + ua * (x2 - x1),
+            y: y1 + ua * (y2 - y1)
+        };
+    }
+
+    function moveLine(startX, startY, endX, endY)
+    {
+        var angle = Math.atan2(endY - startY, endX - startX)
+        var xOffset = Math.sin(angle) * root.radius
+        var yOffset = -Math.cos(angle) * root.radius
+
+        return {
+            startX: startX + xOffset,
+            startY: startY + yOffset,
+            endX: endX + xOffset,
+            endY: endY + yOffset
+        };
+    }
+
+    function calc() {
+        var movedLine1 = moveLine(path.__width / 2, 0, 0, path.__height)
+
+        var movedLine2 = moveLine(path.__width, path.__height, path.__width / 2, 0)
+
+        var movedLine3 = moveLine(0, path.__height, path.__width, path.__height)
+
+        var intersectionTop = intersect(movedLine1.startX, movedLine1.startY, movedLine1.endX, movedLine1.endY,
+                                        movedLine2.startX, movedLine2.startY, movedLine2.endX, movedLine2.endY)
+
+        var intersectionLeft = intersect(movedLine1.startX, movedLine1.startY, movedLine1.endX, movedLine1.endY,
+                                         movedLine3.startX, movedLine3.startY, movedLine3.endX, movedLine3.endY)
+
+        var intersectionRight = intersect(movedLine2.startX, movedLine2.startY, movedLine2.endX, movedLine2.endY,
+                                          movedLine3.startX, movedLine3.startY, movedLine3.endX, movedLine3.endY)
+
+        var leftBottom = project(1, 0, intersectionLeft.x, intersectionLeft.y)
+
+        var rightBottom = project(1, 0, intersectionRight.x, intersectionRight.y)
+
+        root.leftIntersection1 = Qt.point(leftBottom.x, leftBottom.y + path.__height)
+        root.rightIntersection2 = Qt.point(rightBottom.x, rightBottom.y + path.__height)
+
+        var leftTop = project(-path.__width / 2 , path.__height, intersectionTop.x - path.__width / 2, intersectionTop.y)
+
+        leftBottom = project(-path.__width / 2 , path.__height, intersectionLeft.x - path.__width / 2, intersectionLeft.y)
+
+        root.leftIntersection2 = Qt.point(leftBottom.x + path.__width / 2, leftBottom.y)
+        root.topIntersection1 = Qt.point(leftTop.x + path.__width / 2, leftTop.y)
+
+        var rightTop = project(path.__width / 2 , path.__height, intersectionTop.x - path.__width / 2, intersectionTop.y)
+
+        rightBottom = project(path.__width / 2 , path.__height, intersectionRight.x - path.__width / 2, intersectionRight.y)
+
+        root.topIntersection2 = Qt.point(rightTop.x + path.__width / 2, rightTop.y)
+        root.rightIntersection1 = Qt.point(rightBottom.x + path.__width / 2, rightBottom.y)
+    }
+
+}
diff --git a/src/imports/components/components.pri b/src/imports/components/components.pri
new file mode 100644
index 0000000..7464e59
--- /dev/null
+++ b/src/imports/components/components.pri
@@ -0,0 +1,8 @@
+QML_FILES += \
+    $$PWD/ArcItem.qml \
+    $$PWD/BorderItem.qml \
+    $$PWD/FlipableItem.qml \
+    $$PWD/IsoItem.qml \
+    $$PWD/PieItem.qml \
+    $$PWD/SvgPathItem.qml \
+    $$PWD/TriangleItem.qml
diff --git a/src/imports/components/components.pro b/src/imports/components/components.pro
new file mode 100644
index 0000000..1de5039
--- /dev/null
+++ b/src/imports/components/components.pro
@@ -0,0 +1,26 @@
+TARGET = studiocomponentsplugin
+TARGETPATH = Studio/Components
+IMPORT_VERSION = 1.0
+
+QT += qml quick
+QT_PRIVATE += core-private gui-private qml-private quick-private quicktemplates2-private quickcontrols2-private
+
+DEFINES += QT_NO_CAST_TO_ASCII QT_NO_CAST_FROM_ASCII
+
+include(components.pri)
+
+OTHER_FILES += \
+    qmldir \
+    $$QML_FILES
+
+SOURCES += \
+    $$PWD/qtstudiocomponentsplugin.cpp
+
+
+## !static: qtConfig(quick-designer): include(designer/designer.pri)
+## include(doc/doc.pri)
+
+CONFIG += no_cxx_module install_qml_files qtquickcompiler
+load(qml_plugin)
+
+
diff --git a/src/imports/components/designer/ArcItemSpecifics.qml b/src/imports/components/designer/ArcItemSpecifics.qml
new file mode 100644
index 0000000..c4658d1
--- /dev/null
+++ b/src/imports/components/designer/ArcItemSpecifics.qml
@@ -0,0 +1,296 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Fill Color")
+
+        ColorEditor {
+            caption: qsTr("Fill Color")
+            backendValue: backendValues.fillColor
+            supportGradient: false
+        }
+
+
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Color")
+
+        ColorEditor {
+            caption: qsTr("Stroke Color")
+            backendValue: backendValues.strokeColor
+            supportGradient: false
+        }
+    }
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Stroke Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Stroke Width")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.strokeWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+            Label {
+                text: qsTr("Begin")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.begin
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -360
+                    maximumValue: 360
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+            Label {
+                text: qsTr("End")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.end
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -360
+                    maximumValue: 360
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Stroke Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    id: strokeStyle
+                    model: ["None", "Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"]
+                    backendValue: backendValues.strokeStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                text: qsTr("Dash Pattern")
+            }
+
+            DashPatternEditor {
+                enableEditors: strokeStyle.currentIndex === 2
+            }
+
+            Label {
+                text: qsTr("Cap Style")
+            }
+
+            SecondColumnLayout {
+                CapComboBox {
+                }
+            }
+
+            Label {
+                text: qsTr("Dash Offset")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.dashOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+            Label {
+                text: qsTr("Anti Aliasing")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.antialiasing
+                    text: qsTr("Anti Aliasing")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Outline")
+        SectionLayout {
+            rows: 2
+
+            Label {
+                text: qsTr("Full Outline")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.outlineArc
+                }
+            }
+
+            Label {
+                text: qsTr("Arc Outline Width")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.arcWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+            Label {
+                text: qsTr("Arc Outline Begin")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.arcWidthBegin
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+            Label {
+                text: qsTr("Arc Outline End")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.arcWidthEnd
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+            Label {
+                text: qsTr("Round Outline")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.round
+                }
+            }
+
+            Label {
+                text: qsTr("Round End Outline")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.roundBegin
+                }
+            }
+            Label {
+                text: qsTr("Round End Outline")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.roundEnd
+                }
+            }
+
+
+            Label {
+                text: qsTr("Radius Inner Adjust")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radiusInnerAdjust
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+            Label {
+                text: qsTr("Radius Outer Adjust")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radiusOuterAdjust
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/components/designer/BorderItemSpecifics.qml b/src/imports/components/designer/BorderItemSpecifics.qml
new file mode 100644
index 0000000..533c11d
--- /dev/null
+++ b/src/imports/components/designer/BorderItemSpecifics.qml
@@ -0,0 +1,307 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Color")
+
+        ColorEditor {
+            caption: qsTr("Stroke Color")
+            backendValue: backendValues.strokeColor
+            supportGradient: false
+        }
+    }
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Radiuses")
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+            Label {
+                text: qsTr("Top Left Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.topLeftRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Top Right Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.topRightRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Bottom Right Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.bottomRightRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Bottom Left Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.bottomLeftRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Draw Edges")
+
+        SectionLayout {
+            rows: 2
+
+            Label {
+                text: qsTr("Draw Top")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.drawTop
+                    text: qsTr("draw the top border")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+
+            Label {
+                text: qsTr("Draw Right")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.drawRight
+                    text: qsTr("draw the right border")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Draw Bottom")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.drawBottom
+                    text: qsTr("draw the bottom border")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Draw Left")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.drawLeft
+                    text: qsTr("draw the left border")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Details")
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Stroke Width")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.strokeWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Stroke Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["None", "Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"]
+                    backendValue: backendValues.strokeStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                text: qsTr("Dash Pattern")
+            }
+
+            DashPatternEditor {
+                enableEditors: strokeStyle.currentIndex === 2
+            }
+
+            Label {
+                text: qsTr("Joint Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["Miter Join", "Bevel Join", "Round Join"]
+                    backendValue: backendValues.joinStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+
+            }
+
+            Label {
+                text: qsTr("Cap Style")
+            }
+
+            SecondColumnLayout {
+                CapComboBox {
+                }
+            }
+
+            Label {
+                text: qsTr("Dash Offset")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.dashOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+
+            Label {
+                text: qsTr("Anti Aliasing")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.antialiasing
+                    text: qsTr("Anti Aliasing")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/components/designer/CapComboBox.qml b/src/imports/components/designer/CapComboBox.qml
new file mode 100644
index 0000000..51bc566
--- /dev/null
+++ b/src/imports/components/designer/CapComboBox.qml
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+ComboBox {
+    model: ["FlatCap", "SquareCap", "RoundCap"]
+    backendValue: backendValues.capStyle
+    Layout.fillWidth: true
+    useInteger: true
+
+    manualMapping: true
+
+    property bool block: false
+
+    onValueFromBackendChanged: {
+        if (!__isCompleted)
+            return
+
+        block = true
+
+        if (backendValues.capStyle.value === 0)
+            currentIndex = 0
+        if (backendValues.capStyle.value === 16)
+            currentIndex = 1
+        if (backendValues.capStyle.value === 32)
+            currentIndex = 2
+
+        block = false
+    }
+
+    onCurrentTextChanged: {
+        if (!__isCompleted)
+            return
+
+        if (block)
+            return
+
+        if (currentText === "FlatCap")
+            backendValues.capStyle.value = 0
+
+        if (currentText === "SquareCap")
+            backendValues.capStyle.value = 16
+
+        if (currentText === "RoundCap")
+            backendValues.capStyle.value = 32
+    }
+}
diff --git a/src/imports/components/designer/DashPatternEditor.qml b/src/imports/components/designer/DashPatternEditor.qml
new file mode 100644
index 0000000..6dcb7f2
--- /dev/null
+++ b/src/imports/components/designer/DashPatternEditor.qml
@@ -0,0 +1,178 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 1.0 as Controls
+import QtQuickDesignerTheme 1.0
+
+GridLayout {
+    id: root
+    Layout.fillWidth: true
+    rowSpacing: 2
+    columnSpacing: 6
+    rows: 2
+    columns: 5
+    property bool enableEditors: true
+
+    property variant backendValue: backendValues.dashPattern
+
+    property string expression: backendValue.expression
+
+    onExpressionChanged: root.parseExpression()
+
+    property bool __block: false
+
+    function createArray() {
+        if (root.__block)
+            return
+
+        var array = []
+
+        array.push(dash01.value)
+        array.push(gap01.value)
+        array.push(dash02.value)
+        array.push(gap02.value)
+        root.__block = true
+        root.backendValue.expression = '[' + array.toString() + ']'
+        root.__block = false
+    }
+
+    function parseExpression() {
+        if (root.__block)
+            return
+
+        dash01.value = 0
+        gap01.value = 0
+        dash02.value = 0
+        gap02.value = 0
+        var array = backendValue.expression.toString()
+        array = array.replace("[", "")
+        array = array.replace("]", "")
+        array = array.split(',')
+
+        root.__block = true
+        try {
+            dash01.value = array[0]
+            gap01.value = array[1]
+            dash02.value = array[2]
+            gap02.value = array[3]
+        } catch (err) {
+
+        }
+
+        root.__block = false
+    }
+
+    Connections {
+        target: modelNodeBackend
+        onSelectionChanged: parseExpression()
+    }
+
+    Item {
+        width: 32
+        ExtendedFunctionButton {
+            x: 4
+            anchors.verticalCenter: parent.verticalCenter
+            backendValue: root.backendValue
+        }
+    }
+
+    Controls.Label {
+        text: qsTr("Dash")
+        color: Theme.color(Theme.PanelTextColorLight)
+        elide: Text.ElideRight
+    }
+
+    DoubleSpinBox {
+        id: dash01
+
+        enabled: root.enableEditors
+        property color textColor: colorLogic.textColor
+        ColorLogic {
+            id: colorLogic
+            backendValue: backendValues.dashPattern
+        }
+        onValueChanged: root.createArray()
+        maximumValue: 1000
+    }
+
+    Controls.Label {
+        text: qsTr("Gap")
+        color: Theme.color(Theme.PanelTextColorLight)
+        elide: Text.ElideRight
+    }
+
+    DoubleSpinBox {
+        id: gap01
+
+        enabled: root.enableEditors
+        property color textColor: colorLogic.textColor
+
+        onValueChanged: root.createArray()
+        maximumValue: 1000
+    }
+
+    Item {
+        width: 32
+    }
+
+    Controls.Label {
+        text: qsTr("Dash")
+        color: Theme.color(Theme.PanelTextColorLight)
+        elide: Text.ElideRight
+    }
+
+    DoubleSpinBox {
+        id: dash02
+
+        enabled: root.enableEditors
+        property color textColor: colorLogic.textColor
+
+        onValueChanged: root.createArray()
+        maximumValue: 1000
+    }
+
+    Controls.Label {
+        text: qsTr("Gap")
+        color: Theme.color(Theme.PanelTextColorLight)
+        elide: Text.ElideRight
+    }
+
+    DoubleSpinBox {
+        id: gap02
+
+        enabled: root.enableEditors
+        property color textColor: colorLogic.textColor
+
+        onValueChanged: root.createArray()
+        maximumValue: 1000
+    }
+}
diff --git a/src/imports/components/designer/FlipableItemSpecifics.qml b/src/imports/components/designer/FlipableItemSpecifics.qml
new file mode 100644
index 0000000..5f41412
--- /dev/null
+++ b/src/imports/components/designer/FlipableItemSpecifics.qml
@@ -0,0 +1,138 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Flipped Status")
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Flip Angle")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.flipAngle
+                    Layout.preferredWidth: 80
+                    minimumValue: -360
+                    maximumValue: 360
+                    stepSize: 10
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Opacity"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Opacity Front")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.opacityFront
+                    Layout.preferredWidth: 80
+                    decimals: 2
+                    minimumValue: 0
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+            Label {
+                text: qsTr("Opacity Back")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.opacityBack
+                    Layout.preferredWidth: 80
+                    decimals: 2
+                    minimumValue: 0
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Rotational Axis"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("X Rotational Axis")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["X Axis", "Y Axis"]
+                    backendValue: backendValues.xAxis
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+            }
+
+            Label {
+                text: qsTr("Y Rotational Axis")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["X Axis", "Y Axis"]
+                    backendValue: backendValues.yAxis
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/components/designer/IsoItemSpecifics.qml b/src/imports/components/designer/IsoItemSpecifics.qml
new file mode 100644
index 0000000..1ac877a
--- /dev/null
+++ b/src/imports/components/designer/IsoItemSpecifics.qml
@@ -0,0 +1,50 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Icon Color")
+
+        ColorEditor {
+            caption: qsTr("Icon Color")
+            backendValue: backendValues.color
+            supportGradient: false
+        }
+    }
+}
diff --git a/src/imports/components/designer/PieItemSpecifics.qml b/src/imports/components/designer/PieItemSpecifics.qml
new file mode 100644
index 0000000..e0856d9
--- /dev/null
+++ b/src/imports/components/designer/PieItemSpecifics.qml
@@ -0,0 +1,201 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Fill Color")
+
+        ColorEditor {
+            caption: qsTr("Fill Color")
+            backendValue: backendValues.fillColor
+            supportGradient: false
+        }
+
+
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Color")
+
+        ColorEditor {
+            caption: qsTr("Stroke Color")
+            backendValue: backendValues.strokeColor
+            supportGradient: false
+        }
+    }
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke")
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Stroke Width")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.strokeWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Stroke Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["None", "Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"]
+                    backendValue: backendValues.strokeStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                text: qsTr("Dash Pattern")
+            }
+
+            DashPatternEditor {
+                enableEditors: strokeStyle.currentIndex === 2
+            }
+
+            Label {
+                text: qsTr("Cap Style")
+            }
+
+            SecondColumnLayout {
+                CapComboBox {
+                }
+            }
+
+            Label {
+                text: qsTr("Hide Line")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.hideLine
+                    text: qsTr("hide inside line")
+                }
+            }
+
+            Label {
+                text: qsTr("Dash Offset")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.dashOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+            Label {
+                text: qsTr("Anti Aliasing")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.antialiasing
+                    text: qsTr("Anti Aliasing")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Beginning and End"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Begin")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.begin
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -360
+                    maximumValue: 360
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+            Label {
+                text: qsTr("End")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.end
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -360
+                    maximumValue: 360
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/components/designer/RectangleItemSpecifics.qml b/src/imports/components/designer/RectangleItemSpecifics.qml
new file mode 100644
index 0000000..2156294
--- /dev/null
+++ b/src/imports/components/designer/RectangleItemSpecifics.qml
@@ -0,0 +1,246 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Fill Color")
+
+        ColorEditor {
+            caption: qsTr("Fill Color")
+            backendValue: backendValues.fillColor
+            supportGradient: false
+        }
+
+
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Color")
+
+        ColorEditor {
+            caption: qsTr("Stroke Color")
+            backendValue: backendValues.strokeColor
+            supportGradient: false
+        }
+    }
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Corner Radiuses")
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+            Label {
+                text: qsTr("Top Left Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.topLeftRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Top Right Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.topRightRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Bottom Right Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.bottomRightRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Bottom Left Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.bottomLeftRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 75
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Stroke Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Stroke Width")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.strokeWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+
+            Label {
+                text: qsTr("Stroke Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["None", "Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"]
+                    backendValue: backendValues.strokeStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                text: qsTr("Dash Pattern")
+            }
+
+            DashPatternEditor {
+                enableEditors: strokeStyle.currentIndex === 2
+            }
+
+            Label {
+                text: qsTr("Joint Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["Miter Join", "Bevel Join", "Round Join"]
+                    backendValue: backendValues.joinStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+            }
+            Label {
+                text: qsTr("Dash Offset")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.dashOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+
+            Label {
+                text: qsTr("Anti Aliasing")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.antialiasing
+                    text: qsTr("Anti Aliasing")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/components/designer/SvgPathItemSpecifics.qml b/src/imports/components/designer/SvgPathItemSpecifics.qml
new file mode 100644
index 0000000..2e61222
--- /dev/null
+++ b/src/imports/components/designer/SvgPathItemSpecifics.qml
@@ -0,0 +1,173 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Fill Color")
+
+        ColorEditor {
+            caption: qsTr("Fill Color")
+            backendValue: backendValues.fillColor
+            supportGradient: false
+        }
+
+
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Color")
+
+        ColorEditor {
+            caption: qsTr("Stroke Color")
+            backendValue: backendValues.strokeColor
+            supportGradient: false
+        }
+    }
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Stroke Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Stroke Width")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.strokeWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+
+            Label {
+                text: qsTr("Stroke Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["None", "Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"]
+                    backendValue: backendValues.strokeStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                text: qsTr("Dash Pattern")
+            }
+
+            DashPatternEditor {
+                enableEditors: strokeStyle.currentIndex === 2
+            }
+
+            Label {
+                text: qsTr("Joint Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["Miter Join", "Bevel Join", "Round Join"]
+                    backendValue: backendValues.joinStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+
+            }
+
+            Label {
+                text: qsTr("Cap Style")
+            }
+
+            SecondColumnLayout {
+                CapComboBox {
+                }
+            }
+
+            Label {
+                text: qsTr("Anti Aliasing")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.antialiasing
+                    text: qsTr("Anti Aliasing")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Path Info")
+
+        SectionLayout {
+            rows: 1
+
+            Label {
+                text: qsTr("Path Data")
+            }
+            SecondColumnLayout{
+
+                LineEdit {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.path
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/components/designer/TriangleItemSpecifics.qml b/src/imports/components/designer/TriangleItemSpecifics.qml
new file mode 100644
index 0000000..56cbb5b
--- /dev/null
+++ b/src/imports/components/designer/TriangleItemSpecifics.qml
@@ -0,0 +1,272 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Fill Color")
+
+        ColorEditor {
+            caption: qsTr("Fill Color")
+            backendValue: backendValues.fillColor
+            supportGradient: false
+        }
+
+
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Stroke Color")
+
+        ColorEditor {
+            caption: qsTr("Stroke Color")
+            backendValue: backendValues.strokeColor
+            supportGradient: false
+        }
+    }
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Stroke Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Stroke Width")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.strokeWidth
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Stroke Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["None", "Solid", "Dash", "Dot", "Dash Dot", "Dash Dot Dot"]
+                    backendValue: backendValues.strokeStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+
+            }
+
+            Label {
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                text: qsTr("Dash Pattern")
+            }
+
+            DashPatternEditor {
+                enableEditors: strokeStyle.currentIndex === 2
+            }
+
+            Label {
+                text: qsTr("Joint Style")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    model: ["Miter Join", "Bevel Join", "Round Join"]
+                    backendValue: backendValues.joinStyle
+                    Layout.fillWidth: true
+                    useInteger: true
+                }
+
+            }
+            Label {
+                text: qsTr("Dash Offset")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.dashOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+            }
+
+            Label {
+                text: qsTr("Anti Aliasing")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    backendValue: backendValues.antialiasing
+                    text: qsTr("Anti Aliasing")
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Radiuses"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Corner Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr("Arc Radius")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.arcRadius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Margins"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("Top Margin")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.topMargin
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+
+            Label {
+                text: qsTr(" Right Margin")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.rightMargin
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+            Label {
+                text: qsTr(" Bottom Margin")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.bottomMargin
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+            Label {
+                text: qsTr(" Left Margin")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.leftMargin
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 10000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/components/designer/components.metainfo b/src/imports/components/designer/components.metainfo
new file mode 100644
index 0000000..4b22bd1
--- /dev/null
+++ b/src/imports/components/designer/components.metainfo
@@ -0,0 +1,111 @@
+MetaInfo {
+    Type {
+        name: "QtQuick.Studio.Components.ArcItem"
+        icon: "images/item-arc-16px.png"
+
+        ItemLibraryEntry {
+            name: "Arc"
+            category: "Studio Components"
+            libraryIcon: "images/item-arc-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+
+        }
+    }
+    Type {
+        name: "QtQuick.Studio.Components.PieItem"
+        icon: "images/item-pie-16px.png"
+
+        ItemLibraryEntry {
+            name: "Pie"
+            category: "Studio Components"
+            libraryIcon: "images/item-pie-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+
+        }
+    }
+    Type {
+        name: "QtQuick.Studio.Components.TriangleItem"
+        icon: "images/item-triangle-16px.png"
+
+        ItemLibraryEntry {
+            name: "Triangle"
+            category: "Studio Components"
+            libraryIcon: "images/item-triangle-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+
+        }
+    }
+    Type {
+        name: "QtQuick.Studio.Components.SvgPathItem"
+        icon: "images/item-svg-16px.png"
+
+        ItemLibraryEntry {
+            name: "Svg Path"
+            category: "Studio Components"
+            libraryIcon: "images/item-svg-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+
+        }
+    }
+    Type {
+        name: "QtQuick.Studio.Components.FlipableItem"
+        icon: "images/item-flippable-16px.png"
+
+        ItemLibraryEntry {
+            name: "Flipable"
+            category: "Studio Components"
+            libraryIcon: "images/item-flippable-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Components.RectangleItem"
+        icon: "images/custom-rectangle-16px.png"
+
+        ItemLibraryEntry {
+            name: "Rectangle"
+            category: "Studio Components"
+            libraryIcon: "images/custom-rectangle-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+
+        }
+    }
+
+
+    Type {
+        name: "QtQuick.Studio.Components.BorderItem"
+        icon: "images/custom-border-16px.png"
+
+        ItemLibraryEntry {
+            name: "Border"
+            category: "Studio Components"
+            libraryIcon: "images/custom-border-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Components.IsoItem"
+        icon: "images/iso-icons-16px.png"
+
+        ItemLibraryEntry {
+            name: "Iso Icon"
+            category: "Studio Components"
+            libraryIcon: "images/iso-icons-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Components"
+
+        }
+    }
+
+}
diff --git a/src/imports/components/designer/designer.pri b/src/imports/components/designer/designer.pri
new file mode 100644
index 0000000..3d76f50
--- /dev/null
+++ b/src/imports/components/designer/designer.pri
@@ -0,0 +1,17 @@
+AUX_QML_FILES += \
+    $$PWD/components.metainfo
+
+AUX_QML_FILES += \
+    $$PWD/ArcItemSpecifics.qml \
+    $$PWD/BorderItemSpecifics.qml \
+    $$PWD/CapComboBox.qml \
+    $$PWD/DashPatternEditor.qml \
+    $$PWD/FlipableItemSpecifics.qml \
+    $$PWD/IsoItemSpecifics.qml \
+    $$PWD/PieItemSpecifics.qml \
+    $$PWD/RectangleItemSpecifics.qml \
+    $$PWD/SvgPathItemSpecifics.qml \
+    $$PWD/TriangleItemSpecifics.qml
+
+AUX_QML_FILES += \
+    $$PWD/images/*.png
diff --git a/src/imports/components/designer/images/custom-border-16px.png b/src/imports/components/designer/images/custom-border-16px.png
new file mode 100644
index 0000000..1a5337c
--- /dev/null
+++ b/src/imports/components/designer/images/custom-border-16px.png
diff --git a/src/imports/components/designer/images/custom-border-24px.png b/src/imports/components/designer/images/custom-border-24px.png
new file mode 100644
index 0000000..451ead0
--- /dev/null
+++ b/src/imports/components/designer/images/custom-border-24px.png
diff --git a/src/imports/components/designer/images/custom-border-24px@2x.png b/src/imports/components/designer/images/custom-border-24px@2x.png
new file mode 100644
index 0000000..d2e10f0
--- /dev/null
+++ b/src/imports/components/designer/images/custom-border-24px@2x.png
diff --git a/src/imports/components/designer/images/custom-rectangle-16px.png b/src/imports/components/designer/images/custom-rectangle-16px.png
new file mode 100644
index 0000000..7289310
--- /dev/null
+++ b/src/imports/components/designer/images/custom-rectangle-16px.png
diff --git a/src/imports/components/designer/images/custom-rectangle-24px.png b/src/imports/components/designer/images/custom-rectangle-24px.png
new file mode 100644
index 0000000..3997195
--- /dev/null
+++ b/src/imports/components/designer/images/custom-rectangle-24px.png
diff --git a/src/imports/components/designer/images/custom-rectangle-24px@2x.png b/src/imports/components/designer/images/custom-rectangle-24px@2x.png
new file mode 100644
index 0000000..150fa50
--- /dev/null
+++ b/src/imports/components/designer/images/custom-rectangle-24px@2x.png
diff --git a/src/imports/components/designer/images/iso-icons-16px.png b/src/imports/components/designer/images/iso-icons-16px.png
new file mode 100644
index 0000000..b28ea51
--- /dev/null
+++ b/src/imports/components/designer/images/iso-icons-16px.png
diff --git a/src/imports/components/designer/images/iso-icons-24px.png b/src/imports/components/designer/images/iso-icons-24px.png
new file mode 100644
index 0000000..b2f839f
--- /dev/null
+++ b/src/imports/components/designer/images/iso-icons-24px.png
diff --git a/src/imports/components/designer/images/iso-icons-24px@2x.png b/src/imports/components/designer/images/iso-icons-24px@2x.png
new file mode 100644
index 0000000..a2e1b2b
--- /dev/null
+++ b/src/imports/components/designer/images/iso-icons-24px@2x.png
diff --git a/src/imports/components/designer/images/item-arc-16px.png b/src/imports/components/designer/images/item-arc-16px.png
new file mode 100644
index 0000000..8c3bad9
--- /dev/null
+++ b/src/imports/components/designer/images/item-arc-16px.png
diff --git a/src/imports/components/designer/images/item-arc-24px.png b/src/imports/components/designer/images/item-arc-24px.png
new file mode 100644
index 0000000..bba68f6
--- /dev/null
+++ b/src/imports/components/designer/images/item-arc-24px.png
diff --git a/src/imports/components/designer/images/item-arc-24px@2x.png b/src/imports/components/designer/images/item-arc-24px@2x.png
new file mode 100644
index 0000000..e44762c
--- /dev/null
+++ b/src/imports/components/designer/images/item-arc-24px@2x.png
diff --git a/src/imports/components/designer/images/item-flippable-16px.png b/src/imports/components/designer/images/item-flippable-16px.png
new file mode 100644
index 0000000..90c5d17
--- /dev/null
+++ b/src/imports/components/designer/images/item-flippable-16px.png
diff --git a/src/imports/components/designer/images/item-flippable-24px.png b/src/imports/components/designer/images/item-flippable-24px.png
new file mode 100644
index 0000000..14a5273
--- /dev/null
+++ b/src/imports/components/designer/images/item-flippable-24px.png
diff --git a/src/imports/components/designer/images/item-flippable-24px@2x.png b/src/imports/components/designer/images/item-flippable-24px@2x.png
new file mode 100644
index 0000000..30f2ce7
--- /dev/null
+++ b/src/imports/components/designer/images/item-flippable-24px@2x.png
diff --git a/src/imports/components/designer/images/item-pie-16px.png b/src/imports/components/designer/images/item-pie-16px.png
new file mode 100644
index 0000000..c583b5b
--- /dev/null
+++ b/src/imports/components/designer/images/item-pie-16px.png
diff --git a/src/imports/components/designer/images/item-pie-24px.png b/src/imports/components/designer/images/item-pie-24px.png
new file mode 100644
index 0000000..4e0e84e
--- /dev/null
+++ b/src/imports/components/designer/images/item-pie-24px.png
diff --git a/src/imports/components/designer/images/item-pie-24px@2x.png b/src/imports/components/designer/images/item-pie-24px@2x.png
new file mode 100644
index 0000000..83d2e7d
--- /dev/null
+++ b/src/imports/components/designer/images/item-pie-24px@2x.png
diff --git a/src/imports/components/designer/images/item-svg-16px.png b/src/imports/components/designer/images/item-svg-16px.png
new file mode 100644
index 0000000..e353e78
--- /dev/null
+++ b/src/imports/components/designer/images/item-svg-16px.png
diff --git a/src/imports/components/designer/images/item-svg-24px.png b/src/imports/components/designer/images/item-svg-24px.png
new file mode 100644
index 0000000..e233a38
--- /dev/null
+++ b/src/imports/components/designer/images/item-svg-24px.png
diff --git a/src/imports/components/designer/images/item-svg-24px@2x.png b/src/imports/components/designer/images/item-svg-24px@2x.png
new file mode 100644
index 0000000..261fa33
--- /dev/null
+++ b/src/imports/components/designer/images/item-svg-24px@2x.png
diff --git a/src/imports/components/designer/images/item-triangle-16px.png b/src/imports/components/designer/images/item-triangle-16px.png
new file mode 100644
index 0000000..3b06c5b
--- /dev/null
+++ b/src/imports/components/designer/images/item-triangle-16px.png
diff --git a/src/imports/components/designer/images/item-triangle-24px.png b/src/imports/components/designer/images/item-triangle-24px.png
new file mode 100644
index 0000000..3c68689
--- /dev/null
+++ b/src/imports/components/designer/images/item-triangle-24px.png
diff --git a/src/imports/components/designer/images/item-triangle-24px@2x.png b/src/imports/components/designer/images/item-triangle-24px@2x.png
new file mode 100644
index 0000000..c2f4db8
--- /dev/null
+++ b/src/imports/components/designer/images/item-triangle-24px@2x.png
diff --git a/src/imports/components/qmldir b/src/imports/components/qmldir
new file mode 100644
index 0000000..a027725
--- /dev/null
+++ b/src/imports/components/qmldir
@@ -0,0 +1,9 @@
+ArcItem 1.0 ArcItem.qml
+PieItem 1.0 PieItem.qml
+TriangleItem 1.0 TriangleItem.qml
+SvgPathItem 1.0 SvgPathItem.qml
+FlipableItem 1.0 FlipableItem.qml
+RectangleItem 1.0 RectangleItem.qml
+BorderItem 1.0 BorderItem.qml
+IsoItem 1.0 IsoItem.qml
+
diff --git a/src/imports/components/qtstudiocomponentsplugin.cpp b/src/imports/components/qtstudiocomponentsplugin.cpp
new file mode 100644
index 0000000..43c4ddb
--- /dev/null
+++ b/src/imports/components/qtstudiocomponentsplugin.cpp
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class QtStudioComponentsPlugin: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtStudioComponentsPlugin(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+QtStudioComponentsPlugin::QtStudioComponentsPlugin(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+void QtStudioComponentsPlugin::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "qtstudiocomponentsplugin.moc"
diff --git a/src/imports/effects/BlendItem.qml b/src/imports/effects/BlendItem.qml
new file mode 100644
index 0000000..d75d03a
--- /dev/null
+++ b/src/imports/effects/BlendItem.qml
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias mode: blend.mode
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        z: -1
+        id: stack
+        implicitWidth: blend.source.width + blend.source.x
+        implicitHeight: blend.source.height + blend.source.y
+
+        visible: false
+    }
+
+    Blend {
+        id: blend
+        anchors.fill: parent
+        mode: "subtract"
+        source: root.background
+        foregroundSource: root.foreground
+    }
+
+    property Item background
+    property Item foreground
+
+    property Item foo: Item {}
+
+    Component.onCompleted: {
+        root.background = stack.children[0]
+        root.foreground = stack.children[1]
+    }
+}
+
diff --git a/src/imports/effects/BrightnessContrastItem.qml b/src/imports/effects/BrightnessContrastItem.qml
new file mode 100644
index 0000000..da32a93
--- /dev/null
+++ b/src/imports/effects/BrightnessContrastItem.qml
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+
+    property alias brightness: brightCont.brightness
+    property alias contrast: brightCont.contrast
+    property alias cached: brightCont.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+        visible: false
+    }
+
+    BrightnessContrast {
+        id: brightCont
+        anchors.fill: stack
+        source: stack
+    }
+}
diff --git a/src/imports/effects/ColorOverlayItem.qml b/src/imports/effects/ColorOverlayItem.qml
new file mode 100644
index 0000000..76205c9
--- /dev/null
+++ b/src/imports/effects/ColorOverlayItem.qml
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias content: stack.children
+
+    property alias overlayColor: colorOverlay.color
+    property alias cached: colorOverlay.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+    }
+
+    ColorOverlay {
+        id: colorOverlay
+        anchors.fill: stack
+        source: stack
+        color: "#80fff000"
+    }
+}
diff --git a/src/imports/effects/ColorizeItem.qml b/src/imports/effects/ColorizeItem.qml
new file mode 100644
index 0000000..49acf0e
--- /dev/null
+++ b/src/imports/effects/ColorizeItem.qml
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+
+    default property alias contentStack: stack.children
+    property alias colorizeHue: colorize.hue
+    property alias colorizeSaturation: colorize.saturation
+    property alias colorizeLightness: colorize.lightness
+    property alias cached: colorize.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+    }
+
+    Colorize {
+        id: colorize
+        anchors.fill: stack
+        source: stack
+        hue: 0.0
+        saturation: 0
+        lightness: 0
+    }
+}
diff --git a/src/imports/effects/DirectionalBlurItem.qml b/src/imports/effects/DirectionalBlurItem.qml
new file mode 100644
index 0000000..897f4a6
--- /dev/null
+++ b/src/imports/effects/DirectionalBlurItem.qml
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+
+    property alias directionalBlurAngle: directionalBlur.angle
+    property alias directionalBlurLength: directionalBlur.length
+    property alias directionalBlurSamples: directionalBlur.samples
+    property alias directionalBlurBorder: directionalBlur.transparentBorder
+    property alias cached: directionalBlur.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+
+    }
+
+    DirectionalBlur {
+        id: directionalBlur
+        anchors.fill: stack
+        source: stack
+        angle: 90
+        length: 32
+        samples: 16
+        transparentBorder: true
+    }
+}
diff --git a/src/imports/effects/DropShadowItem.qml b/src/imports/effects/DropShadowItem.qml
new file mode 100644
index 0000000..cbeed0f
--- /dev/null
+++ b/src/imports/effects/DropShadowItem.qml
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias horizontalOffset: dropShadow.horizontalOffset
+    property alias verticalOffset: dropShadow.verticalOffset
+    property alias radius: dropShadow.radius
+    property alias samples: dropShadow.samples
+    property alias spread: dropShadow.spread
+    property alias transparentBorder: dropShadow.transparentBorder
+    property alias color: dropShadow.color
+    property alias cached: dropShadow.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+    }
+
+    DropShadow {
+        id: dropShadow
+        anchors.fill: stack
+        source: stack
+        horizontalOffset: 3
+        verticalOffset: 3
+        radius: 8.0
+        samples: 17
+        spread: 4
+        transparentBorder: true
+        color: "#80000000"
+    }
+}
diff --git a/src/imports/effects/FastBlurItem.qml b/src/imports/effects/FastBlurItem.qml
new file mode 100644
index 0000000..ded4d34
--- /dev/null
+++ b/src/imports/effects/FastBlurItem.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.8
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    layer.enabled: true
+
+    default property alias contentStack: stack.children
+    property alias radius: blur.radius
+    property alias transparentBorder: blur.transparentBorder
+    property alias cached: blur.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+    }
+
+    FastBlur {
+        id: blur
+
+        transparentBorder: true
+        anchors.fill: stack
+        source: stack
+        radius: 12
+    }
+}
diff --git a/src/imports/effects/GaussianBlurItem.qml b/src/imports/effects/GaussianBlurItem.qml
new file mode 100644
index 0000000..b78e784
--- /dev/null
+++ b/src/imports/effects/GaussianBlurItem.qml
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+
+    default property alias content: stack.children
+    property alias gaussianBlurRadius: gaussianBlur.radius
+    property alias gaussianBlurSamples: gaussianBlur.samples
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        implicitWidth: contentItem.width
+        implicitHeight: contentItem.height
+        visible: true
+        id: stack
+
+    }
+
+    GaussianBlur {
+        id: gaussianBlur
+        anchors.fill: stack
+        source: stack
+        radius: 32
+        samples: 16
+    }
+}
diff --git a/src/imports/effects/GlowItem.qml b/src/imports/effects/GlowItem.qml
new file mode 100644
index 0000000..466f307
--- /dev/null
+++ b/src/imports/effects/GlowItem.qml
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+
+    default property alias contentStack: stack.children
+    property alias radius: glow.radius
+    property alias samples: glow.samples
+    property alias spread: glow.spread
+    property alias color: glow.color
+    property alias transparentBorder: glow.transparentBorder
+    property alias cached: glow.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+        visible: false
+
+    }
+
+    Glow {
+        id: glow
+        anchors.fill: stack
+        radius: 5
+        samples: 16
+        spread: 0.5
+        color: "#ffffffff"
+        transparentBorder: true
+        source: stack
+    }
+}
diff --git a/src/imports/effects/HueSaturationItem.qml b/src/imports/effects/HueSaturationItem.qml
new file mode 100644
index 0000000..c5a4946
--- /dev/null
+++ b/src/imports/effects/HueSaturationItem.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias adjustHue: hueSat.hue
+    property alias adjustSaturation: hueSat.saturation
+    property alias adjustLightness: hueSat.lightness
+    property alias cached: hueSat.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+    }
+
+    HueSaturation {
+        id: hueSat
+        anchors.fill: stack
+        source: stack
+        hue: 0.0
+        saturation: 0.5
+        lightness: -0.2
+    }
+}
diff --git a/src/imports/effects/MaskItem.qml b/src/imports/effects/MaskItem.qml
new file mode 100644
index 0000000..7ca1f07
--- /dev/null
+++ b/src/imports/effects/MaskItem.qml
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias invert: blend.invert
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        z: -1
+        id: stack
+        implicitWidth: blend.source.width + blend.source.x
+        implicitHeight: blend.source.height + blend.source.y
+
+        visible: false
+    }
+
+    OpacityMask  {
+        id: blend
+        anchors.fill: parent
+        source: root.background
+        maskSource: root.foreground
+
+    }
+
+    property Item background
+    property Item foreground
+
+    property Item foo: Item {}
+
+    Component.onCompleted: {
+        root.background = stack.children[0]
+        root.foreground = stack.children[1]
+    }
+}
+
diff --git a/src/imports/effects/MaskedBlurItem.qml b/src/imports/effects/MaskedBlurItem.qml
new file mode 100644
index 0000000..623ba5e
--- /dev/null
+++ b/src/imports/effects/MaskedBlurItem.qml
@@ -0,0 +1,88 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+    default property alias contentStack: stack.children
+    property alias maskBlurRadius: maskedBlur.radius
+    property alias maskBlurSamples: maskedBlur.samples
+    property alias gradientStopPosition1: stop1.position
+    property alias gradientStopPosition2: stop2.position
+    property alias gradientStopPosition3: stop3.position
+    property alias gradientStopPosition4: stop4.position
+    property alias maskRotation: gradient.rotation
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+
+    }
+
+    Item {
+        id: mask
+        width: stack.width
+        height: stack.height
+        visible: false
+
+        LinearGradient{
+            id: gradient
+            height: stack.height * 2
+            width: stack.width * 2
+            y: -stack.height /2
+            x: -stack.width /2
+            rotation: 0
+            gradient: Gradient{
+                GradientStop {id: stop1; position: 0.2; color: "#ffffffff"}
+                GradientStop {id: stop2; position: 0.5; color: "#00ffffff"}
+                GradientStop {id: stop3; position: 0.8; color: "#00ffffff"}
+                GradientStop {id: stop4; position: 1.0; color: "#ffffffff"}
+            }
+            start: Qt.point(stack.width /2, 0)
+            end: Qt.point(stack.width + stack.width /2, 100)
+        }
+    }
+
+    MaskedBlur {
+        id: maskedBlur
+        anchors.fill: stack
+        source: stack
+        maskSource: mask
+        radius: 32
+        samples: 16
+    }
+}
diff --git a/src/imports/effects/RadialBlurItem.qml b/src/imports/effects/RadialBlurItem.qml
new file mode 100644
index 0000000..4a3991b
--- /dev/null
+++ b/src/imports/effects/RadialBlurItem.qml
@@ -0,0 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias cached: radialBlur.cached
+    property alias samples: radialBlur.samples
+    property alias verticalOffset: radialBlur.verticalOffset
+    property alias horizontalOffset: radialBlur.horizontalOffset
+    property alias transparentBorder: radialBlur.transparentBorder
+    property alias angle: radialBlur.angle
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+    }
+
+    RadialBlur {
+        id: radialBlur
+        anchors.fill: stack
+        source: stack
+        verticalOffset: 12
+        horizontalOffset: 12
+        samples: 16
+        angle: 45
+    }
+}
diff --git a/src/imports/effects/RotationItem.qml b/src/imports/effects/RotationItem.qml
new file mode 100644
index 0000000..b04d905
--- /dev/null
+++ b/src/imports/effects/RotationItem.qml
@@ -0,0 +1,50 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+
+Item {
+    id: root
+    property alias originX: rotation.origin.x
+    property alias originY: rotation.origin.y
+    property alias axisX: rotation.axis.x
+    property alias axisY: rotation.axis.y
+    property alias axisZ: rotation.axis.z
+    property alias angle: rotation.angle
+
+    implicitWidth: childrenRect.width + childrenRect.x
+    implicitHeight: childrenRect.height + childrenRect.y
+
+    transform: Rotation {
+        id: rotation
+        origin.x: root.width / 2
+        origin.y: root.height / 2
+        angle: 45
+    }
+}
diff --git a/src/imports/effects/SaturationItem.qml b/src/imports/effects/SaturationItem.qml
new file mode 100644
index 0000000..ad82413
--- /dev/null
+++ b/src/imports/effects/SaturationItem.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias desaturation: desaturate.desaturation
+    property alias cached: desaturate.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+
+    Item {
+        id: stack
+
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+    }
+
+    Desaturate {
+        id: desaturate
+        source: stack
+        anchors.fill: stack
+
+        desaturation: 0.5
+    }
+}
+
diff --git a/src/imports/effects/ZoomBlurItem.qml b/src/imports/effects/ZoomBlurItem.qml
new file mode 100644
index 0000000..48fd572
--- /dev/null
+++ b/src/imports/effects/ZoomBlurItem.qml
@@ -0,0 +1,63 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias zoomBlurLength: zoomBlur.length
+    property alias zoomBlurSamples: zoomBlur.samples
+    property alias zoomBlurHoffset: zoomBlur.horizontalOffset
+    property alias zoomBlurVoffset: zoomBlur.verticalOffset
+    property alias cached: zoomBlur.cached
+    property alias transparentBorder: zoomBlur.transparentBorder
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+    }
+
+    ZoomBlur {
+        id: zoomBlur
+        anchors.fill: stack
+        source: stack
+        length: 32
+        samples: 16
+        horizontalOffset: 0
+        verticalOffset: 0
+    }
+}
diff --git a/src/imports/effects/designer/BrightnessContrastItemSpecifics.qml b/src/imports/effects/designer/BrightnessContrastItemSpecifics.qml
new file mode 100644
index 0000000..1163da9
--- /dev/null
+++ b/src/imports/effects/designer/BrightnessContrastItemSpecifics.qml
@@ -0,0 +1,102 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Brightness and Contrast"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("brightness")
+                toolTip: qsTr("This property defines how much the source brightness is increased or decreased.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.brightness
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -1
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("contrast")
+                toolTip: qsTr("This property defines how much the source contrast is increased or decreased. The decrease of the contrast is linear, but the increase is applied with a non-linear curve to allow very high contrast adjustment at the high end of the value range.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.contrast
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -1
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/ColorOverlayItemSpecifics.qml b/src/imports/effects/designer/ColorOverlayItemSpecifics.qml
new file mode 100644
index 0000000..66ba38e
--- /dev/null
+++ b/src/imports/effects/designer/ColorOverlayItemSpecifics.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+    import QtQuick 2.0
+    import HelperWidgets 2.0
+    import QtQuick.Layouts 1.0
+
+
+    Column {
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        Section {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            caption: qsTr("Overlay Color")
+
+            ColorEditor {
+                caption: qsTr("Overlay Color")
+                backendValue: backendValues.overlayColor
+                supportGradient: false
+            }
+
+
+        }
+
+        Section {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            caption: "Caching"
+
+            SectionLayout {
+                rows: 2
+                Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+                }
+                SecondColumnLayout {
+                CheckBox {
+                Layout.fillWidth: true
+                backendValue: backendValues.cached
+                text: backendValues.cached.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/ColorizeItemSpecifics.qml b/src/imports/effects/designer/ColorizeItemSpecifics.qml
new file mode 100644
index 0000000..3934ead
--- /dev/null
+++ b/src/imports/effects/designer/ColorizeItemSpecifics.qml
@@ -0,0 +1,120 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Colorize"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("hue")
+                toolTip: qsTr("This property defines the hue value which is used to colorize the source.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.colorizeHue
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("lightness")
+                toolTip: qsTr("This property defines how much the source lightness value is increased or decreased. Unlike hue and saturation properties, lightness does not set the used value, but it shifts the existing source pixel lightness value.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.colorizeLightness
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -1
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("saturation")
+                toolTip: qsTr("This property defines the saturation value which is used to colorize the source.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.colorizeSaturation
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/DirectionalBlurItemSpecifics.qml b/src/imports/effects/designer/DirectionalBlurItemSpecifics.qml
new file mode 100644
index 0000000..7248e1f
--- /dev/null
+++ b/src/imports/effects/designer/DirectionalBlurItemSpecifics.qml
@@ -0,0 +1,133 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Directional Blur Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("blur angle")
+                toolTip: qsTr("This property defines the direction for the blur. Blur is applied to both sides of each pixel, therefore setting the direction to 0 and 180 produces the same result.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.directionalBlurAngle
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -180
+                    maximumValue: 180
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("blur samples")
+                toolTip: qsTr("This property defines how many samples are taken per pixel when blur calculation is done. Larger value produces better quality, but is slower to render.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.directionalBlurSamples
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("blur length")
+                toolTip: qsTr("This property defines the perceived amount of movement for each pixel. The movement is divided evenly to both sides of each pixel.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.directionalBlurLength
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching and Border"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+            Label {
+                text: qsTr("transparent border")
+                toolTip: qsTr("When set to true, the exterior of the item is padded with a transparent edge, making sampling outside the source texture use transparency instead of the edge pixels.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.directionalBlurBorder
+                    text: backendValues.directionalBlurBorder.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/DropShadowItemSpecifics.qml b/src/imports/effects/designer/DropShadowItemSpecifics.qml
new file mode 100644
index 0000000..87f969a
--- /dev/null
+++ b/src/imports/effects/designer/DropShadowItemSpecifics.qml
@@ -0,0 +1,187 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Shadow Color")
+
+        ColorEditor {
+            caption: qsTr("Shadow Color")
+            backendValue: backendValues.color
+            supportGradient: false
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Shadow Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("radius")
+                toolTip: qsTr("Radius defines the softness of the shadow. A larger radius causes the edges of the shadow to appear more blurry.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 100
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("samples")
+                toolTip: qsTr("This property defines how many samples are taken per pixel when edge softening blur calculation is done, ideally, this value should be twice as large as the highest required radius value plus one.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.samples
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 201
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("spread")
+                toolTip: qsTr("This property defines how large part of the shadow color is strengthened near the source edges.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.spread
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Offsets"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("horizontal offset")
+                toolTip: qsTr("HorizontalOffset defines the offset for the rendered shadow compared to the DropShadow items horizontal position.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.horizontalOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 100
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("vertical offset")
+                toolTip: qsTr("VerticalOffset defines the offset for the rendered shadow compared to the DropShadow items vertical position. ")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.verticalOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 100
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching and Border"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+            Label {
+                text: qsTr("transparent border")
+                toolTip: qsTr("When set to true, the exterior of the item is padded with a transparent edge, making sampling outside the source texture use transparency instead of the edge pixels.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.transparentBorder
+                    text: backendValues.transparentBorder.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/FastBlurItemSpecifics.qml b/src/imports/effects/designer/FastBlurItemSpecifics.qml
new file mode 100644
index 0000000..c5cf223
--- /dev/null
+++ b/src/imports/effects/designer/FastBlurItemSpecifics.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Blur Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+            text: qsTr("radius")
+            toolTip: qsTr("This property defines the distance of the neighboring pixels which affect the blurring of an individual pixel. A larger radius increases the blur effect.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 100
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching and Border"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+            Label {
+                text: qsTr("transparent border")
+                toolTip: qsTr("When set to true, the exterior of the item is padded with a transparent edge, making sampling outside the source texture use transparency instead of the edge pixels.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.transparentBorder
+                    text: backendValues.transparentBorder.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/GlowItemSpecifics.qml b/src/imports/effects/designer/GlowItemSpecifics.qml
new file mode 100644
index 0000000..79eb1bb
--- /dev/null
+++ b/src/imports/effects/designer/GlowItemSpecifics.qml
@@ -0,0 +1,146 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: qsTr("Glow Color")
+
+        ColorEditor {
+            caption: qsTr("Glow Color")
+            backendValue: backendValues.color
+            supportGradient: false
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Glow Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+            text: qsTr("radius")
+            toolTip: qsTr("Radius defines the softness of the glow. A larger radius causes the edges of the glow to appear more blurry. Depending on the radius value, value of the samples should be set to sufficiently large to ensure the visual quality.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.radius
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 100
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("samples")
+                toolTip: qsTr("This property defines how many samples are taken per pixel when edge softening blur calculation is done. Larger value produces better quality, but is slower to render. Ideally, this value should be twice as large as the highest required radius value plus one")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.samples
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 201
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("spread")
+                toolTip: qsTr("This property defines how large part of the glow color is strengthened near the source edges.")
+
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.spread
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching and Border"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+            Label {
+                text: qsTr("transparent border")
+                toolTip: qsTr("When set to true, the exterior of the item is padded with a transparent edge, making sampling outside the source texture use transparency instead of the edge pixels.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.transparentBorder
+                    text: backendValues.transparentBorder.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/HueSaturationItemSpecifics.qml b/src/imports/effects/designer/HueSaturationItemSpecifics.qml
new file mode 100644
index 0000000..4c1d116
--- /dev/null
+++ b/src/imports/effects/designer/HueSaturationItemSpecifics.qml
@@ -0,0 +1,120 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Hue and Saturation"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("hue")
+                toolTip: qsTr("This property defines the hue value which is added to the source hue value.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.adjustHue
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -1
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("lightness")
+                toolTip: qsTr("This property defines the lightness value which is added to the source saturation value.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.adjustLightness
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -1
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("saturation")
+                toolTip: qsTr("This property defines the saturation value value which is added to the source saturation value.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.adjustSaturation
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -10
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/RadialBlurItemSpecifics.qml b/src/imports/effects/designer/RadialBlurItemSpecifics.qml
new file mode 100644
index 0000000..693e878
--- /dev/null
+++ b/src/imports/effects/designer/RadialBlurItemSpecifics.qml
@@ -0,0 +1,159 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Blur Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("angle")
+                toolTip: qsTr("This property defines the direction for the blur and at the same time the level of blurring. The larger the angle, the more the result becomes blurred. The quality of the blur depends on samples property.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.angle
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 360
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("samples")
+                toolTip: qsTr("This property defines how many samples are taken per pixel when blur calculation is done. Larger value produces better quality, but is slower to render. This property is not intended to be animated. Changing this property may cause the underlying OpenGL shaders to be recompiled.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.samples
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 200
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Offsets"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("horizontal offset")
+                toolTip: qsTr("These properties define the offset in pixels for the perceived center point of the rotation.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.horizontalOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("vertical offset")
+                toolTip: qsTr("These properties define the offset in pixels for the perceived center point of the rotation.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.verticalOffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching and Border"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+            Label {
+                text: qsTr("transparent border")
+                toolTip: qsTr("This property defines the blur behavior near the edges of the item, where the pixel blurring is affected by the pixels outside the source edges. If the property is set to true, the pixels outside the source are interpreted to be transparent, which is similar to OpenGL clamp-to-border extension. The blur is expanded slightly outside the effect item area.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.transparentBorder
+                    text: backendValues.transparentBorder.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/SaturationItemSpecifics.qml b/src/imports/effects/designer/SaturationItemSpecifics.qml
new file mode 100644
index 0000000..fa3fec1
--- /dev/null
+++ b/src/imports/effects/designer/SaturationItemSpecifics.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Desaturation"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("desaturation")
+                toolTip: qsTr("This property defines how much the source colors are desaturated.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.desaturation
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 1
+                    stepSize: 0.1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/ZoomBlurItemSpecifics.qml b/src/imports/effects/designer/ZoomBlurItemSpecifics.qml
new file mode 100644
index 0000000..f874f84
--- /dev/null
+++ b/src/imports/effects/designer/ZoomBlurItemSpecifics.qml
@@ -0,0 +1,159 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Blur Details"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("length")
+                toolTip: qsTr("This property defines the maximum perceived amount of movement for each pixel. The amount is smaller near the center and reaches the specified value at the edges.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.zoomBlurLength
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -1000
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("samples")
+                toolTip: qsTr("This property defines how many samples are taken per pixel when blur calculation is done. Larger value produces better quality, but is slower to render.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.zoomBlurSamples
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: 0
+                    maximumValue: 200
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Offsets"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("horizontal offset")
+                toolTip: qsTr("These properties define the offset in pixels for the perceived center point of the rotation.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.zoomBlurHoffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -1000
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+
+            Label {
+                text: qsTr("vertical offset")
+                toolTip: qsTr("These properties define an offset in pixels for the blur direction center point.")
+            }
+            SecondColumnLayout {
+                SpinBox {
+                    backendValue: backendValues.zoomBlurVoffset
+                    Layout.preferredWidth: 80
+                    decimals: 1
+                    minimumValue: -1000
+                    maximumValue: 1000
+                    stepSize: 1
+                }
+                ExpandingSpacer {
+                }
+            }
+        }
+    }
+
+    Section {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        caption: "Caching and Border"
+
+        SectionLayout {
+            rows: 2
+            Label {
+                text: qsTr("cached")
+                toolTip: qsTr("This property allows the effect output pixels to be cached in order to improve the rendering performance.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.cached
+                    text: backendValues.cached.valueToString
+                }
+                ExpandingSpacer {
+                }
+            }
+            Label {
+                text: qsTr("transparent border")
+                toolTip: qsTr("This property defines the blur behavior near the edges of the item, where the pixel blurring is affected by the pixels outside the source edges. If the property is set to true, the pixels outside the source are interpreted to be transparent, which is similar to OpenGL clamp-to-border extension. The blur is expanded slightly outside the effect item area.")
+            }
+            SecondColumnLayout {
+                CheckBox {
+                    Layout.fillWidth: true
+                    backendValue: backendValues.transparentBorder
+                    text: backendValues.transparentBorder.valueToString
+                }
+            }
+        }
+    }
+}
diff --git a/src/imports/effects/designer/designer.pri b/src/imports/effects/designer/designer.pri
new file mode 100644
index 0000000..b73432a
--- /dev/null
+++ b/src/imports/effects/designer/designer.pri
@@ -0,0 +1,20 @@
+AUX_QML_FILES += \
+    $$PWD/effects.metainfo
+
+AUX_QML_FILES += \
+    $$PWD/BrightnessContrastItemSpecifics.qml \
+    $$PWD/ColorizeItemSpecifics.qml \
+    $$PWD/ColorOverlayItemSpecifics.qml \
+    $$PWD/DirectionalBlurItemSpecifics.qml \
+    $$PWD/FlipableItemSpecifics.qml \
+    $$PWD/DropShadowItemSpecifics.qml \
+    $$PWD/FastBlurItemSpecifics.qml \
+    $$PWD/GlowItemSpecifics.qml \
+    $$PWD/HueSaturationItemSpecifics.qml \
+    $$PWD/RadialBlurItemSpecifics.qml \
+    $$PWD/SaturationItemSpecifics.qml \
+    $$PWD/ZoomBlurItemSpecifics.qml \
+    $$PWD/TriangleItemSpecifics.qml
+
+AUX_QML_FILES += \
+    $$PWD/images/*.png
diff --git a/src/imports/effects/designer/effects.metainfo b/src/imports/effects/designer/effects.metainfo
new file mode 100644
index 0000000..87d8808
--- /dev/null
+++ b/src/imports/effects/designer/effects.metainfo
@@ -0,0 +1,287 @@
+MetaInfo {
+    Type {
+        name: "QtQuick.Studio.Effects.FastBlurItem"
+        icon: "images/fast-blur-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Blur"
+            category: "Effects"
+            libraryIcon: "images/fast-blur-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+    Imports {
+        showTagsForImports: [
+            "QtQuick.Studio.Effects"
+        ]
+    }
+
+    Type {
+        name: "QtQuick.Studio.Effects.ZoomBlurItem"
+        icon: "images/zoom-blur-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Zoom Blur"
+            category: "Effects"
+            libraryIcon: "images/zoom-blur-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Effects.GlowItem"
+        icon: "images/glow-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Glow"
+            category: "Effects"
+            libraryIcon: "images/glow-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+
+    Type {
+        name: "QtQuick.Studio.Effects.RadialBlurItem"
+        icon: "images/radial-blur-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Radial Blur"
+            category: "Effects"
+            libraryIcon: "images/radial-blur-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Effects.SaturationItem"
+        icon: "images/saturation-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Saturation"
+            category: "Effects"
+            libraryIcon: "images/saturation-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Effects.DirectionalBlurItem"
+        icon: "images/directional-blur-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Directional Blur"
+            category: "Effects"
+            libraryIcon: "images/directional-blur-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+     Type {
+        name: "QtQuick.Studio.Effects.ColorOverlayItem"
+        icon: "images/colourize-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Color Overlay"
+            category: "Effects"
+            libraryIcon: "images/colourize-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+     Type {
+        name: "QtQuick.Studio.Effects.DropShadowItem"
+        icon: "images/drop-shadow-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Drop Shadow"
+            category: "Effects"
+            libraryIcon: "images/drop-shadow-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Effects.ColorizeItem"
+        icon: "images/colourize-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Colorize"
+            category: "Effects"
+            libraryIcon: "images/colourize-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Effects.BrightnessContrastItem"
+        icon: "images/brightness-contrast-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Brightness Contrast"
+            category: "Effects"
+            libraryIcon: "images/brightness-contrast-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Effects.GammaAdjustItem"
+        icon: "images/gamma-adjust-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Gamma Adjust"
+            category: "Effects"
+            libraryIcon: "images/gamma-adjust-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Effects.HueSaturationItem"
+        icon: "images/hue-satuartion-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Hue Saturation"
+            category: "Effects"
+            libraryIcon: "images/hue-satuartion-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+    Type {
+        name: "QtQuick.Studio.Effects.MaskedBlurItem"
+        icon: "images/mask-blur-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Masked Blur"
+            category: "Effects"
+            libraryIcon: "images/mask-blur-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+
+    Type {
+        name: "QtQuick.Studio.Effects.MaskItem"
+        icon: "images/mask-16px.png"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Mask"
+            category: "Effects"
+            libraryIcon: "images/mask-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+        Type {
+        name: "QtQuick.Studio.Effects.BlendItem"
+        icon: "images/blend-mode-16px"
+
+        Hints {
+            takesOverRenderingOfChildren: true
+        }
+
+        ItemLibraryEntry {
+            name: "Blend"
+            category: "Effects"
+            libraryIcon: "images/blend-mode-24px.png"
+            version: "1.0"
+            requiredImport: "QtQuick.Studio.Effects"
+
+        }
+    }
+
+
+    Imports {
+        showTagsForImports: [
+            "QtQuick.Studio.Effects"
+        ]
+    }
+
+}
diff --git a/src/imports/effects/designer/images/blend-mode-16px.png b/src/imports/effects/designer/images/blend-mode-16px.png
new file mode 100644
index 0000000..8ec9736
--- /dev/null
+++ b/src/imports/effects/designer/images/blend-mode-16px.png
diff --git a/src/imports/effects/designer/images/blend-mode-24px.png b/src/imports/effects/designer/images/blend-mode-24px.png
new file mode 100644
index 0000000..4c76067
--- /dev/null
+++ b/src/imports/effects/designer/images/blend-mode-24px.png
diff --git a/src/imports/effects/designer/images/blend-mode-24px@2x.png b/src/imports/effects/designer/images/blend-mode-24px@2x.png
new file mode 100644
index 0000000..2b8a190
--- /dev/null
+++ b/src/imports/effects/designer/images/blend-mode-24px@2x.png
diff --git a/src/imports/effects/designer/images/brightness-contrast-16px.png b/src/imports/effects/designer/images/brightness-contrast-16px.png
new file mode 100644
index 0000000..76160da
--- /dev/null
+++ b/src/imports/effects/designer/images/brightness-contrast-16px.png
diff --git a/src/imports/effects/designer/images/brightness-contrast-24px.png b/src/imports/effects/designer/images/brightness-contrast-24px.png
new file mode 100644
index 0000000..d905d3d
--- /dev/null
+++ b/src/imports/effects/designer/images/brightness-contrast-24px.png
diff --git a/src/imports/effects/designer/images/brightness-contrast-24px@2x.png b/src/imports/effects/designer/images/brightness-contrast-24px@2x.png
new file mode 100644
index 0000000..f54d32a
--- /dev/null
+++ b/src/imports/effects/designer/images/brightness-contrast-24px@2x.png
diff --git a/src/imports/effects/designer/images/colourize-16px.png b/src/imports/effects/designer/images/colourize-16px.png
new file mode 100644
index 0000000..b753206
--- /dev/null
+++ b/src/imports/effects/designer/images/colourize-16px.png
diff --git a/src/imports/effects/designer/images/colourize-24px.png b/src/imports/effects/designer/images/colourize-24px.png
new file mode 100644
index 0000000..ee306f1
--- /dev/null
+++ b/src/imports/effects/designer/images/colourize-24px.png
diff --git a/src/imports/effects/designer/images/colourize-24px@2x.png b/src/imports/effects/designer/images/colourize-24px@2x.png
new file mode 100644
index 0000000..c2eca92
--- /dev/null
+++ b/src/imports/effects/designer/images/colourize-24px@2x.png
diff --git a/src/imports/effects/designer/images/directional-blur-16px.png b/src/imports/effects/designer/images/directional-blur-16px.png
new file mode 100644
index 0000000..f26f822
--- /dev/null
+++ b/src/imports/effects/designer/images/directional-blur-16px.png
diff --git a/src/imports/effects/designer/images/directional-blur-24px.png b/src/imports/effects/designer/images/directional-blur-24px.png
new file mode 100644
index 0000000..e58ffe1
--- /dev/null
+++ b/src/imports/effects/designer/images/directional-blur-24px.png
diff --git a/src/imports/effects/designer/images/directional-blur-24px@2x.png b/src/imports/effects/designer/images/directional-blur-24px@2x.png
new file mode 100644
index 0000000..4022b84
--- /dev/null
+++ b/src/imports/effects/designer/images/directional-blur-24px@2x.png
diff --git a/src/imports/effects/designer/images/drop-shadow-16px.png b/src/imports/effects/designer/images/drop-shadow-16px.png
new file mode 100644
index 0000000..d347eca
--- /dev/null
+++ b/src/imports/effects/designer/images/drop-shadow-16px.png
diff --git a/src/imports/effects/designer/images/drop-shadow-24px.png b/src/imports/effects/designer/images/drop-shadow-24px.png
new file mode 100644
index 0000000..55432f6
--- /dev/null
+++ b/src/imports/effects/designer/images/drop-shadow-24px.png
diff --git a/src/imports/effects/designer/images/drop-shadow-24px@2x.png b/src/imports/effects/designer/images/drop-shadow-24px@2x.png
new file mode 100644
index 0000000..266e7a8
--- /dev/null
+++ b/src/imports/effects/designer/images/drop-shadow-24px@2x.png
diff --git a/src/imports/effects/designer/images/fast-blur-16px.png b/src/imports/effects/designer/images/fast-blur-16px.png
new file mode 100644
index 0000000..9a1b1a1
--- /dev/null
+++ b/src/imports/effects/designer/images/fast-blur-16px.png
diff --git a/src/imports/effects/designer/images/fast-blur-24px.png b/src/imports/effects/designer/images/fast-blur-24px.png
new file mode 100644
index 0000000..7f409ad
--- /dev/null
+++ b/src/imports/effects/designer/images/fast-blur-24px.png
diff --git a/src/imports/effects/designer/images/fast-blur-24px@2x.png b/src/imports/effects/designer/images/fast-blur-24px@2x.png
new file mode 100644
index 0000000..07ba2a0
--- /dev/null
+++ b/src/imports/effects/designer/images/fast-blur-24px@2x.png
diff --git a/src/imports/effects/designer/images/gamma-adjust-16px.png b/src/imports/effects/designer/images/gamma-adjust-16px.png
new file mode 100644
index 0000000..c4b16ca
--- /dev/null
+++ b/src/imports/effects/designer/images/gamma-adjust-16px.png
diff --git a/src/imports/effects/designer/images/gamma-adjust-24px.png b/src/imports/effects/designer/images/gamma-adjust-24px.png
new file mode 100644
index 0000000..ad0c8dc
--- /dev/null
+++ b/src/imports/effects/designer/images/gamma-adjust-24px.png
diff --git a/src/imports/effects/designer/images/gamma-adjust-24px@2x.png b/src/imports/effects/designer/images/gamma-adjust-24px@2x.png
new file mode 100644
index 0000000..fe1d7bd
--- /dev/null
+++ b/src/imports/effects/designer/images/gamma-adjust-24px@2x.png
diff --git a/src/imports/effects/designer/images/glow-16px.png b/src/imports/effects/designer/images/glow-16px.png
new file mode 100644
index 0000000..8adc931
--- /dev/null
+++ b/src/imports/effects/designer/images/glow-16px.png
diff --git a/src/imports/effects/designer/images/glow-24px.png b/src/imports/effects/designer/images/glow-24px.png
new file mode 100644
index 0000000..782a5ce
--- /dev/null
+++ b/src/imports/effects/designer/images/glow-24px.png
diff --git a/src/imports/effects/designer/images/glow-24px@2x.png b/src/imports/effects/designer/images/glow-24px@2x.png
new file mode 100644
index 0000000..ae6795a
--- /dev/null
+++ b/src/imports/effects/designer/images/glow-24px@2x.png
diff --git a/src/imports/effects/designer/images/hue-satuartion-16px.png b/src/imports/effects/designer/images/hue-satuartion-16px.png
new file mode 100644
index 0000000..392d73c
--- /dev/null
+++ b/src/imports/effects/designer/images/hue-satuartion-16px.png
diff --git a/src/imports/effects/designer/images/hue-satuartion-24px.png b/src/imports/effects/designer/images/hue-satuartion-24px.png
new file mode 100644
index 0000000..1d53207
--- /dev/null
+++ b/src/imports/effects/designer/images/hue-satuartion-24px.png
diff --git a/src/imports/effects/designer/images/hue-satuartion-24px@2x.png b/src/imports/effects/designer/images/hue-satuartion-24px@2x.png
new file mode 100644
index 0000000..78e13d8
--- /dev/null
+++ b/src/imports/effects/designer/images/hue-satuartion-24px@2x.png
diff --git a/src/imports/effects/designer/images/mask-16px.png b/src/imports/effects/designer/images/mask-16px.png
new file mode 100644
index 0000000..10fb5b1
--- /dev/null
+++ b/src/imports/effects/designer/images/mask-16px.png
diff --git a/src/imports/effects/designer/images/mask-24px.png b/src/imports/effects/designer/images/mask-24px.png
new file mode 100644
index 0000000..a5f8078
--- /dev/null
+++ b/src/imports/effects/designer/images/mask-24px.png
diff --git a/src/imports/effects/designer/images/mask-24px@2x.png b/src/imports/effects/designer/images/mask-24px@2x.png
new file mode 100644
index 0000000..642c719
--- /dev/null
+++ b/src/imports/effects/designer/images/mask-24px@2x.png
diff --git a/src/imports/effects/designer/images/mask-blur-16px.png b/src/imports/effects/designer/images/mask-blur-16px.png
new file mode 100644
index 0000000..46a2236
--- /dev/null
+++ b/src/imports/effects/designer/images/mask-blur-16px.png
diff --git a/src/imports/effects/designer/images/mask-blur-24px.png b/src/imports/effects/designer/images/mask-blur-24px.png
new file mode 100644
index 0000000..7de9c08
--- /dev/null
+++ b/src/imports/effects/designer/images/mask-blur-24px.png
diff --git a/src/imports/effects/designer/images/mask-blur-24px@2x.png b/src/imports/effects/designer/images/mask-blur-24px@2x.png
new file mode 100644
index 0000000..b66139a
--- /dev/null
+++ b/src/imports/effects/designer/images/mask-blur-24px@2x.png
diff --git a/src/imports/effects/designer/images/radial-blur-16px.png b/src/imports/effects/designer/images/radial-blur-16px.png
new file mode 100644
index 0000000..5e984a0
--- /dev/null
+++ b/src/imports/effects/designer/images/radial-blur-16px.png
diff --git a/src/imports/effects/designer/images/radial-blur-24px.png b/src/imports/effects/designer/images/radial-blur-24px.png
new file mode 100644
index 0000000..6987300
--- /dev/null
+++ b/src/imports/effects/designer/images/radial-blur-24px.png
diff --git a/src/imports/effects/designer/images/radial-blur-24px@2x.png b/src/imports/effects/designer/images/radial-blur-24px@2x.png
new file mode 100644
index 0000000..cf72841
--- /dev/null
+++ b/src/imports/effects/designer/images/radial-blur-24px@2x.png
diff --git a/src/imports/effects/designer/images/saturation-16px.png b/src/imports/effects/designer/images/saturation-16px.png
new file mode 100644
index 0000000..23ce849
--- /dev/null
+++ b/src/imports/effects/designer/images/saturation-16px.png
diff --git a/src/imports/effects/designer/images/saturation-24px.png b/src/imports/effects/designer/images/saturation-24px.png
new file mode 100644
index 0000000..a437e6d
--- /dev/null
+++ b/src/imports/effects/designer/images/saturation-24px.png
diff --git a/src/imports/effects/designer/images/saturation-24px@2x.png b/src/imports/effects/designer/images/saturation-24px@2x.png
new file mode 100644
index 0000000..5d613f9
--- /dev/null
+++ b/src/imports/effects/designer/images/saturation-24px@2x.png
diff --git a/src/imports/effects/designer/images/zoom-blur-16px.png b/src/imports/effects/designer/images/zoom-blur-16px.png
new file mode 100644
index 0000000..ee5f40a
--- /dev/null
+++ b/src/imports/effects/designer/images/zoom-blur-16px.png
diff --git a/src/imports/effects/designer/images/zoom-blur-24px.png b/src/imports/effects/designer/images/zoom-blur-24px.png
new file mode 100644
index 0000000..34435c8
--- /dev/null
+++ b/src/imports/effects/designer/images/zoom-blur-24px.png
diff --git a/src/imports/effects/designer/images/zoom-blur-24px@2x.png b/src/imports/effects/designer/images/zoom-blur-24px@2x.png
new file mode 100644
index 0000000..568168e
--- /dev/null
+++ b/src/imports/effects/designer/images/zoom-blur-24px@2x.png
diff --git a/src/imports/effects/effects.pri b/src/imports/effects/effects.pri
new file mode 100644
index 0000000..6034a7b
--- /dev/null
+++ b/src/imports/effects/effects.pri
@@ -0,0 +1,17 @@
+QML_FILES += \
+    $$PWD/BlendItem.qml \
+    $$PWD/BrightnessContrastItem.qml \
+    $$PWD/ColorizeItem.qml \
+    $$PWD/ColorOverlayItem.qml \
+    $$PWD/DirectionalBlurItem.qml \
+    $$PWD/DropShadowItem.qml \
+    $$PWD/FastBlurItem.qml \
+    $$PWD/GaussianBlurItem.qml \
+    $$PWD/GlowItem.qml \
+    $$PWD/HueSaturationItem.qml \
+    $$PWD/MaskedBlurItem.qml \
+    $$PWD/MaskItem.qml \
+    $$PWD/RadialBlurItem.qml \
+    $$PWD/RotationItem.qml \
+    $$PWD/SaturationItem.qml \
+    $$PWD/ZoomBlurItem.qml
diff --git a/src/imports/effects/effects.pro b/src/imports/effects/effects.pro
new file mode 100644
index 0000000..214c871
--- /dev/null
+++ b/src/imports/effects/effects.pro
@@ -0,0 +1,23 @@
+TARGET = qtstudioeffectsplugin
+TARGETPATH = Studio/Effects
+IMPORT_VERSION = 1.0
+
+QT += qml quick
+QT_PRIVATE += core-private gui-private qml-private quick-private quicktemplates2-private quickcontrols2-private
+
+DEFINES += QT_NO_CAST_TO_ASCII QT_NO_CAST_FROM_ASCII
+
+include(effects.pri)
+
+OTHER_FILES += \
+    qmldir \
+    $$QML_FILES
+
+SOURCES += \
+    $$PWD/qtstudioeffectsplugin.cpp
+
+## !static: qtConfig(quick-designer): include(designer/designer.pri)
+## include(doc/doc.pri)
+
+CONFIG += no_cxx_module install_qml_files qtquickcompiler
+load(qml_plugin)
diff --git a/src/imports/effects/qmldir b/src/imports/effects/qmldir
new file mode 100644
index 0000000..f96c305
--- /dev/null
+++ b/src/imports/effects/qmldir
@@ -0,0 +1,15 @@
+FastBlurItem 1.0 FastBlurItem.qml
+GlowItem 1.0 GlowItem.qml
+ZoomBlurItem 1.0 ZoomBlurItem.qml
+RadialBlurItem 1.0 RadialBlurItem.qml
+SaturationItem 1.0 SaturationItem.qml
+DirectionalBlurItem 1.0 DirectionalBlurItem.qml
+ColorOverlayItem 1.0 ColorOverlayItem.qml
+DropShadowItem 1.0 DropShadowItem.qml
+ColorizeItem 1.0 ColorizeItem.qml
+BrightnessContrastItem 1.0 BrightnessContrastItem.qml
+HueSaturationItem 1.0 HueSaturationItem.qml
+MaskedBlurItem 1.0 MaskedBlurItem.qml
+BlendItem 1.0 BlendItem.qml
+MaskItem 1.0 MaskItem.qml
+RotationItem 1.0 RotationItem.qml
diff --git a/src/imports/effects/qtstudioeffectsplugin.cpp b/src/imports/effects/qtstudioeffectsplugin.cpp
new file mode 100644
index 0000000..eea2e29
--- /dev/null
+++ b/src/imports/effects/qtstudioeffectsplugin.cpp
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** 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 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** 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.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class QtStudioEffectsPlugin: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtStudioEffectsPlugin(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+QtStudioEffectsPlugin::QtStudioEffectsPlugin(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+
+}
+
+void QtStudioEffectsPlugin::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "qtstudioeffectsplugin.moc"
diff --git a/src/imports/imports.pro b/src/imports/imports.pro
new file mode 100644
index 0000000..40ab2ac
--- /dev/null
+++ b/src/imports/imports.pro
@@ -0,0 +1,6 @@
+TEMPLATE = subdirs
+SUBDIRS += \
+    components \
+    effects
+
+
diff --git a/imports/src.pro b/src/src.pro
index 5377565..5377565 100644
--- a/imports/src.pro
+++ b/src/src.pro