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.

"Design mode"

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

  • Form Editor (1) provides a canvas for designing 2D UIs. For more information, see Editing 2D Content. When you are editing 3D scenes, the Form Editor is used as a canvas for the 3D scene projected by the camera.
  • 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.
  • Connection View (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 (6) shows a list of projects open in the current session. For more information, see Viewing Project Files.
  • States 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.
  • Transition Editor enables you to make movement between states smooth by animating the changes between states. For more information, see Animating Transitions Between 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.
  • Curve Editor enables you to view and modify the whole animation curve by inserting keyframes to the curve and dragging them and the point handlers to modify the curve. You can modify the appearance of the curve in the style editor. For more information, see Editing Animation Curves.

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

Watch a video about using the Design mode views:

© 2021 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.