UI Designer Overview

After successfully creating the application, you will be directed to the UI Designer Tab.

The UI Designer in AppMaster is designed to be user-friendly, allowing you to create stunning web app pages effortlessly.

Through its intuitive drag-and-drop interface, you can design web pages and populate them with content seamlessly, eliminating the need for advanced coding skills.

The UI Designer is divided into four primary sections for users to interact with:

1. Left Toolbar
2. Top Panel
3. Bottom Panel
4. Canvas Area
5. Properties Panel

Left Toolbar

The toolbar on the left side offers tools for structuring your website. By clicking on the icons situated at the top of this sidebar, the following panels will be revealed:

• UI Elements List
• Elements Tree
• Pages Tree
• Layouts Tree
• Assets Manager

UI Elements List (shortcut: 1)

The UI Elements List provides all the elements that can be added to the canvas area by dragging from the panel.

UI elements are organized into categories based on their purpose, making it easier to navigate and find the appropriate widget for your app.

For the fast going to the element, you can use the Search bar at the top of the panel.

Elements Tree (shortcut: 2)

From the Elements Tree, you can manage and organize all components placed on selected page of your web app.

Here, you can interact with these elements:

• move items between tree by dragging,
• rename components,
• change the visibility state of elements on the canvas (hide/show).

Use the Search bar at the top of the panel for the fast search element in the tree.

Pages Tree (shortcut: 3)

The Pages Tree allows you to organize and manage your site pages. You can create new pages or folders here.

In Pages Tree you can duplicate or delete pages or folders.

Use the Search bar at the top of the panel for the fast search page or folder in the tree.

Layouts List (shortcut: 4)

The Layouts Tree helps in managing your page layouts. As in Pages Tree you can duplicate or delete layouts.

Use the Search bar at the top of the panel for the fast search layout in the tree.

Assets Manager (shortcut: 5)

The Assets Manager facilitates the uploading and organization of assets (such as documents, images, and animations) for your website's use.

All assets you upload during development will be kept in the Asset Manager and can be reused without re-uploading.

You can also remove any asset that you no longer need.

Top Bar

The Top bar provides an additional set of view settings. Starting from the left-hand side, next to the menu button, and extending to the right, you have the following set of tools:

• Current Document: displays the page or layout you're currently working on. 
• Breakpoints: the breakpoint icons enable you to switch between different breakpoints to preview and modify how your site appears on various device sizes.
• Undo and Redo: the Undo and Redo buttons let you reverse or reapply actions you've made in the Designer, such as applying a style or removing an element. Also available are shortcuts: for undoing action - CRTL/⌘+Z and for redoing action - CTRL/⌘+SHIFT+Z.

Bottom Bar

The Bottom panel allows you to zoom or resize the page view.

On the left side of the panel, you can set custom page resolution by setting the height and width of your canvas.

On the right side, you can control the scale:

• Zoom in or zoom out
• Set scale in percentages
• Set actual size
• Fit the current window to the visible area

Canvas

The canvas is your interactive workspace. This is where you can engage with the page components. You can select elements, reposition them, and edit content directly on the page.

Also, you can copy (CRTL/⌘+C) and paste (CRTL/⌘+V) elements between pages and applications or duplicate elements within the current page (CRTL/⌘+D).

Properties Panel

The Properties panel on the right side of the Designer allows you to customize the visual appearance and behavior of the selected element, layout, or page.

The Properties panel comprises 4 main panels:

• Appearance panel
• Additional options panel (optional)
• Media Queries Panel
• Business Logic Panel

On the panel's header, you can rename the selected item by clicking on the item name, read the description, or delete the item by clicking the Trash icon.

Appearance Panel

The Appearance Panel allows you to access the selected element's displayed static content and properties. You can input or select these values in their corresponding fields, and the styles will be applied immediately to your elements on the canvas.

If no elements are selected on the canvas, this panel will display the settings of the current page or layout.

Additional Options Panel

The Additional Options Panel is intended for elements that require extra setting data or options.

You can set the data source or enter options manually depending on the selected component.

Media Queries Panel

The Media Queries Panel enables you to override item properties for each defined breakpoint.

Business Logic Panel

The Business Logic Panel provides all the triggers for an element and allows you to establish element interaction when the trigger fires.