Working with Elements
Learn more about the types of elements and how to use them
Components are the visible and functional features of your app, such as images, text, and units of logic.

Types of Elements

Components may be split up into three major categories:
  • UI Elements which are blue and mostly track to HTML elements
  • Logic Elements which are gray and are non-stateful pieces of logic
  • Stateful Elements which are green have state and are not in the UI
Above we see a green Request element which is calling an API. On a successful completion of the API call, the gray Get Values Logic element is allowing us to parse the object we got as a response into the two string values it contains: id and title. Then we are setting the label of the blue Text UI element with the title string in the object we got as a response, and the onSuccess call is allowing us to set it.
This flow will change the text inside of a button to the title attribute of the response of an API call once the button has been clicked.

Creating and Selecting Elements

To add a component to your application, you must find it in the elements panel on the left hand side of the studio and drag and dropping it into one of your three working panels: the tree panel, the flow panel, or the preview panel. Likewise, any element may be selected by double clicking on it in one of those three panels.
Once selected, you can edit the element in the inspector panel. Properties mode in the inspector panel will allow you to give your component a label and add styling. Actions mode will allow you to add interactivity.

Element Menu

If you click the three dotted menu on the right side of each element, you will enable a menu of actions for the element. There are four buttons in the menu that allow you to take the following actions:
  • Copy: this allows you to duplicate an element and all of its child elements.
  • Duplicate: this copies and pastes the element and all of its children into the same level of the app
  • Convert to Class: this allows you to change the element from an instance to a class- see more in Classes and Instances
  • Delete: this will destroy the element
Copy link
On this page
Types of Elements
Creating and Selecting Elements
Element Menu