Canvas

The app canvas is the main area of the app editor. It displays the app components and allows you to configure them. You can move and resize components and lock them to prevent them from being moved or resized by another component.

The apps are defined by two layouts: Mobile and Desktop. The layout can be toggled from the toolbar. Layouts are independent and can be configured separately.

Component selection

Components can be selected by clicking on them. The selected component will be highlighted with a indigo border. When hovering a component, a blue border will be displayed around the component.

You can also select multiple components by clicking on the Shift key and clicking on the components you want to select.

Positioning

Components can be positioned by dragging and dropping them on the canvas. You can also move components by clicking on the move handler on the top-right corner of the component.

Resizing

Components can be resized by dragging the resize handler on the top-right corner of the component.

Lock the position of a component

A locked component can't be moved or resized by another component. It can still be moved or resized by the user.

You can lock a component by clicking on the lock button on the top-right corner of the component.

tip

Moving a component will move all unlocked components on its way.

Expand a component

Components can be expanded by clicking on the expand button on the top-right corner of the component. It will try to expand the component to take as much width as possible and at most 12 columns of height, taking into account the other components on the canvas.

Nesting components

Some components can be nested inside other components. For example, a Button component can be nested inside a Container component.

Shortcuts

Shortcut	Description
`Ctrl + C`	Copy selected components
`Ctrl + V`	Paste copied components
`Ctrl + X`	Cut selected components
'Arrow down'	If no component is selected, select the first component of the canvas. If a container component is selected, select the first component inside the container.
'Arrow up'	If the selected component is inside a container, select the parent. Otherwise, clear selection.
'Arrow left'	Select the next available component from top to bottom and left to right. If the selected component has a parent with multiple subgrids and is the last one of the current subgrid, select the first component of the next subgrid.
'Arrow right'	Select the previous available component from bottom to top and right to left. If the selected component has a parent with multiple subgrids and is the first one of the current subgrid, select the last component of the previous subgrid.