Editing QML Files in Design Mode

Qt Design Studio 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.
  • 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 (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.
  • 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.

Available under certain Qt licenses.
Find out more.