Panel Overview

The UI Editor is organized into five core panels: Settings, States, Hierarchy, Element Properties, and View. Each one provides a different slice of functionality which help you build interactive layouts. You can drag-and-drop panels to create your own custom layout or switch among pre-configured Workspaces via the Workspace menu in the toolbar.

Settings Panel

The Settings panel is where you can set configurations for your entire layout and its interactive behaviors. This panel includes Layouts Settings where you can set the Logical Screen size, Language localization, and Property References. It also includes the Events module, allowing you to create and modify Events, which are the backbone of creating interactive QSApps.

States Panel

The States panel displays a complete list of all state modifiers that are added to elements. It is useful for quickly viewing, searching for, and activating modifiers within your layout.

Hierarchy Panel

The Hierarchy Panel displays every UI element in your layout in a tree format, where you can add, delete, select, and rearrange elements. This panel is vital for managing your layout and keeping it organized.

Element Properties Panel

When a node is selected in the Hierarchy, this panel exposes all of its properties, where you can edit the appearance and functionality of each element. This panel typically contains properties that let you change the position, size, transform, and appearance. Additionally, it's where you can add interactive modifiers and triggers which can be used together with the Machine Editor to add interactivity and functionality to your layouts.

View Panel

The View Panel is where you can see the visual representation of your layout. The View updates in real-time to give you a constant visualization of any changes you make to an element.