Properties Panel Overview
The properties panel is the right-hand panel that opens automatically when you select any component on the canvas. It is the primary place you configure what a component shows, how it looks, and how it behaves.
Every component's properties panel is structured into a consistent set of zones: a header at the top for identity and navigation, one or two tabs in the body for content/appearance separation, and (for some components) additional add-on sections below the main tabs.
Tip: Collapse with ]
Press the ] key at any time to collapse or expand the properties panel, giving you more canvas space when you are done configuring and want to review the full layout.
Panel Header
The top section of the properties panel identifies the currently selected component and provides quick navigation to its parent components.
Component icon and name
The header shows the component's type icon on the left, followed by the component name. The name is editable inline — click directly on it to rename the component without opening a separate dialog. Renaming here is identical to renaming from the Hierarchy panel or from the component context menu.
Breadcrumb navigation
Below the component name is a breadcrumb trail showing the component's ancestors up to the page root. Each ancestor is a clickable link — clicking it selects that parent component and updates the properties panel to show its settings. This is the fastest way to navigate up the component tree without going back to the canvas or the Hierarchy panel.
When the breadcrumb path is too long to display in full, it collapses to "•••" to represent the hidden middle segments. Hover over "•••" to see the collapsed ancestors in a tooltip.
Components that live inside a named slot (a designated child area of a parent component) display a Slot chip next to the slot name in the breadcrumb. This indicates the component is positioned inside a specific slot rather than at a generic child position.
Component actions menu
The header also contains a kebab menu (three-dot icon) that exposes component-level actions identical to the context menu on the canvas: Rename, HTML Attributes, Custom CSS, Mark/Unmark as overridable, and Delete.
Content Tab
The Content tab controls what the component shows and how it behaves. Every component's content tab is unique to that component type, but all content tabs share the same binding and interaction patterns.
What you configure here
Data sources — For data-driven components (Table, List, Chart, etc.), specify the data source query or variable that provides the component's records.
Display values — For components that render text, images, or icons, bind these fields to state expressions or static values.
Events and actions — Attach event handlers (On Click, On Change, On Submit, etc.) and define the action sequences that run when those events fire.
Component-specific props — Options like column definitions for a Table, tab labels for a Tab Bar, or chart series configuration for a Chart.
Appearance Tab
The Appearance tab is where you control every visual and layout aspect of the component.
| Section | What it controls |
| Layout | Width, height, flex grow/shrink, alignment within a flex or grid parent, overflow behavior. |
| Spacing | Padding (inner space) and margin (outer space) on all four sides. Accepts pixel values, percentages, or CSS expressions. |
| Colors | Background color, border color, and any component-specific color tokens (e.g., text color, icon color). Colors reference theme tokens by default — you can override to a fixed value per-component. |
| Typography | Font size, weight, line height, letter spacing, and text alignment. Available on components that render text content. |
| Visibility conditions | Control when the component is shown or hidden. Options are Visible, Hidden, or a Conditions expression that evaluates dynamically at runtime. |
| Custom CSS | A code editor for writing CSS rules scoped to this component instance. Styles here override both global and theme-level styles. |
| HTML attributes | Arbitrary key-value pairs added to the component's root DOM element (e.g., aria-label, data-testid, role). |
| Effects | Box shadow, border radius, opacity, and other CSS-level visual effects. |
| Permissions | Show or hide the component based on the current user's role or permission set, evaluated server-side for security-critical components. |
Note: Single-tab components Some simpler components — such as a Divider or a Spacer — have only one relevant tab. In these cases, the tab strip (the Content / Appearance toggle) is hidden entirely and the properties are presented directly, keeping the panel clean.
Binding with Expressions
Most property fields in the properties panel accept either a static value or a dynamic expression. Expressions use double-curly-brace syntax: {{ }}. Inside the braces, you write JavaScript-like expressions that reference app state, data sources, variables, and component outputs.
📄 Expression examples
Display the current user's full name:
{{ currentUser.fullName }}
Show a count from a data source:
{{ dataSource1.data.length }}
Conditional text:
{{ form.status === 'active' ? 'Active' : 'Inactive' }}
Reference a variable:
{{ variables.selectedTab }}
Using the expression editor
When you click into a bindable property field, the field expands to show a mini expression editor with syntax highlighting and autocomplete. Typing {{ activates expression mode. The editor suggests available state paths as you type, reducing the need to memorize exact variable names.
Left Data Panel
When any property field in the properties panel is focused for binding, you can open the Data panel from the left rail to browse what is available for binding without needing to type out full paths.
The data panel lists available state in four groups:
| Group | What it contains |
| Data sources | All named data source queries configured for this page or globally. Expand each to see its fields and the current result shape. |
| Variables | Page-level and global variables. Expand each to see the variable's current value and type. |
| Current row | When a component is inside a repeating container (like a List or Table), this group exposes the fields of the current iteration's data record. |
| Logged-in user | Fields from the currently authenticated user's profile: ID, name, email, roles, and any custom user attributes. |
Clicking any item in the data panel inserts its path into the focused property field, wrapped in {{ }}. This is faster and less error-prone than typing expressions manually.
Property Collections — "+ Add" and Count Buttons
Some component properties represent collections — ordered lists of items such as table columns, list actions, tab labels, or dropdown options. These collections follow a consistent UI pattern in the properties panel:
A "+ Add" button appears at the bottom of the collection to add a new item.
A count button (e.g., "3 columns") appears at the top of the section. Clicking the count opens the full collection editor, showing all items at once.
Individual items can be reordered by dragging their drag handles.
Each item in the collection has its own mini-panel of properties that expand inline when you click the item row.
Tip: Bulk configure collections Click the count button (e.g., "4 columns") to open the full collection list view. From there you can see all items at once, drag to reorder, and delete items without clicking into each one individually.
Tooltip Add-on
Some components support a Tooltip add-on that appears as a collapsible section below the main Content and Appearance tabs. The Tooltip add-on lets you attach a tooltip that appears when a user hovers over the component.
Tooltip types
The tooltip can be configured in two modes:
| Type | Description |
| Text | A plain text tooltip. You provide a static string or a {{ }} expression in the "Content" field. The platform renders the tooltip with default styling consistent with the app's theme. |
| Custom | A slot-based tooltip. Instead of plain text, you add components (icons, formatted text, images, etc.) into the tooltip's slot. This gives you full control over the tooltip's visual design. |
Tooltip placement
When the Tooltip type is set to Custom, you gain access to placement settings:
Auto — The platform automatically positions the tooltip to avoid viewport overflow, choosing the best side (top, bottom, left, or right) at runtime.
Manual — You specify the exact preferred placement. An offset field lets you add pixel distance between the component and the tooltip popover.
Components with plain-text tooltip support
The following components support the Text-type tooltip add-on:
Button
Button Group
Icon
Icon Button
Other components may support tooltips through their own dedicated properties or via the Custom type depending on their implementation.
Visibility Conditions
The Visibility control in the Appearance tab determines whether a component is shown or hidden at runtime. There are three states:
| State | Behavior |
| Visible | The component is always shown. This is the default state for all components. |
| Hidden | The component is never shown. The component still exists in the DOM (it takes up no space), but is invisible. Useful during development when you want to keep a component configured but out of the current view. |
| Conditions | The component's visibility is controlled by a {{ }} expression. The component is shown when the expression evaluates to true and hidden when it evaluates to false. Evaluated at runtime. |
📄 Visibility condition examples
Show only when a variable is true:
{{ variables.showAdvancedOptions }}
Show only for admin users:
{{ currentUser.role === 'admin' }}
Show when a data source has results:
{{ dataSource1.data.length > 0 }}
Hide on mobile (breakpoint-based):
{{ app.device !== 'mobile' }}
Note: Hidden components in the Hierarchy Components that are configured as hidden (either with the static "Hidden" setting or a visibility condition that evaluates to false at design time) show an eye-off icon next to their name in the Hierarchy panel. This makes them easy to spot and select even though they are invisible on the canvas.
Component Permissions
The Permissions section in the Appearance tab controls access to a component based on the logged-in user's roles and permissions. Unlike visibility conditions (which use client-side expressions), permission checks are evaluated server-side and can be used for security-sensitive scenarios where client-side hiding is insufficient.
You can configure:
Which roles are allowed to see this component.
What happens when a user lacks the required permission: the component can be fully hidden, or rendered in a disabled/read-only state.
Custom CSS and HTML Attributes
Both of these options appear in the Appearance tab as well as in the component's context menu. They affect only the specific component instance they are set on.
Custom CSS
The Custom CSS editor accepts standard CSS syntax scoped to the component's root element. You can use & as a self-selector and nest rules for child elements. Custom CSS is applied after all theme and system styles, giving it the highest specificity for visual overrides.
📄 Custom CSS example
& { border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } &:hover { transform: translateY(-2px); transition: transform 0.2s ease; }
HTML Attributes
The HTML Attributes editor lets you add arbitrary key-value pairs to the component's root DOM element. Common use cases include:
aria-label,aria-describedby,role— Accessibility attributes for screen readers.data-testid,data-cy— Test selectors for automated end-to-end tests.tabindex— Keyboard focus order control.