Overview

The UnifyApps page builder is a single-page application split into four working areas arranged around a central canvas:

• The Top Bar — app identity, page switching, global actions (preview, publish), and keyboard shortcut toggles.

• The Left Rail — a set of icon-labeled panels giving you access to AI, design, navigation, data, the block tree, search, analytics, version history, settings, and debugging tools.

• The Canvas — the live rendering of the current page. Click any element to select it.

• The Properties Panel — context-sensitive configuration for the currently selected block (Content, Appearance, and Interactions).

Selection is synchronized across all four areas: clicking a block on the canvas selects it in the Hierarchy panel and opens its settings in the Properties panel, and vice versa.

For a closer look at placing, selecting and moving components on the canvas, see Page Builder Canvas & Component Arrangement.

The Canvas

The canvas occupies the center of the builder and is the primary way to interact with your page at a glance. It renders a live, frame-accurate representation of your app in the current base device viewport.

Selecting and interacting with blocks

Click any block on the canvas to select it. A selection ring highlights the block's bounds and its name appears in a label above it. The Properties panel on the right immediately reflects the selected block's settings.

When a block is selected on the canvas:

• Its node is highlighted in the Hierarchy panel tree.

• Its properties are shown in the Content, Appearance, and Interactions tabs of the Properties panel.

• A drag handle appears so you can reorder it among its siblings by dragging.

Interactive Canvas mode

By default, the canvas is in Selection mode — clicks select blocks rather than triggering their interactions. Toggle to Interactive Canvas mode (keyboard shortcut: Cmd/Ctrl + Shift + E) to run the page as a user would, with all click handlers and form submissions live. This is useful for testing event-action chains without leaving the builder to open the full preview tab.

The canvas header shows a cursor icon indicator when Interactive Canvas mode is active.

Panel visibility toggles

Pressing [ hides or shows the left rail. Pressing ] hides or shows the Properties panel. Both toggles give you a wider canvas when you need to review layouts at full width.

The Top Bar

The top bar spans the full width of the builder and hosts five groups of controls, from left to right:

1. Back navigation and app identity — the back arrow, the app name and the publish status.

2. Device and page switchers — the device switcher (Desktop, Tablet, Mobile) and the page switcher.

3. Interactive Canvas toggle — switches the canvas between selecting blocks and running the page (Cmd/Ctrl + Shift + E).

4. Collaboration and page score — avatars of the people editing the app with you, and the page score shown as a percentage. Click the score for details.

5. Preview and Publish — the Preview icon (a play button, labelled Preview Application), the Publish button, and a toggle for the Properties panel.

Back navigation and app identity

On the far left, a back arrow returns you to the Applications Manager. Next to it, the app name is displayed as a clickable label that opens the app's Overview tab in a new browser tab.

Page switcher

The page switcher is a button in the top bar that shows the current page's name. Click it to open a popover listing the app's pages, then click any page to switch to it — the canvas and Hierarchy panel update immediately.

Note: Adding a new page from the page switcher.

1. Open the page switcher: Click the current page name in the top bar.

2. Click + and choose Page: The menu offers two options: Page and Module.

3. Pick a template: In Choose a Template, select a template such as Blank Page.

4. Fill in Page Setup: Enter the page name and the other details in Page Setup to create the page.

To rename a page later, use Rename Page in the page's menu in the Hierarchy panel.

Autosave

The builder saves every edit automatically — there is no Save button to press. Each auto-save creates an entry in the Saved Versions panel in the left rail. When teammates edit the same app, their avatars appear in the top bar.

Preview and Publish

The Preview icon (a play button, labelled Preview Application) opens your latest auto-saved work in a new browser tab with live data. Publish opens a confirmation panel and creates a new numbered version (V1, V2, …) at the app's Application URL. The top bar's publish status reads Not Published before the first publish, and Vn Published (for example, V3 Published) after that. For details, see Preview & Publish.

Keyboard shortcuts

Tip: Builder keyboard shortcuts

The Left Rail

The left rail is a vertical strip of icon buttons, each opening a dedicated panel. Only one panel is open at a time — clicking an active panel's icon closes it. The rail can be hidden entirely with the [ shortcut.

AI Assistant

The AI Assistant panel understands your app's current page context — what blocks exist, what data sources are configured, what variables are declared. You can prompt it to:

• Generate a new page from a description ("Create a detail page for a contacts record with a header card and an activity timeline").

• Add specific components ("Add a bar chart below the table showing counts by status").

• Modify existing components ("Make the table filterable by the Status column").

• Wire events ("On row click in the table, navigate to /contacts/:id").

The AI Assistant generates changes as diffs against the interface record — you can review and accept or reject them before they are applied to the canvas.

Hierarchy Panel

The Hierarchy panel is the most-used panel in the builder for users who prefer precise structural control. The tree displays the full nesting of blocks on the current page, starting from the page's three roots: Header, Body and Footer. Every block node shows:

• A type icon (table, form, button, container, etc.)

• The block's instance name (e.g., table1, form1)

• A visibility toggle (eye icon) to show/hide the block on the canvas

Right-clicking any node opens the block actions context menu with options: Add Component, View component, Cut (Cmd/Ctrl + X), Copy (Cmd/Ctrl + C), Copy styles (Shift + Cmd/Ctrl + C), Paste (Cmd/Ctrl + V), Paste styles (Shift + Cmd/Ctrl + V), Rename, HTML Attributes, Custom CSS, Mark overridable / Unmark overridable (template components only), and Delete.

Data Panel

