Skip to content

Component Editor

Overview

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

Open the Component Editor by double-clicking a component in the Components view (global components) or under your app's Components folder in the Apps view (app components).

What You Will Learn

  • How the Component 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

When To Use This

Use the Component Editor when you are building or modifying a custom component's UI — adding elements, configuring properties and styles, defining component state and exported declarations, or testing the layout at different screen sizes.

Editor Layout

The Component Editor has four main areas:

Area Location Purpose
Toolbar Top of the editor Controls for canvas display and device simulation
Canvas Centre Live rendering of the component; 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 component 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 component 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 component was last saved

Device Toolbar

When enabled, the device toolbar appears within the component 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

Right Panel

The right panel contains two collapsible accordion sections:

  • Elements Tree (top) — displays the full hierarchy of UI elements in the component, including components, HTML elements, and layout components. Use it to select, add, remove, and reorder elements.
  • Declarations (bottom) — lists the named properties, arrays, functions, and injected services available in the component. Use it to define state and logic, and to configure which declarations are exported.

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

Helpful Resources