Page Builder Canvas & Component Arrangement

Canvas Overview

The UnifyApps page builder is divided into four distinct areas that work together to let you compose, configure, and test your application pages. Understanding what each area does — and how they interact — is the foundation for building pages efficiently.

Tip: Panel toggle shortcuts Press [ to toggle the left panel open or closed. Press ] to toggle the right properties panel. These keyboard shortcuts let you reclaim canvas space when you need a wider view of your layout.

Top Bar Controls

The dark top bar spans the full width of the builder and contains all app-level controls. From left to right:

Left side of the top bar

• Back button — Returns you to the app's detail page.

• App name & publish status — Displays the current application name alongside its publish status indicator (draft, published, etc.).

• App variant switcher — Switch between different variants of the same app (for example, different branded versions or feature-flag variants).

• Device switcher — Toggle between Desktop, Tablet, and Mobile views directly from the top bar. See Responsive Design for the full device list.

• Page switcher — Jump to a different page within the same application without leaving the builder.

Right side of the top bar

• Interactive Canvas toggle — Switches the canvas between "edit mode" (where clicks select components) and "interactive mode" (where the canvas behaves like the live app, allowing you to test interactions). Shortcut: Cmd/Ctrl + Shift + E.

• Collaborator avatars — Shows the profile pictures of other team members currently viewing or editing this page. Hover an avatar to see the person's name.

• Page Score — Opens a quality score summary for the current page based on accessibility, performance hints, and best-practice checks.

• Preview — A play icon (labelled Preview Application) that opens your app in a new browser tab as the current logged-in user would see it. Useful for testing permissions and live data without publishing.

• Save — Saves your changes. It appears when real-time collaboration is off, and is disabled when there is nothing to save.

• Publish — Opens the publish dialog where you can tag the version, add version notes, review what changed, and deploy the app.

• Right panel toggle — Icon button to collapse or expand the right properties panel (same as pressing ]).

With real-time collaboration on, the builder saves every edit automatically and shows no Save button. Otherwise, use Save before you Publish.

Note: Undo and Redo Use Cmd/Ctrl + Z to undo your last action and Cmd/Ctrl + Shift + Z (or Ctrl + Y on Windows) to redo it. Both are available at any time in the builder without needing to click into a specific panel.

Left Icon Rail

The left rail is a narrow column of icon buttons. Each icon opens a full-height panel that slides in over (or next to) the canvas. Only one panel can be open at a time — opening a new panel closes the previous one automatically.

Adding Components

There are three ways to add a component to a page:

1. From the Design panel: Open the Design panel from the left rail. Browse or search for the component you want. You can filter the list by category: All, Built-in, Template, or Custom. Drag the component thumbnail from the panel onto the canvas, or click it to add it to the currently selected container.

2. From an empty container placeholder: When a container component (like a Section or Flex Box) is empty, it shows a "+" placeholder in the center. Click the placeholder to open a component picker specific to that container's slot.

3. From the Hierarchy panel: The tree shows Add Component rows inside containers. Click the one under the parent you want; the component picker opens and adds the new component there.

Note: Theme-controlled visibility Your app's active theme can hide or rename components in the Design panel. If a component you expect to see is missing, check whether the theme has marked it as hidden or has given it a different display name.

Selecting and Moving Components

Interacting with components on the canvas follows a consistent selection and drag model.

Selecting a component

Click any component on the canvas to select it. When selected, the component displays:

• A label pill at the top of the component showing its type and name.

• A dark drag handle on the pill — this is the control you grab to move the component.

• A blue selection outline around the component boundary.

• The right properties panel updates immediately to show the selected component's settings.

Moving and reparenting

To move a component to a new position or container, grab its dark pill handle and drag it. As you drag, valid drop targets highlight to show where the component can be placed. Release over a target to drop and reparent the component. Dropping a component into a different container automatically makes it a child of that container.

Warning: Reparenting and expressions When you move a component into a different container, any relative data references (such as expressions that reference a parent container's data) may need to be updated. Check any expression bindings on the moved component after reparenting.

Hierarchy Panel (Layers Tree)

The Hierarchy panel gives you a structural view of every component on the page, nested to reflect the actual component tree. It is especially useful for selecting components that are visually hidden, deeply nested, or obscured by other components on the canvas.

Key features

• Expand/collapse — Click the arrow next to any component to expand or collapse its children.

• Rename inline — Open a component row's menu in the Hierarchy and choose Rename to edit the name inline.

• Search — Press Cmd/Ctrl + F while the Hierarchy panel is open to search for a component by name. The tree filters to match results and highlights them.

• Hidden component indicator — A component that isn't visible right now — its Visibility is set to Hidden, or its visibility condition evaluates to false against the current data — shows an eye-off icon next to its name.

• Drag reorder — Drag component rows within the Hierarchy to reorder or reparent them, just like dragging on the canvas.

• Dependencies — With a component selected, the bottom of the panel shows its dependencies.

Copy, Cut, and Paste

Standard clipboard operations work on selected components:

Tip: Copy & paste styles across components Use Copy Styles (Shift + Cmd/Ctrl + C) on one component, then select a different component and use Paste Styles (Shift + Cmd/Ctrl + V) to apply the exact same appearance settings — spacing, colors, typography, effects — without touching the content or behavior.

Component Context Menu

Components have an actions menu in three places: when you right-click a component on the canvas, in the menu on a Hierarchy row, and in the properties panel header. The options differ by where you open the menu:

Keyboard Shortcuts Summary

All builder keyboard shortcuts

Saving and Publishing

Saving and publishing are two separate steps with distinct effects on the app's availability to end users.

Autosave

With real-time collaboration on, the builder saves every edit automatically and there is no Save button. Each auto-save creates an entry in the Saved Versions panel, so you can restore an earlier state. With real-time collaboration off, click Save to save your changes before you publish.

Publishing

Clicking Publish opens the publish dialog. Publishing makes the current version of your app available to end users at the app's published URL. The publish dialog lets you:

• Optionally Tag this version.

• Add Version notes.

• Review the Changes since last published summary (with Review all changes).

• Copy the Application URL.

Preview

The Preview icon opens your app in a new browser tab as it would appear to the currently logged-in user. Unlike the Interactive Canvas toggle (which enables click-through within the builder), Preview runs the full app experience — real data sources, events, and navigation. Actions you take in Preview, such as submitting a form that creates a record, change real data. Preview doesn't affect the published version.

For a panel-by-panel walkthrough of the builder, see Builder Tour. For preview, versions and rollback, see Preview & Publish. For the debugger window, see Dev Tools & Debugger.