Property editor migration guide (For existing users)

Last updated: April 2026

Navigating the re-designed property editor

The property editor has undergone a major redesign. This guide will help you understand what’s changed, why we made these updates, and how to get up to speed quickly.

We've rearchitected the property editor’s frontend and backend from the ground up. In addition to a visual refresh, we've modernized the underlying codebase to address limitations from the original backend and set the foundation for future improvements.

What did the overhaul involve?

• Reorganized for clarity: Properties are grouped into logical tabs (Visual, Interaction, Conditional) with collapsible sections. You can drag-and-drop to reorder conditionals, constraints, workflow fields, custom states, and more. And you can now see the count of workflows, conditionals, and custom states on each element, so there's less scrolling, less tab-switching, and more visibility into how your elements are set up.

• New tools shaped by community feedback: Searchable color picker, inline workflow visibility from the design tab, and expandable dynamic expressions.

• Built on a modern foundation: We've migrated to SolidJS and a new design system, which means faster bug fixes, quicker feature releases, and the groundwork for future AI capabilities in the editor.

What’s changed

Light mode / Pinned PE

Before	After
Displayed in dark mode	Updated to light mode
Positioned as a floating interface element	Integrated as a pinned element within the layout
Visually separated from the primary layout	More clearly anchored within the page structure
Less predictable placement during scrolling	Provides a consistent and predictable location
Difficult for our engineers to improve	Creates room for future updates to the canvas

Same tabs, New names

Before	After
Appearance, Layout, and Conditional	Visual, Interaction, and Conditional
Emphasized styling and page structure	Emphasizes user intent and behavior
Reflected a more implementation-focused mindset	Reflects a more design-forward mental model

Re-organized and collapsible sections

Before	After
Properties were presented in long, static lists	Properties are grouped by purpose
Related settings were spread across multiple areas	Logical sectioning reflects how builders use each element
Sections could not be collapsed	Sections can be collapsed to reduce visual noise
Visual scanning required frequent scrolling	Frequently edited settings are surfaced earlier with new intuitive icons

More control of your editor

Resize as you need it

Show/hide your editor as you build

Unpin your elements tree when you want

Size and layout properties have a new home

Before	After
Sizing and layout settings were fragmented	All size and layout attributes are consolidated into one tab
Width and height controls lived alongside unrelated fields	Layout controls live together in one section
Responsive configuration required context-switching	Responsive behaviors can be adjusted in one pass

Building responsively made easier

Responsive behavior had to be configured manually	Padding and margin behavior is standardized
Layout tuning required additional setup	Fixed, fill, and fit dropdown replaces legacy checkboxes
Standard properties for configuring alignment	Modern, visual nine-grid view of element’s alignment
Manually add in spacing for all sides	Easily add or edit spacing options for vertical or horizontal

Drag-and-drop conditionals

Most properties were visible at once with little organizational structure	Expand or collapse conditionals to get more space or more cards in view
Reordering required multiple clicks	Drag and drop re-ordering is properly supported
Conditional properties can get lengthy and take up space	Conditionals can be collapsed by clicking in the header row for more breathing room
Creating a new conditional adds it to the bottom of the tab, potentially out of view	Conditionals scroll into view upon creation

Conditional names

Before	After
Conditionals displayed the full expression as the label	Conditional names are customizable
Identifying logic required reading the entire rule	Logic can be understood without expanding each rule

View connected workflows events and actions

Before	After
Adding workflows to elements while designing required switching to a new editor tab	Frontend workflows are visible in-context
No ability to see the events and actions from the Property Editor	New ability to edit existing actions and create new events from the Property Editor *Note: Planning to build out additional functionality during the beta

Edit fields and operators in expressions without deleting them

Before	After
Editing fields or operators meant deleting the entire constraint and rebuilding it from scratch which was slow, disruptive, and easy to mess up.	Edit fields and operators directly in place. No more deleting and rebuilding constraints. Make quick tweaks without breaking your flow, so iterating on logic is faster and less error-prone.

