Editing QML Files in Design Mode | Qt Creator Manual

- Qt Creator Manual
- Editing QML Files in Design Mode
- Qt Creator Manual 4.12.3

Creating Qt Quick Projects ◦ Creating UIs

# Editing QML Files in Design Mode

Qt Creator opens UI forms (ui.qml files) in the Form Editor view in the Design mode. It is recommended that you use UI forms for components that you want to edit in the Design mode.

The Design mode contains different views for designing UIs. To open the following views, select Window > Views:

- Form Editor (1) provides a canvas for designing 2D UIs. For more information, see Editing 2D Content.
- 3D Editor provides an editor for files you created using 3D graphics applications and stored in one of the supported formats. For more information, see Editing 3D Scenes.
- Text Editor provides a code editor for editing the QML code generated by the visual editors. For more information, see Working in Edit Mode.
- Library (2) displays the building blocks that you can use to design applications: predefined QML types, your own QML components, or Qt Quick Controls that you import to the project, and other resources. For more information, see Creating Components.
- Navigator (3) displays the items in the current QML file as a tree structure. For more information, see Managing Item Hierarchy.
- Properties (4) organizes the properties of the selected component. You can change the properties also in the Text Editor. For more information, see Specifying Item Properties.
- Connections (5) enables you to create connections between objects, signals, and object properties. For more information, see Adding Connections.
- File System shows all files in the currently selected directory. For more information, see Viewing the File System.
- Open Documents shows currently open files.
- Projects shows a list of projects open in the current session. For more information, see Viewing Project Files.
- States (6) displays the different states of the item. QML states typically describe user interface configurations, such as the UI controls, their properties and behavior and the available actions. For more information, see Adding States.
- Timeline (7) provides a timeline and keyframe based editor that enables you to animate the properties of UI components. For more information, see Creating Animations.

You can move the views anywhere on the screen and save them as workspaces, as instructed in Managing Workspaces.

Creating Qt Quick Projects ◦ Creating UIs