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 – click the button in the Elements drawer to find out more.


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.

Use the Constraints section to set the position of an Element relative to its parent Element. Use constant values for fixed positioning or proportional values to create layouts that will scale to different screen sizes.

ⓘ Note

Once an Element is dropped, its top left corner becomes a fixed point – if resized, it will resize to the upper left corner.

constraint types

ⓘ Note

If the constraints for an Element are grayed out, it means that they are not editable values as they are predefined by the platform class.

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?