Skip to content

Page Editor

Overview

The Page Editor is where you design and build the UI of a Bellini page. It combines a live visual canvas with structural and logic panels, giving you a complete view of your page's appearance, component hierarchy, and data declarations in one place.

Open the Page Editor by double-clicking a page in the Apps view.

What You Will Learn

  • How the Page Editor is laid out and what each area does
  • How to navigate the canvas, Elements Tree, and Declarations panels
  • Where to find the editor toolbar and breadcrumbs

When To Use This

Use the Page Editor when you are building or modifying a page's UI — adding components, configuring their properties and styles, defining page state and logic, or testing the page layout at different screen sizes.

Editor Layout

The Page Editor has four main areas:

Area Location Purpose
Toolbar Top of the editor Controls for canvas display, device simulation, and view options
Canvas Centre Live rendering of the page; drag-and-drop design surface
Right panel Right side Elements Tree and Declarations panels, stacked in an accordion
Breadcrumbs Below the canvas Shows the hierarchy path of the currently selected element

The boundary between the canvas and the right panel can be dragged to resize both areas. The panel can also be fully collapsed by clicking the > button on the separator, and reopened with the < button.

Toolbar

The toolbar sits above the canvas and provides quick access to editor controls.

Button Description
Reload Reloads the page rendering in the canvas
Toggle Selection Enables or disables element selection by clicking in the canvas
Canvas Background Switches the canvas background between Default, Light, and Dark
Toggle Fullscreen Expands the editor to fill the screen, hiding sidebars and other panels
Toggle Layout Borders Shows or hides visible borders around layout components, useful for understanding page structure
Toggle Device Toolbar Shows or hides the device simulation toolbar
Reset Canvas Size Returns the canvas to its default dimensions
Last saved Label showing when the page was last saved
... Overflow menu with Themes and View As options

Device Toolbar

When enabled, the device toolbar appears within the page editor toolbar and lets you simulate different screen sizes.

Control Description
Device dropdown Preset device profiles (e.g. Responsive, iPhone SE). Equivalent to browser DevTools device picker
Width × Height inputs Manually set the canvas width and height in pixels
Rotate Toggle between portrait and landscape orientation

Themes Menu

The Themes submenu in the ... menu lets you temporarily preview the page with any of the application's available themes. This is quicker than switching the active theme in Application Configuration.

View As Menu

The View As submenu lets you preview the page from a specific user's perspective without leaving the editor.

Option Description
Editor Default view — no authentication simulation
Unauthenticated User Previews the page as a visitor with no active session
Mocked users Each user configured in the app's Authentication settings appears as a selectable option

Right Panel

The right panel contains two collapsible accordion sections:

  • Elements Tree (top) — displays the full hierarchy of UI elements on the page, including components, HTML elements, layout components, and nested pages. Use it to select, add, remove, and reorder elements.
  • Declarations (bottom) — lists the named properties, arrays, functions, and injected services available on the page. Use it to define state and logic for the page.

Each section has its own toolbar. The divider between the two sections can be dragged to adjust their relative heights.

Helpful Resources