The property editor

The property editor is the main tool for configuring the elements on your page. When you double-click an element on the page or single-click it in the left-hand element tree, this draggable popup appears, displaying various fields for customization.

The top bar

The top bar in the property editor consists of the element name, as well as a group of icons. The X on the right-hand side closes the element inspector.

Element name

The left-hand side shows the name of the currently selected element. Bubble will automatically generate a name that consists of the element type (i.e. Input or Button) and an alphabetical sequence (i.e. A, B, C).

This is an editable field where you can assign any name you want to an element:

You can assign any name you want to an element by clicking its name in the top bar of the property editor

Contextual video

The first icon shows a play symbol. Clicking this will expand a video tutorial relevant for the currently selected element. Note that not all elements have an associated tutorial – if the icon is not showing it means that there's no video available.

Element inspector

The second icon shows an information symbol. Clicking this opens the element inspector, which lets you inspect different ways in which this element interacts with the rest of your app.

In this case we have selected a button.

Custom states

This shows all the that are stored on the current element, as well as their type and default value. From here, add new custom states, modify their names and default values, or remove them.

Events

This section will list all the that are connected to this element. In the example in the above screenshot, we have one connected event (Button A is clicked). Clicking it will take you to the workflow editor and the associated workflow.

Actions

This section shows the that are connected to this element. In the example in the above screenshot we have one connected action (Show button A). Clicking it will take you to the workflow editor and the associated action.

Elements

This section shows the elements that are referencing the currently selected element in a dynamic expression. It will also list the parent container elements of those elements.

Comments

The icon showing a speech bubble icon will expand the for that element. This lets you take notes relevant for the currently selected element.

Tabs

Right below the top bar of the you'll find the property editor tabs. Each one represents a category of properties that can be applied to the selected element.

Appearance

The Appearance tab is where you set up the visual appearance of the element, such as its background style, borders, font, shadow, transparency and transitions. This is also where you can apply or detach .

For a detailed list and explanations of all appearance properties, refer to the core reference entry below:

Reference: Styling properties

Layout

The Layout tab is where you set up the responsive properties of an element, determining how the element behaves in relation to other elements on a responsive page. This includes properties like width/height, padding/margins and alignment.

For a detailed list and explanations of all responsive properties, refer to the core reference entry below. To learn more about responsive design, you can also check out the article.

Reference: Responsive properties Article series: Responsive design

Conditional

The Conditional tab is where you set up that control the visibility and styling of the selected element. For example, you can make a button change color based on whether the user is logged in or not.

To learn more about how to set up dynamic expressions and use them in conditions, see the articles below:

Article: Dynamic expressions Article: Conditions