# User Interface

When you open ![](/files/b0XsenUiNn5A5nQOXi0r) [HMI Designer](/hmi-designer/introduction.md) in Robpod Studio, the default user interface looks as follows:

<figure><img src="/files/jaLyoYC73IuKCyVj0eet" alt=""><figcaption></figcaption></figure>

The **HMI Panel Editor** is the graphical editor that let you arrange, move and resize **HMI components** with drag and drop actions.

New HMI components can be [added ](/hmi-designer/design-steps/add-hmi-components.md)to the editor using the **Palette Toolbar**.&#x20;

Available components are:&#x20;

* ![](/files/Vg5GgSCnwbK8MjxRT11x) Button
* ![](/files/pYghXwtsPHbeRquezLTq) Text
* ![](/files/8nP2zlqAkfu4N04mLxmU) Monitor
* ![](/files/xZYyLLoO4HxfrDvSd3Vh) Input
* ![](/files/LjY13rzir9tKNls9mSxV) Pose Input
* ![](/files/A2xTFOSBJ5LouNCW6Zj6) Image
* ![](/files/87GC7Pnz0s2iIfWjtZLn) DropDown
* ![](/files/ozHInv6NjbHyPhiVS8ou) Slider
* ![](/files/mHvM34EXSR6wOf3tb5md) CheckBox
* ![](/files/rnE1N8vOJ8XPU3gscERA) Tab
* ![](/files/pcuzqnKrsBj9Q1sdrEUS) Chart

When you select an existing HMI component you will be able to [edit ](/hmi-designer/design-steps/edit-hmi-components.md)it using the **Component Properties** side window.

Component Properties are divided in two section **UI Properties** and **Program Properties**.

**UI Properties** let you configure the appearance of HMI components. You can setup here graphical properties such as colors, fonts, styles, icons, alignement...

**Program Properties** are used instead to link the HMI component to robot program variables or functions. For example you can specify in this section the robot function that must be executed each time a user click on a button.

The **HMI Preview toolbar** can be used to display a [preview ](/hmi-designer/design-steps/preview-hmi-panel.md)of the designed HMI panel both on Desktop environment and on robot teach pendant.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.robpod.cloud/hmi-designer/user-interface.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
