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
Before | After |
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
Before | After |
Most properties were visible at once with little organizational structure | Additional properties are now revealed through a plus (+) control, making it easier at a glance |
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
Before | After |
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
Before | After |
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
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 changesLabel 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 rotate
Make icon rotate
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
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 changesLabel 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 rotate Make icon rotate 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
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
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 + 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 |