// Copyright (C) 2026 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \page creator-using-qt-quick-designer.html

    \previouspage creator-quick-tour.html
    \nextpage qtquick-form-editor.html

    \title Designing Qt Quick UIs

    \quotation
    \l {Design Qt Quick UIs}{How to: Design Qt Quick UIs}
    \endquotation

    \QC opens QML files (.qml) and UI files (.ui.qml) in a visual editor in the
    \uicontrol Design mode.

    \image {qtquick-designer.webp} {Qt Quick Designer}

    The following table describes the views that are visible by default.

    \table
    \header
        \li Number
        \li View
        \li Purpose
        \li Read More
    \row
        \li \inlineimage {numbers/01.png} {1}
        \li \uicontrol Navigator
        \li View the current QML file in a tree format.
        \li \l{Navigate component files}
    \row
        \li \inlineimage {numbers/02.png} {2}
        \li \uicontrol Projects
        \li View a list of the files contained within the open project.
        \li \l{Projects}
    \row
        \li \inlineimage {numbers/03.png} {3}
        \li \uicontrol 2D
        \li Design 2D UIs.
        \li \l{Design 2D UIs}
    \row
        \li \inlineimage {numbers/04.png} {4}
        \li \uicontrol Code
        \li View and modify the code generated by the visual editors. You can
            also edit the code in the \uicontrol Edit mode.
        \li \l{Editing code}, \l{Edit code}{How to: Edit code}
    \row
        \li \inlineimage {numbers/05.png} {5}
        \li \uicontrol Properties
        \li Modify the properties of the selected component.
        \li \l{Change properties}
    \row
        \li \inlineimage {numbers/06.png} {6}
        \li \uicontrol Components
        \li Select preset components and your own components to use in your
            application.
        \li \l{Using UI components}, \l {Use UI components}
            {How to: Use UI components}
    \row
        \li \inlineimage {numbers/07.png} {7}
        \li \uicontrol Assets
        \li Select assets such as images and fonts to use in your application.
        \li \l{Add assets}
    \endtable

    For more information about \l{Qt Qml}, \l{Qt Quick}, and \l{All QML Types}
    {QML types}, see the Qt reference documentation available online and
    in the \uicontrol Help mode.

    \section1 Open design views

    To open more views, go to \uicontrol View > \uicontrol Views. Move the views
    anywhere on the screen and save them as \e workspaces, as instructed in
    \l {Workspaces}.

    \sa {Design Qt Quick UIs}{How to: Design Qt Quick UIs}, {Qt Quick UI Design},
    {Designing Qt Quick UIs}
*/