The Data panel shows one list of resources: the current page's data sources, functions, and variables, plus an App section for resources shared across all pages. Each section has its own + (Add Resource) button — choose Data Source, Function, or Variable to create one at that level. Resources defined at app level are accessible in any block's binding expressions using the standard {{resourceName}} syntax. See Data Sources Overview.

Saved Versions Panel

The Saved Versions panel logs every auto-save as a change entry. For restoring and comparing versions, see App Versions. Each log row records:

• Entity type — Block, Data Source, Variable, Page, Settings, etc.

• Change type — Created, Updated, or Deleted.

• Entity name — The name of the affected item (e.g., table1, dataSource1).

• Timestamp — When the save occurred (to the second).

• Author — The user who made the save (visible in collaborative sessions).

• Deployed version badge — A "V3" badge (or similar) indicating which published version included this save, if any.

To restore a previous state, click a save entry and select Restore this version. The working copy is rewound to the state captured in that log entry — a new save entry is created for the restore action itself.

Dev Tools

The Dev Tools overlay can float anywhere on screen and is resizable. It does not need to be closed to continue building — many developers keep it docked at the bottom of the screen while they work. The four tabs serve different debugging needs (for the full reference, see Dev Tools & Debugger):

• Pulse — A real-time stream of every event that fires (block name, event type, timestamp). Clicking an entry shows the full event payload, which is useful for understanding what data is available inside action expressions.

• Console — Standard JavaScript console output. console.log() statements inside Data Functions appear here, making it easy to inspect transformation logic without opening the browser's native DevTools.

• Network — A log of every data source request, showing the request parameters sent to the integration and the full response body received. Red rows indicate errors. Click any row to inspect the full request/response cycle.

• State — A live, auto-updating tree of every variable and data source response in the current session. Values update in real time as you interact with the app in Interactive Canvas mode or via preview.

The Properties Panel

The Properties panel appears on the right side of the builder whenever a block is selected. It has two tabs, Content and Appearance. For blocks that expose events, Interactions is a section of the Content tab. See Configuring a Component.

Content Tab

The Content tab is context-sensitive — it renders a different set of fields depending on the selected block type:

• For a Table: a Data field to bind a data source, a column editor to add/remove/reorder/rename columns, a pagination settings section, and an inline search toggle.

• For a Form: a fields editor to add form inputs (Text Field, Number, Date Picker, Select, File Upload, etc.), a data source binding for pre-filling the form with existing record data, and submit behavior options.

• For a Chart: a data source selector, series configuration (field mappings for X-axis, Y-axis, color-by), and chart type selector.

• For a Text / Label: a rich text editor with expression bindings ({{variable}}) for dynamic content.

• For a Button: label text and icon selection.

Appearance Tab

The Appearance tab groups visual settings into logical sections:

• Colors — background color, text color, border color. Each picker offers a hex input, a theme token selector, and an opacity slider.

• Typography — font family (from the theme's font stack), size, weight, line-height, letter-spacing, text alignment.

• Layout — width, height, min/max dimensions, flex-direction, justify-content, align-items, gap, padding, margin. A visual box model diagram lets you click directly on margin and padding zones to edit them.

• Border & Radius — border width, style (solid/dashed/dotted), color, and border-radius (with per-corner control).

• Effects — box-shadow, opacity, and visibility condition (a boolean expression that determines whether the block renders at all at runtime).

• Custom CSS — a code field for one-off CSS class names (applied as HTML class attributes on the rendered element) and arbitrary inline style overrides, for edge cases not covered by the visual controls.

Interactions Section

The Interactions section is available at the bottom of the Properties panel for every block that exposes events. The full action library includes:

• Data operations — Trigger Data Source, Trigger Component Method (call a block's methods, such as resetting a form), Trigger Function, Run Script, Log to debugger.

• Navigation & routing — Go to URL, Go to Page, Navigate Back, Set URL Parameters, Open Share Dialog.

• Block controls — Control Modal, Control Drawer, Control Notification, Control Component Selection, Submit Form, and more.

• State management — Control Variable, Control Session Storage, Control Local Storage.

• Events — Emit Page Event, Send Custom Event, Send MQTT Event.

• User interactions & sharing — Show Snackbar, Copy to Clipboard, Export Data, Download File, and more.

• Mobile and integrations — device, build and integration actions that appear only in Mobile apps.

Conditions and delays aren't separate actions — they're options on every action. Use Only run when to skip an action when a condition is false, and Execution Strategy (Delay, Debounce, or Throttle) to control its timing.

Example: Table Row Select → Navigate to Detail Page

A common pattern is navigating to a detail page when a user selects a row in a table. This example is illustrative: it assumes an app-level variable selectedContact and a ContactDetail page already exist.

1. Select dataTable1 on the canvas.

2. In Interactions, click + (Add Interaction) and set the event to On Select Row.

3. Choose Control Variable and the Set Value operation. Target: selectedContact (an app-level variable). Value: {{ dataTable1.selectedRow }}.

4. Click + (Add Interaction) again and add another On Select Row interaction.

5. Choose Go to Page. Target page: ContactDetail. Pass query param: id = {{ dataTable1.selectedRow.id }}.

The actions run in sequence: the variable is set first, then navigation fires. The ContactDetail page receives the id parameter and can use it to load the correct record.

Tip: Expressions in action parameters. Any action field that accepts a value — message text, variable value, URL, condition — also accepts a dynamic expression using double-curly-brace syntax: {{ fetchRecordsContacts['data']['objects'][0]['name'] }}, {{ form1.data.email }}, {{ userContext.id }}. The expression editor provides autocomplete for all available identifiers in scope.