Qt World Summit: Register Today!

How to load custom QML controls into the QML Designer?

  • I am facing difficulty in importing my custom control into QML Designer. i.e. MyQMLControls 1.0 library has a BlueButton.
    I want that BlueButton in QML Designer when I import MyQMLControls 1.0 in MyTestApp Project so that I can drag and drop the control .
    Any help is appreciated.

  • I found a solution. I followed the below Steps:
    1.Created a QtCreator Extension Plugin
    2.In Pro file: Add
    uri = mycompany.qmlcomponents
    version =1.0

    3.Added my CustomControl QML file.
    4.Registered using qmlRegisterType
    5.In qml dir:
    module mycompany.qmlcomponents
    plugin MyExtensionPlugin
    classname MyExtensionPlugin
    typeinfo mycompany.qmlcomponents
    5.Wrote the MetaInfo file (myextensionplugin.metainfo):
    MetaInfo {
    Type {
    name: "mycompany.qmlcomponents.MyCustomItem"
    icon: "images/customitem-icon.png"

            ItemLibraryEntry {
                name: "CustomItem"
                category: "My Extension - Items"
                libraryIcon: "images/customitem-icon.png"
                version: "1.0"
                requiredImport: "mycompany.qmlcomponents"
                Property {
                    name: "itemItext"
                    type: "binding"
                    value: "qsTr(\"Button\")"

    6.Create a designer folder
    7.Add following to designer.pri
    QML_FILES +=
    QML_FILES += $$PWD/myextensionplugin.metainfo
    QML_FILES +=
    8.Build and install
    9.Generate qmltypes: [You can also do this during qmake]
    qmlplugindump mycompany.qmlcomponents1.0 > plugins.qmltypes
    10.The controls will be available in the qml designer.

    Check the unsupported properties for custom controls: