Skip to main content

Canvas

Canvas is the center area of the ToolJet app builder where the application is built. You arrange the components by dragging them from the Components library(right-sidebar).

App Builder: Canvas

info
  • The Canvas height and width can be adjusted from the Global Settings.
  • When the Pages drawer on the left is opened or pinned, the canvas becomes horizontally scrollable.
App Builder: Canvas

Arrange Components​

All the components are fully interactive in editor mode - to prevent interaction you can click and hold the Component Handle to change component's position.

App Builder: Canvas

Resize Components​

Components on the canvas can be resized from the edges.

You can precisely set the position of selected components using keyboard arrow keys after clicking the component handle.

App Builder: Canvas

Group Components​

ToolJet comes with flexible components to group other components together, such as Container and Form. When you drag and drop components in containers/forms they create a group of nested components. All components can be nested in this way.

Hide or Disable Components​

Hide or Disable a component by setting its Visibility or Disabled property to true. Click on the component handle to open config inspector on right side. These values can also evaluate to true based on a truthy value. For example, you can use the property of one component to toggle the Visibility property of another component dynamically, you just need to write a conditional statement.

For example: We want to disable a button when a checkbox is checked so we can simple use {{components.checkbox1.value}} in Disable property of the button. {{components.checkbox1.value}} evaluates to true when the checkbox is checked, and false when unchecked.

App Builder: Canvas

Clone Components​

You can clone existing components on the canvas by cmd/ctrl + d. Check other Keyboard Shortcuts.