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 (save, 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.

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:

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

A horizontal tab row lists all pages in the current app. The active page is underlined. Click any tab to switch to that page — the canvas and Hierarchy panel update immediately.

Note: Adding a new page from the page switcher.

1. Click the + button at the end of the page tab row: A small dropdown menu appears with two options: Page and Module.

2. Choose "Page": A new untitled page is created and its tab becomes active. The canvas shows an empty page with just the Body root block.

3. Rename the page: Double-click the new page tab, type a name, and press Enter. The page name is used as the route segment in the app's URL (for Web Apps).

Save

Clicking Save (or pressing Cmd/Ctrl + S) writes the current working copy to the server. A "Successfully updated" toast confirms the save. Every save creates an entry in the Saved Versions log visible in the left rail's Saved Versions panel.

When real-time collaboration is enabled for the workspace, saving is automatic and continuous — the Save button is replaced by an auto-save indicator showing the collaborators currently in the builder.

Preview and Publish

Preview Application opens the current saved working copy in a new browser tab with live data. Publish opens a confirmation dialog and creates a new numbered version (V1, V2, …) at the app's public URL. The top bar's publish status badge reads Not Published before the first publish, and Vn Published (e.g., V3 Published) thereafter.

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, with the root Body block at the top. 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

• A lock icon if the block is locked against accidental edits

Right-clicking any node opens the block actions context menu with options: Duplicate, Delete, Copy, Paste Before / After / Inside, Wrap in Container, and Move to Page (for blocks that can be promoted to a reusable area).

Data Panel

The Data panel is scoped: it shows resources for the current page by default. A toggle at the top switches it to App Level — where you can manage data sources and variables shared across all pages. Resources defined at app level are accessible in any block's binding expressions using the standard {{resourceName}} syntax.

Saved Versions Panel

The Saved Versions panel logs every explicit save as a series of change entries. 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 to 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:

• 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 is organized into three tabs: Content, Appearance, and Interactions (the last one surfaces in a section at the bottom of the panel rather than a separate tab in some block types).

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:

• Navigation actions — Navigate to Page, Navigate Back, Open URL (external), Open / Close Modal, Open / Close Drawer.

• Data actions — Trigger Data Source (run a fetch or write operation), Reset Data Source (clear its cached response).

• State actions — Set Variable, Reset Variable.

• UI feedback actions — Show Snackbar, Show Notification Banner, Copy to Clipboard.

• Component actions — Scroll to Block, Set Focus, Reset Form, Submit Form.

• Control flow — Conditional Branch (run different action chains based on an expression), Delay (insert a wait between actions).

• Custom code — Run JavaScript (execute an arbitrary expression, useful for side-effects not covered by other action types).

🔗 Example: Table Row Click → Navigate to Detail Page

A common pattern is navigating to a detail page when a user clicks a row in a table:

1. Select table1 on the canvas.

2. In Interactions → On Row Click, click + Add Action.

3. Choose Set Variable. Target: selectedContact (an app-level variable). Value: {{table1.selectedRow}}.

4. Click + Add Action again on the same On Row Click event.

5. Choose Navigate to Page. Target page: ContactDetail. Pass query param: id = {{table1.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: {{dataSource1.response[0].name}}, {{form1.fields.email}}, {{currentUser.id}}. The expression editor provides autocomplete for all available identifiers in scope.

Frequently Asked Questions

Where can I find all available keyboard shortcuts?

The core builder shortcuts are documented in the Keyboard Shortcuts table on this page. The most frequently used are: Cmd/Ctrl + S (Save), Cmd/Ctrl + Z (Undo), Cmd/Ctrl + Shift + Z (Redo), Cmd/Ctrl + Shift + E (Toggle Interactive Canvas mode), [ (toggle left rail), and ] (toggle Properties panel).

How do I restore the builder layout if I accidentally close a panel?

You can reopen any closed panel using its keyboard shortcut or by clicking its icon in the left rail. Press [ to show the left rail if it is hidden, and ] to restore the Properties panel. There is no global "reset layout" button — each panel is toggled independently, so you can restore them one at a time.

Can I use the builder across multiple monitors?

The builder is a browser-based application that you can open in any browser window on any monitor. The Dev Tools overlay (Alt + Shift + D) can be dragged and resized independently, making it practical to keep it on a secondary screen while the main builder window sits on your primary display. Full multi-window layout separation is not natively supported — the builder, canvas, and panels always render within a single browser window.

Does the builder autosave my work?

When real-time collaboration is enabled for your workspace, the builder autosaves continuously and the Save button is replaced by an auto-save indicator. In workspaces without collaboration enabled, saving is manual — use Cmd/Ctrl + S or click the Save button. Unsaved changes are not preserved if the browser tab is closed, so save frequently while building.

Can I access the builder on a mobile device or tablet?

The builder is designed for desktop use and requires a keyboard and mouse for the best experience. While it may be technically accessible in a tablet's browser, the panel layout, drag-and-drop interactions, and keyboard shortcuts are not optimized for touch input. To review your app on mobile, use the Preview feature — which opens the published working copy on your device — rather than trying to build from a mobile browser.