Important: Please read the Qt Code of Conduct -

QML editor can't display advanced components

  • When my QML components starts getting a bit advanced they can no longer be displayed in the QML editor. Either they are displayed as empty rectangles so their size and position is adjustable, or they are just displayed as a single dot when selected.

    Just adding "import Effects 1.0" to a component makes it only appear as a single dot in QML editor when using that component. See the code examples below.

    My question is: How can I prevent my advanced components from disappearing in QML editor?

    I tried a lot of tricks and work arounds to try to keep my components visible in the QML editor as long as possible. Like avoiding the use of scripts and avoiding the use of properties defined by C++. It can get complex pretty fast, does anyone have any tricks to enable the use of QML editor as long as possible?

    Example below. Save first file as main.qml and second one as MyComponent.qml. Try with and without the Effects import line.
    import QtQuick 1.1

    Rectangle {
    width: 200
    height: 200

    MyComponent {
        x: 10
        y: 10


    import QtQuick 1.0
    import Effects 1.0

    Rectangle {
    width: 100
    height: 100
    color: "red"

  • Moderators

    Yeah, a bit annoying. Also happens for components loaded with Loader, and when you reference items by QRC. I don't have any workaround, apart from the last case (QRC).

  • One solution is to build a qmlpuppet for your Qt version
    "this is explained here":

    Using the qmlpuppet of a specific Qt Version instead of the one provided by Qt Creator allows instantiating everything that is available from the import directory of this Qt version.

    Qmlpuppet is the external process that emulates and renders Qt Quick for the Qt Quick Designer.

    For the qrc case I added an enviroment variable called QMLDESIGNER_RC_PATHS.
    This allows mapping rc paths to absolute paths.
    e. g.: QMLDESIGNER_RC_PATHS="qrc:bla=/mySource/qrc"

    I consider this a hack/experimental feature, but it works. ;)

  • Moderators

    interesting, thanks! Might come in handy in my project. -Does that work for custom components, though?- doh, sorry, didn't read carefully enough ;)

  • Awesome, I recompiled qmlpuppet and QML designer is working great with all my QML components. All I need to do was add calls to qmlRegisterType for Colorize and DropShadow in main.cpp in qmlpuppet.

    This will help a lot in the design of my components, thank you very much.

  • Great that I could help. :)

    If you want to use custom types without patching qmlpuppet you have to create a qml plugin and install in it <qtbuild_dir>/imports.

Log in to reply