View canvas

See your app

The view canvas is a what-you-see-is-what-you-get (WYSIWYG) representation of your app's user interface.

This section the UI contains the following, in order from top to bottom

  • View canvas toolbar – gives access to various tools and functionalities related to the view canvas.

  • Header configuration – determines how the native header element rendered at the top of each page on mobile functions.

  • View canvas itself

  • Navigation configuration – determines the navigation style for your app (e.g. native tabs or fullscreen), the initial page structure and so on

View canvas toolbar

The view canvas toolbar is located below the global toolbar.

Change canvas size and active device target

At the left, you have a dropdown to change the canvas size and active device target.

Your selection affects the view canvas width, as well as changing the default values for relevant system variables used in the WYSIWYG rendering.

If you are using advanced style formulas to e.g. render different styles based on desktop vs. mobile, changing the device target via the dropdown allows you to preview how your app looks, as well as make edits in the right context.

Change zoom level

To change zoom level of the canvas, click on the zoom dropdown (by default showing 100%) on the view canvas toolbar.

View-Variables switch

The View – Variables switch allows you to change between the variable editor and the view canvas.

Header configuration

The blue element at the top of the view canvas allows you to configure both the styles and content of the header bar, located by default at the top of each page.

Importantly, the header configuration is not yet WYSIWYG, so you have to have preview your changes via one of the available preview apps to see how they take effect.

You can read more in the header configuration guide.

View canvas

The view canvas shows a WYSIWYG representation of your current page's user interface. To change the active page or create a new one, use the dropdown in the left side of the global toolbar.

Adding components

You can add new view components to the view canvas in two ways:

Note that you can drag-and-drop components directly to the layout tree also.

Duplicating components

You can duplicate components by clicking the duplicate button that appears in the context toolbar when you have a component selected.

Copy-pasting components

You can also copy-paste components with CMD+C and CMD+V (CTRL+C and CTRL+V in Windows).

If you have a container selected, the component will be pasted inside that container (unless you have just copied the same container). Otherwise, the component will be pasted alongside the selected component.

Selecting components

To select a component, click on it either via the canvas or the layout tree. This gives you access to its properties and styles.

You can read more in the component properties panel and component style panel guides

Moving components around

You can move components on the canvas around by grabbing them with your mouse and dragging them to the desired position. A highlighted line will show where the component will be placed after you release your mouse.

Alternatively, you can use the layout tree to rearrange components, similarly via drag-and-drop.

Deleting components

To delete a component, click the x icon in the blue component toolbar.

Enter isolation mode

You can enter isolation mode via the blue component toolbar that appears when you have a composite component selected, or by double-clicking on a composite component.