This guide will walk you through the steps to using .

This represents the user interface for SmartUX Studio, which is organized into four sections: the Left Pane, Canvas middle pane, Bottom pane and the Right Pane.

Let us know about the left pane.

Components: This section showcases the existing components within the application. once, user select one of the components, the bottom pane, canvas and the models pane would showcase details about that specific component.

UX Widgets provides screen arrangements and user experience widgets that can be employed for creating form designs.

All Files: Show all the files utilized in the project with the “All Files” feature.
It also allows you to access and modify the files.

Initiate Application Build – This prompts the application build dialog to construct the project within the deployment environment.

App Settings – This opens the dialogue for configuring project-related settings within the application.

Inform us about the central panel known as the Canvas, which serves as the design area. Within this space, you have the ability to drag and drop UX widgets, enabling you to design a form for your application.

Templates …Displays the HTML representation of the component through templates.

Component In this section, you can include the file paths for the behavior and styling of your application. This corresponds to the .ts file of the chosen component in Angular.

Styles You can create and modify Style definitions for the angular component here

Live Preview logs exhibit a record of the live preview.

Let us know the Right Pane.
Models pane. It is the list of controls of the magic xpa Form.

The outline panel on the right side exhibits the tree structure that outlines the widgets based on your template within the canvas.

Property Sheet This is a compilation of all the properties associated with the chosen Widget.

This is the brief introduction of SmartUX User Interface