Skip to content

Using Components

Overview

Components are placed on the canvas of a Page Editor or Component Editor and then configured through the Properties and Styles views. This page covers the full workflow: finding available components, adding them to the canvas, selecting and configuring their properties, reordering them, and removing them.

What You Will Learn

  • Where to find available components in the Bellini UI
  • How to add a component to a page or component using the canvas or the Elements Tree
  • How to select a component and configure its properties
  • How to move and reorder components
  • How to remove a component

When To Use This

Use this when you are building or editing a page or custom component and need to add, configure, rearrange, or remove components on the canvas.

Finding Available Components

Bellini provides two places to browse available components, both in the left sidebar:

  • Components view — The dedicated component library, accessible from the left sidebar. It has a search bar at the top for quickly filtering by name, and four collapsible sections, each containing a flat list:
    • My Components — Global components created by your organization, available for use in any application.
    • Core Components — Bellini's 27 pre-built UI components.
    • Layouts — Bellini's 9 structural layout components.
    • Elements — Standard HTML elements that can be placed directly on the canvas.
  • Apps view — Open your application, then expand the Components folder to browse app-scoped components defined within the current app.

For an overview of what each category contains, see Built-in Components and Custom Components.

Adding a Component

There are two ways to add a component to the current page or component: drag-and-drop from the canvas, or the component picker in the Elements Tree.

Drag and Drop onto the Canvas

Drag any item from the Components view (or from the Apps view Components folder) directly onto the canvas. While dragging, Bellini highlights the element under the cursor and shows directional arrows to indicate where the dropped 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

Release to insert the component. It renders on the canvas immediately.

Add via the Elements Tree

  1. In the Elements Tree toolbar, click + to open the component picker.
  2. Browse the list or type to search by name.
  3. Press Enter or double-click an item to insert it.

By default, the component is inserted inside the currently selected element. Hold a modifier key when inserting to change the placement:

Mode Key Behaviour
Add To (none — default) Inserts inside the currently selected element
Add After Shift Inserts after the currently selected element
Replace Ctrl Replaces the currently selected element

Click the cog icon in the bottom-right of the picker to configure which categories are shown and whether the list is sorted alphabetically or by category.

Selecting a Component

Select a component by clicking it in the canvas or clicking its node in the Elements Tree. Either action:

  • Highlights the element in both the canvas and the Elements Tree
  • Populates the Properties and Styles views in the right sidebar with the selected element's settings

Custom components are selected as a whole — you cannot select individual elements inside a component from the canvas. To edit a custom component's internals, right-click it in the Elements Tree and choose Edit Component.

When hovering over a selectable element on the canvas, a mini-toolbar appears with quick actions for the element:

Button Description
Drag Click and drag to move the element
Duplicate Duplicates the element in place
Delete Removes the element
Select Parent Moves selection to the element's parent
Edit Content Opens the Edit Content dialog for elements that support inner content

You can also select multiple elements at once in the Elements Tree. Bulk operations — Delete, Copy, Cut, Wrap, and Extract as Component — all apply to the full selection. Multi-selection is not available on the canvas.

Configuring Component Properties

With a component selected, the Properties view in the right sidebar displays all configurable properties for that component. Properties vary by component type — for example, a Table component has a Data property for its data source, while a Text Input has a Label, Placeholder, and Value property, and a Button has a Click event handler.

Properties fall into two types:

Value properties hold data — text, numbers, booleans, objects, or arrays. Each property shows an expression icon that opens the Expression Editor. Properties that accept a direct value also show an edit icon (paper and pen). You can set these in two ways:

  • Direct value — Click the edit icon next to a property to open its editor — a text input, dropdown, or configuration dialog depending on the property type. Use this for properties that do not change at runtime, such as a Text Input's Label or Placeholder text.
  • Expression — Click the expression icon next to a property to open the Expression Editor and write a JavaScript expression. Use this for properties whose value comes from a declaration or an API service — for example, binding a Text Input's Value to a form declaration, or setting a Table's Data to the result of an API call. The expression is evaluated in the context of the page or component and has access to all declarations and injected API services.

Function properties are callback bindings — for example, a Button's Click, a Text Input's On Value Change, or a custom component's exported function that loads data or computes a value.

Clicking the edit icon for a function property opens a dropdown listing all functions declared on the current page or component. Selecting a function automatically generates the correct expression, including any required parameters. You can also click the expression icon to write the binding expression by hand if you need to pass custom arguments or call the function conditionally.

For configuring exported properties and function bindings on custom components specifically, see Exported Properties and Functions and Managing Events.

For connecting properties to live data from declarations or API services, see Data Binding.

Styling a Component

With a component selected, the Styles view in the right sidebar provides styling controls for that element. You can:

  • Apply CSS class names to the element
  • Set inline styles
  • Adjust layout and spacing properties visually

All built-in components also respect the application's active theme, which controls default colors, typography, and spacing globally. For more, see Component Styling.

Moving and Reordering Components

You can rearrange components in two ways:

  • Drag on the canvas — Hover over a component until the mini-toolbar appears, then click and drag the Drag handle to a new position. Directional arrows indicate where the component will be dropped.
  • Elements Tree toolbar arrows — Select the component in the Elements Tree and use the directional arrow buttons to move it one step at a time: up or down within its parent, out to its grandparent (left arrow), or into the nearest eligible sibling (right arrow).

You can also drag nodes directly in the Elements Tree. A placement indicator shows where the element will land.

Copying and Duplicating Components

You can duplicate or copy components using the canvas mini-toolbar or the Elements Tree context menu.

Duplicate in place — inserts an identical copy immediately after the original within the same parent:

  • Click Duplicate in the element's mini-toolbar on the canvas, or
  • Right-click the element in the Elements Tree and choose Duplicate.

Cut, Copy, and Paste — right-click an element (or a multi-selection) in the Elements Tree:

Action Description
Cut Removes the element(s) and places them on the clipboard
Copy Copies the element(s) to the clipboard without removing them
Paste Inserts clipboard contents at the selected node
Paste HTML Parses raw HTML from the clipboard and inserts it at the selected node

These actions are not available for child pages or the root page node.

Refactoring Components

The Elements Tree context menu provides tools to restructure your page without rebuilding it manually.

Wrap In — wraps the selected element(s) in a new container. Available container types:

  • Div block — a plain <div>
  • Link block — an <a> element
  • Horizontal Box — a Horizontal Box layout component
  • Vertical Box — a Vertical Box layout component

Extract as Component — extracts the selected element(s) into a new reusable component. The selection is replaced by an instance of the newly created component. Available when all selected elements share the same parent and are not child pages or the root page node.

Removing a Component

Select the component and use any of these methods:

  • Click Delete in the Elements Tree toolbar.
  • Click Delete in the element's mini-toolbar on the canvas.
  • Right-click the element in the Elements Tree and choose Delete.
  • Press the Delete or Backspace key while the element is selected.

Deletions can be undone with Undo (Ctrl+Z / Cmd+Z).

Helpful Resources