# UI Editor Overview

Within Plateau Studio, the **UI Editor** takes center stage as a pivotal area for component customization and app design. When selecting a model, this dynamic workspace opens in the middle of the screen, adhering to the principle of **WYSIWYG** (What You See Is What You Get) in the Low Code Editor environment.

On the left side, you have access to both the default **component list** and a comprehensive display of the **components you utilized in your qjson files**. This enables seamless navigation and quick selection of components, streamlining your workflow.

To the right, the customization panel provides a rich set of options, allowing you to fine-tune every aspect of your selected components. From modifying **visual properties** such as size, color, and layout to defining **dynamic behaviors**, such as button actions and event triggers, the UI Editor equips you with the necessary tools to bring your app's vision to life.

<img src="https://stechq.github.io/cdn/documentation/studio/Editor1.png" width="640" />

This section of the documentation acts as an informative guide, providing you with a preview of where to find crucial UI Editor details and related actions. By following the provided links, you can delve deeper into specific sections.

## Components

Within Plateau Studio, you have access to an array of component sets, including the **Vuetify** components as well as the ability to create your own customized components.

To find each components' usage and style details, you can click [here.](https://v2.vuetifyjs.com/en/components/alerts/#colored-border)

### Components in UI Editor

On the left-hand side of the Editor, the component sets are conveniently organized based on their function and/or style, allowing for seamless navigation and exploration.

<img src="https://stechq.github.io/cdn/documentation/studio/Component1.png" width="640" />

The UI Editor provides a **search feature**, enabling you to search for a specific component by name or related keywords.

<img src="https://stechq.github.io/cdn/documentation/studio/ComponentSearch.png" width="640" />

To gain deeper insights into the components available, click the **Info** button located next to each component. This provides you with specific definitions and details about the component.

<img src="https://stechq.github.io/cdn/documentation/studio/ComponentInfo.png" width="640" />

To check details on how to use components and style them, click [here.](https://studio.onplateau.com/docs/ui/docs/UI-Screens/Components/Creating-Application-Components/block-component)

### Treeview

The **Treeview** is positioned below the components and provides a hierarchical representation of your added components.

By clicking the arrows situated on the right-hand side, you can easily **collapse** or **expand** the tree structure, allowing for navigation and organization of your components.

<img src="https://stechq.github.io/cdn/documentation/studio/Treeview.png" width="640" />

You can also locate and interact with the corresponding component in the UI Editor, enabling the editing and customization. After locating your components, you can take following actions: **Dublicate, move and select parent**.

<img src="https://stechq.github.io/cdn/documentation/studio/Treeview2.png" width="640" />

## Page Design Area

This is the area where you can manage and place your components and see them in UI pages.

<img src="https://stechq.github.io/cdn/documentation/studio/PageDesign1.png" width="640" />

When you click a component in page design area, you can see the related content highlighed in Treeview as well. With this, you can also perform the following actions: Duplicate, Move and Select Parent.

<img src="https://stechq.github.io/cdn/documentation/studio/PageDesign2.png" width="640" />

## Style

In the **Style** tab, you can fine-tune various aspects of your component's presentation, including its **layout**, **appearance**, and **responsiveness** across different device breakpoints For more details about Layout, click [here.](https://studio.onplateau.com/docs/ui/docs/UI-Screens/Layout-Design/layout)

<img src="https://stechq.github.io/cdn/documentation/studio/Style1.png" width="640" />

## Settings

Settings gives you the list of the features and props that you make changes to.

<img src="https://stechq.github.io/cdn/documentation/studio/Settings.png" width="640" />

## Props

In the **Props** section, you can manually assign specific property values to your components, allowing for precise control and customization of their behavior and appearance.

These prop values can be set for both the Editor, providing a visual representation of your component during the design phase, and the UX (User Experience), dictating how the component behaves and interacts with users in the final application.

For more details about Layout, click [here.](https://studio.onplateau.com/docs/ui/docs/UI-Screens/Layout-Design/layout)

<img src="https://stechq.github.io/cdn/documentation/studio/Props1.png" width="640" />

## Events

The **Events** tab provides a toolset for defining the behavior and interactivity of your components.

<img src="https://stechq.github.io/cdn/documentation/studio/Events1.png" width="640" />

You can assign actions and reactions to various events, enabling you to create dynamic and responsive user experiences. Whether it's a button click, a value change, a scroll event, or any other interaction, you can easily define the desired behavior and trigger the corresponding actions.

## Top Bar Buttons

Situated at the uppermost section of the UI Editor in Plateau Studio, you will find a collection of navigational elements referred to as the **Toolbar**.

The Toolbar serves as an essential **control hub** that enables swift and efficient navigation within the UI Editor.

It comprises a set of strategically placed buttons and icons that offer quick access to frequently used functionalities, enhancing your overall editing experience.

<img src="https://stechq.github.io/cdn/documentation/studio/TopBar.png" width="640" />

### Edit

**Undo/Redo:** Allows you to recall and re-make your actions.

<img src="https://stechq.github.io/cdn/documentation/studio/Edit.png" width="640" />

### Localization

**Local Resources:** Allows you to add new local resources.
**Languages:** Gives you an option to switch between your added languages.
**Add Language:** Allows you to add new languages by using the related language code.

<img src="https://stechq.github.io/cdn/documentation/studio/Language1.png" width="640" />

For more details about language settings on Plateau Studio, click [here.](https://studio.onplateau.com/docs/ui/docs/UI-Screens/Logic/localization)

### View

**Source Code:** Allows you to check the source code that is created automatically when you add and/or edit components .

<img src="https://stechq.github.io/cdn/documentation/studio/View.png" width="640" />

### Preview Mode

Allows you to check your UI pages based on your device preference and responsive button behaviors, such as typing, clicking etc.

<img src="https://stechq.github.io/cdn/documentation/studio/PreviewMode.png" width="640" />

### Find In Page

Allows you to search the components that you've used in your page design area.

<img src="https://stechq.github.io/cdn/documentation/studio/FindInPage.png" width="640" />

### Simulator

Allows you to preview your UI pages on your iOS & Android mobile devices by scanning the generated QR code.

<img src="https://stechq.github.io/cdn/documentation/studio/MobileSimulator.png" width="640" />

Scanning the QR code through your phone camera launches the phone's browser and redirects to the StudioApps application if the application already exists on your device. After the application launches, you can preview your UI page on your iOS & Android device.

If StudioApps application does not exist on your current device, the browser redirects to the platforms where you can download the app instead.

### Interact Component

Allows you to check and test your component's responsive behaviors in your page design area, such as typing, clicking etc.

<img src="https://stechq.github.io/cdn/documentation/studio/InteractComponent.png" width="640" />

### Errors

Shows you any errors that occurs in your UI pages.

<img src="https://stechq.github.io/cdn/documentation/studio/Errors.png" width="640" />

### Help

You can find detailed documentation, versions, videos and component samples.

<img src="https://stechq.github.io/cdn/documentation/studio/Help.png" width="640" />