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
Set gap between child elements in container elements
Easily set matching top/bottom or left/right margins and padding in a single input
Style: Set colors, fonts, borders, shadows, and other visual properties
Properties with a blue background indicate they're overriding your element's Style settings
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
See the count of workflows directly in the Interaction tab header
Add additional workflows using the + button when workflows already exist
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
Duplicate conditionals to quickly create similar rules without starting from scratch
See inherited style conditionals alongside element-specific conditionals for full visibility into what's affecting your element
Auto-scroll to new conditionals newly created conditionals automatically scroll into view
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
Use drag-and-drop to quickly reorder conditionals, constraints, workflow fields, custom states, and other properties
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
Check the Interaction or Conditionals tab headers for a quick count of how many workflows or conditionals (respectively) are attached to an element