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.
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
Section titled “Component selection”Components can be selected by clicking on them. The selected component will be highlighted with an indigo border. When hovering over a component, a blue border will be displayed around the component.
You can also select multiple components by holding the Shift key and clicking on the components you want to select.
Positioning
Section titled “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
Section titled “Resizing”Components can be resized by dragging the resize handler on the top-right corner of the component.
Lock the position of a component
Section titled “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.
Expand a component
Section titled “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
Section titled “Nesting components”Some components can be nested inside other components. For example, a Button component can be nested inside a Container component.
Shortcuts
Section titled “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. |
Selected component actions
Section titled “Selected component actions”All components have the following actions:
- Expand
- Lock
- Move handle
Special actions
Section titled “Special actions”Text component
Section titled “Text component”Edit text directly on the canvas. Either click on the Pen icon or double-click on the text.
Conditional and invisible tabs components
Section titled “Conditional and invisible tabs components”Debug a tab by clicking on the arrow-down button on the top-right corner of the component.