Edit workflow actions directly in the property editor

New custom states panel

Custom states were hidden behind an info icon	Custom states have a dedicated panel
Discoverability depended on prior knowledge	Access requires no navigation
Required to click into action in order to see if custom states have been added	See if there are custom states added on an element right away

New color picker

Colors were entered manually or selected from small lists	Full variable list appears in one view
Variable discovery was limited	Searchable variable lookup
Searching required manually scrolling through	Live previews update immediately
Navigating to the styles tab to edit a color variable	Directly edit while you’re mid-building

Complete list of property/label updates

Simplified properties
Element(s) or Section	Old name	New name
Background Section > Video Picker	Play video silent	Play with sound
AppBarButton, Button, FloatingGroup, Group, HorizontalListItem, Icon,Image,SelectableList, SelectableListItem,Shape, Sheet, ShortList, ShortListItem, TableCrossAxis, Text, Link	This element isn't clickable	Make clickable/interactive
Input, SearchBox	Prevent "enter" key from submitting	Submit on 'Enter'
Popup	This popup can't be closed by pressing 'Esc'	Close by pressing 'Esc'
Text	Do not apply bb-code	BBCode applies
WebView	Disable Zooming	Enable zooming
Text > Options	Do not apply bb-code	BBCode applies
Page	Apply gap spacing between elements	Row gap or Column Gap
Input	Limit the number of characters	Max number
Mobile > App Bar	Override back button label	Override back…
Containers	Allow vertical scrolling when content overflows	Allow vertical scrolling
Label changes
Element(s) or Section	Old label	New label
All elements > Visibility	This element is visible on page load	Visible on page load (toggle)
Icon> Options	Make the icon spin	Make icon rotate continuously
Alert > Configure	Position the alert at the top	Position at top of page
Video >Options	Play the video automatically on page load	Autoplay on load
Video > Options	Replay video when over	Loop on repeat
Map	Auto-close when another is clicked on	Auto-close when another is clicked
HTML	Wait to render this element until is visible	Wait to render until visible
HTML	Display as an iframe	Display as iframe
Repeating Group	Show partial list on last page if needed	Show partial list on last page
Input	Max number	Max characters
Form elements	The input should not be empty	Make required
Form elements	This input is disabled	Make disabled
Picture uploader	Make this file private	Make private
Picture uploader	Limit image size before upload	Resize images over 800px x 600px
Mobile sheet	Drag handle	Include drag handle
Form elements	Enable auto-binding	Auto-binding
Elements	Make this element fixed-width	Dropdown with Fixed, Fill, and Fit options
Make this element fixed-height
Fit width to content
Fit height to content
Make First / Make Last	Text labels on selected elements	Arrows instead of text
Previous / Next	Text labels on selected elements	Left/up right/down arrows

Keyboard shortcuts

Keyboard shortcut	Action
Ctrl + P	Preview your app (same as clicking PREVIEW)
Ctrl + T	Switch between Design, Workflow, and Data tabs
Cmd + Click	Select the element under the current element
Cmd + Drag	Resize the current element symmetrically
Shift + Drag	Resize and keep proportions constant
Ctrl + C	Copy current element, action, or event
Ctrl + V	Paste current element, action, or event
Ctrl + X	Cut current element, action, or event
Ctrl + Shift + C	Copy current element’s formatting
Ctrl + Shift + V	Paste formatting to current element
Ctrl + D	Duplicate current element
Cmd + K	Show/Edit workflow for current element
Ctrl + A	Select all elements on the page
Ctrl + G	Group selected elements into a new group
Ctrl + E	Center current element relative to parent
Ctrl + B	Make text bold
Ctrl + I	Make text italic
Ctrl + U	Underline text
Cmd + /	Insert dynamic data into an expression
Esc	Close the property editor
Option + Cmd + [	Make first
Option + Cmd + ]	Make last
Cmd + [	Move left/up
Cmd + ]	Move right/down