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 list or previous screen. If you have unsaved changes, the builder shows a warning: "It looks like you have unsaved changes on this page. Your changes will be lost if you leave this page without saving." Confirm or cancel before leaving.

• 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 — Opens a full-page preview of the app as the current logged-in user would see it. Useful for testing permissions and live data without publishing.

• Save — Saves all pending changes to the current page. The button is disabled (grayed out) when there is nothing new to save. If real-time collaboration is enabled for the app, Save is replaced by auto-save and the Save button disappears entirely.

• Publish — Opens the publish dialog where you can choose your publish target, add release notes, and deploy the app.

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

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: In the Hierarchy (layers) panel, hover over any component to reveal an add button ("+") next to its name. Clicking this button lets you add a child component inside that component's slot.

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 — Double-click a component's name in the Hierarchy to rename it directly without opening the properties panel.

• 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 — Components that have a visibility condition set to "Hidden" (or an expression that evaluates to hidden at design time) show an eye-off icon next to their name in the Hierarchy.

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

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

Right-clicking a component on the canvas (or using the kebab menu in the Hierarchy) reveals the component context menu with the following options:

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.

Saving

Clicking Save persists your changes to the current page draft. The Save button appears disabled (grayed out) when there are no pending changes — this is by design and indicates your current state is already saved. When real-time collaboration is enabled for the app, the Save button disappears entirely and changes are saved automatically in real time as you make them.

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. Before publishing, ensure you have saved all changes on all modified pages. The publish dialog lets you:

• Choose the target environment (if multiple environments are configured).

• Write a release note or change summary.

• Review which pages have unsaved changes before proceeding.

Preview

The Preview button opens a full-screen, read-only preview of your app as it would appear to the currently logged-in user. Unlike the Interactive Canvas toggle (which enables click-through within the builder), Preview opens a separate tab that runs the full app experience — including real data sources, events, and navigation — without affecting the published version.

Warning: Unsaved changes warning If you click the Back button with unsaved changes, the builder will prompt: "It looks like you have unsaved changes on this page. Your changes will be lost if you leave this page without saving." Choose to discard changes or return to save them first.