1. Home
  2. Documentation
  3. Using Dropsource
  4. Building the UI
  5. Adding UI Elements

Adding UI Elements

Build your app design on each page by choosing from the Elements drawer on the left, and use Properties on the right for styling.

ⓘ Note

If you don’t see the Element you need, you may be able to achieve what you’re looking for via a Plugin.


Each Element represents a native iOS or Android class, allowing you to display information and media, to capture user input, and to create the experience you need. Hover over an Element to see info on it together with a link to its class reference.

ⓘ Note

Elements with text and number values can display API response data, and to display an array from an API you can use any of the dynamic elements.

Drag Elements onto the Canvas, where you can resize and position by clicking and dragging an Element or its handles.

place element canvas

You can place certain Elements inside others, creating parent and child relationships. You will see a dotted line around a valid parent Element on the Canvas when dropping a child Element.

drop element in parent

Use the smart guides that appear while dragging an Element to center or align its position.

smart guides

ⓘ Note

You can switch smart guides on or off using the Preferences button that appears to the bottom right of the Canvas.
preferences button
Use the checkbox to toggle smart guides on or off.
canvas preferences

You can also use the Element Tree on the right to manage the structures within your page.

Styling Elements

With an Element selected on the Canvas (or in the Element Tree on the right), set its styling and layout constraints in the Properties tab on the right.

element properties

It’s best to rename your Elements to make them easier to identify while working on your project, and to make your source code more readable – use the Rename button next to the Element name.

rename element

Use the Styles controls to customize the available Properties for the selected Element, which include text values, fonts, colors, and more.

color properties

You can set certain Properties during user interaction states, to configure how an item will appear when selected or highlighted.

element states

ⓘ Note

You can set Element properties while your app is running using the Set Value action.

Using Constraints

Use the Constraints section to set the position of an Element relative to its parent Element.

button constraints

Choose a mode for your horizontal and vertical constraints, to position your Elements using left, right, top, bottom, width, and height values.

constraint mode

The selected mode determines which constraint inputs are editable.

constraint value

Use fixed values for constant positioning or relative values to create layouts that will scale to different screen sizes.

constraints fixed

ⓘ Note

In some cases you cannot edit particular constraint values for an Element type because they are set by the OS/class definition.

When you move or resize an Element on the Canvas, your selected mode will remain the same, and the constraint values will update to reflect your changes.

When you’re ready to specify what will happen when the user interacts with an Element, you’ll use the Properties > Events section.

Was this article helpful to you? Yes 1 No

How can we help?