Quick start guide to the Bubble Property Editor
Last Updated: Jan 2026
Introduction
What is the property editor (PE)?
The property editor is your control center for customizing elements on your page. It's where you adjust how elements look, behave, and respond to user actions. The property editor appears as a pinned panel on the right side of your editor whenever you select an element on the canvas.
Working with the property editor
Basic navigation
Resize the panel by dragging its left edge
Collapse sections you're not actively using to reduce visual clutter and make frequently-used controls easier to access
Search within dropdowns (like the color picker) to quickly find variables or options
Unpin the elements tree when you want more canvas space—press Esc to hide the property editor temporarily
Access custom states via the button in the top-right of the property editor header
Understanding the property editor’s tabs
The property editor is organized into three main tabs: Visual, Interaction, and Conditional. Each tab controls a different aspect of your element's behavior.
Visual tab
What it controls: How your element looks and where it's positioned on the page.
Key sections:
Content: Set the text, image, or data source for your element (varies by element type)
Size: Set width and height using Fixed, Fill, or Fit options
Layout: Configure alignment, padding, margins, and spacing. Use the visual nine-grid alignment tool for quick positioning
Style: Set colors, fonts, borders, shadows, and other visual properties
Configure: Element-specific settings (e.g., for repeating groups, inputs, buttons)
Appearance: Additional styling options specific to the element type. Background, Shadows, Border: Add/adjust a background, shadow, or border of the element
Quick tip: The new nine-grid alignment tool provides a visual way to position elements within their parent container — just click the grid position you want.
Interaction tab
What it controls: How users interact with your element and how the element behaves dynamically.
Key sections:
Visibility: Control when the element appears on the page
Workflows: View and create frontend workflows (events and actions) connected to this element
Options and Transitions: Configure clickability, hover effects, and other interactive properties.
Conditional tab
What it controls: When elements appear or change based on criteria you define.
Key features:
Name your conditionals for easy identification (instead of showing the full expression)
Drag and drop to reorder conditions
Collapse/expand individual conditionals to manage multiple conditions cleanly
Conditions are evaluated top-down, with later conditions overriding earlier ones when properties overlap
Examples: Bringing it all together
The best way to learn the property editor is to see it in action. Here are three practical examples which demonstrate how to use the Property Editor’s key features:
Example 1: Styling a button
Select your button element on the canvas
Go to the Visual tab in the property editor
In the Style section: Choose your button color using the color picker
In the Layout section: Set padding for a comfortable click area
Use the nine-grid alignment tool to position the button where you want it within its parent
Example 2: Making an element conditional
Select the element you want to make conditional
Go to the Conditional tab
Click + New to create a new conditional
Name it something clear (e.g., Show when user is logged in)
Define your condition (e.g., Current User is logged in)
Set which properties change when the condition is true (e.g., set This element is visible to yes)
Example 3: Adding workflows
With the Interaction tab, you can add element-level workflows directly without leaving the Design tab.
Select your element
Go to the Interaction tab
Open the Workflows section
Click the + button to add a new event. You'll see two common triggers:
An element is clicked (most common)
An element has an error running a workflow (enables you to customize what happens if the workflow results in an error — e.g. displaying a helpful error message)
After adding the event, you can edit the full workflow in the Workflow tab
Return to the Interaction tab in the property editor to view and modify actions in context
Custom states
Custom states live in a dedicated Custom States panel accessible from the property editor header.
What are custom states? Custom states are temporary, element-specific data storage that help you track information and pass it between workflows without using the database. They're useful for managing UI state, form data, and dynamic interactions.
Keyboard Shortcuts to Know
Shortcut
Action
Esc
Close the property editor
Ctrl + D (Cmd + D on Mac)
Duplicate the selected element
Ctrl + C
Copy element
Ctrl + V
Paste element
Ctrl + G
Group selected elements
Cmd + Click
Select the element underneath the current element
Cmd + /
Insert dynamic data into an expression
Tips for success
Sections are organized by frequency of use—the most common settings appear at the top, so you spend less time scrolling
Collapse sections you rarely use to keep your workspace clean and focused
Changes preview immediately on the canvas, so you can see results as you build
Use collapsible conditionals to manage complex logic without losing track of what each rule does
Name your conditionals clearly to make them easier to identify and maintain over time
Last updated
Was this helpful?