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) add-ons such as a tooltip, added from the Content tab.
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. To rename the component, click the pencil icon next to the name. You can also rename it from the component's menu in the Hierarchy panel.
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, the middle segments collapse into a ••• button. Click ••• to open a list of the hidden ancestors, then click one to select it.
When the item you selected is a slot (an area inside a component, such as a Card's body or a custom tooltip's contents), the breadcrumb row starts with a Slot chip. This tells you you're editing the area inside the component rather than a component.
Component actions menu
The header also contains an actions menu (three-dot icon) with these options: Cut, Copy, Copy styles, Paste, Paste styles, HTML Attributes (web apps only), Custom CSS, and Delete. When you're editing a template component, it also offers Mark/Unmark as overridable. Custom CSS and HTML Attributes are added from this menu, not from the canvas right-click menu.
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 — In the Interactions section of the Content tab (it reads "Trigger action in response to events" while empty), click the + icon (Add Interaction), pick an event such as On Click or On Change, and add the actions that run when it fires. See Events & Actions Overview.
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 | The component's layout, width and height, padding, margin, gap, position (Static, Relative, Absolute, Fixed, Sticky), overflow, flex options (wrap, direction, justify, align), and rotation. |
Layout Height / Layout Width | Minimum and maximum height and width. Width can be Fill, Fit Content, or a fixed value. |
Background | Background color (and hover color), image, size, and box shadow. |
Border | Border width, style (Solid, Dashed, Dotted), color, and corner radius. |
Typography | Font size, weight, line height, letter spacing, and text alignment. Available on components that render text content. |
Theme | The component's theme variant. |
Visibility | Control when the component is shown or hidden. Options are Visible, Hidden, or Conditions. |
Permissions | The permissions a user needs to see the component. |
Custom CSS | Appears once you add it. A code editor for CSS rules scoped to this component instance. Styles here override both global and theme-level styles. |
HTML Attributes | Appears once you add it. Key-value pairs added to the component's root DOM element (e.g., |
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. See Expression Syntax for the full syntax.
📄 Expression examples
Display the logged-in user's name:
{{ userContext['name'] }}
Show a count from a data source:
{{ (dataSource1['data']['objects'] || []).length }}
Conditional text:
{{ form.status === 'active' ? 'Active' : 'Inactive' }}
Reference a page variable (by its name):
{{ 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 single button shows + Add while the collection is empty. Once you add items, it shows the count (e.g., "3 columns") with an edit icon. Click it to add, edit, or remove entries.
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. Add it from Add-ons on the Content tab. 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.
Manual — You pick the tooltip's position yourself.
With Custom you also get an Offset field: the gap between the component and the tooltip popup, in pixels.
Components with a Tooltip add-on
The following components have the Tooltip add-on, and each supports both the Text and Custom types:
Button
Button Group (per option)
Card
Icon
Icon Button
Text
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. It isn't rendered in the app; it stays in the Hierarchy panel so you can select and re-enable it. Useful during development when you want to keep a component configured but out of the current view. |
Conditions | Click Add visibility conditions and build a rule: each clause is a field, an operator, and a value, and you combine clauses with AND/OR. The component shows only when the rule is true. Evaluated at runtime. |
Visibility condition examples
Show only when a page variable is true: a clause on the variable
showAdvancedOptionsthat checks it equalstrue.Show only for certain users: a clause on the current user's role.
Show when a data source has results: a clause that checks the data source's records are not empty.
To show a component on some devices and hide it on others, use the per-device Hidden setting (see Responsive Design). For more on visibility rules, see Conditions & Visibility.
Note: Hidden components in the Hierarchy. A component that isn't visible on the canvas for the selected device shows an eye-off icon next to its name in the Hierarchy panel. That covers the static Hidden setting, a per-device Hidden override, and a visibility condition that currently evaluates to false. This makes hidden components easy to spot and select even though they don't show on the canvas.
Component Permissions
The Permissions section in the Appearance tab controls which users see a component, based on your app's permission groups. Permissions only control what is rendered; protect the underlying data with data-source and API permissions.
Click + Configure permissions (or the + icon, Add Permission) and choose the permissions (from your app's permission groups) a user needs to see this component. Users without them don't see the component at all.
Custom CSS and HTML Attributes
Add these from the actions menu (three-dot icon) in the properties panel header. Once added, they appear in the Appearance tab. 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. See Tokens & Custom CSS.
📄 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.