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?

Improved backend for long-term success: We've migrated to SolidJS and updated our design system, making it significantly easier for our team to triage bugs, ship updates, and maintain the editor going forward.
Redesigned, more intuitive UX: Properties are now reorganized to reduce unnecessary tab-switching.
Set foundation for future AI integrations: The new architecture sets the stage for deeper AI integration in the property editor. If you have feedback during the beta period, let us know here.

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

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 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

New responsive defaults

Before	After
Widths and heights defaulted to fixed units	Max width and height default to percentages
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

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

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

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 scrolling	Live previews update immediately

Progressive disclosure

Before	After
All fields were shown at once regardless of relevance	Advanced options appear only when relevant
Advanced settings were visually equal to common ones	Context and intent come first, followed by advanced options as needed
Advanced configuration increased cognitive load	The interface adapts as complexity increases

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 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 width to content

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