Skip to content

Canvas

Overview

The canvas is the central area of the Page Editor. It renders your page as a live preview and serves as the primary design surface — you can select elements, rearrange components by dragging and dropping, and interact with the UI directly to test it.

What You Will Learn

  • How to resize and interact with the canvas
  • How to select elements and use the element mini-toolbar
  • How to drag and drop components onto the canvas
  • How to use breadcrumbs to navigate the element hierarchy

When To Use This

Use the canvas when you want to visually design a page — selecting, repositioning, or deleting elements, dragging components from the sidebar, or testing live interactions before deployment.

Canvas Area

The canvas occupies the centre of the Page Editor. It displays a live rendering of your page — what you see in the canvas reflects how the page will look at runtime.

You can adjust the canvas dimensions by dragging its left, right, or bottom edges. To reset to the default size, click Reset Canvas Size in the toolbar. For more precise control, use the device toolbar to set an exact width and height.

To test interactions (such as clicking buttons or filling in form inputs), disable element selection by toggling off Toggle Selection in the toolbar. This lets you interact with the live UI without accidentally selecting elements. Re-enable selection when you want to return to editing.

Selecting Elements

When Toggle Selection is enabled, hovering over an element in the canvas highlights it and displays its name. Clicking the element selects it.

Selecting an element in the canvas:

  • Highlights the corresponding node in the Elements Tree
  • Populates the Properties and Styles views in the right sidebar
  • Updates the breadcrumbs below the canvas

Custom components are selected as a whole — you cannot select individual elements inside a component from the canvas.

Element Mini-Toolbar

When you hover over a selectable element, a mini-toolbar appears above the highlight. Each button acts on the highlighted element:

Button Description
Drag Click and drag to move the element to a different position or parent
Duplicate Duplicates the element in place within the same parent
Delete Removes the element (can be undone with Undo)
Select Parent Moves the selection up to the element's parent
Edit Content Opens the Edit Content dialog for elements that support inner content

The mini-toolbar only appears for elements that are not read-only. Read-only elements (such as the root page element) display the highlight but no toolbar.

Edit Content Dialog

The Edit Content action is available for elements that can contain inner content, such as div, span, and h1 tags. It is not shown for components, images, audio, video, child pages, or the root page element.

The dialog contains:

Setting Description
Text editor The content to render inside the element
Type Text renders the content as plain text; HTML renders it as markup
Evaluate When checked, the content is evaluated as a JavaScript expression. A side panel lists the available declarations. The expression must return a string — for example, Price: $ctrl.item.price

Click Save to apply the content to the element.

Dragging and Dropping Components

You can drag components onto the canvas from two sources:

  • The Apps view — expand your app's Components folder in the left sidebar
  • The Components view — the dedicated Components panel in the left sidebar

While dragging a component over the canvas, Bellini highlights the element currently under the cursor and displays directional arrows to indicate where the component will be inserted:

Arrow indicator Insertion position
Up / Left arrow Inserted before the highlighted element
Down / Right arrow Inserted after the highlighted element
No arrow Inserted inside the highlighted element

If the highlighted element cannot accept children and no arrow is shown, the component is inserted after it.

When you release the component, it is rendered immediately in the canvas — no manual reload required.

The breadcrumbs bar sits below the canvas and shows the hierarchy path from the root element down to the currently selected element. Click any item in the breadcrumb path to select that element directly.

Helpful Resources