Skip to content

Custom Components

Overview

Custom components are reusable UI elements that you build yourself using the Component Editor. Once created, they can be placed on any page or inside another component — just like built-in components — and configured through the Properties view. This makes them the primary mechanism for standardizing UI patterns, encapsulating logic, and reducing duplication across your applications.

What You Will Learn

  • What custom components are and how they differ from built-in components
  • The difference between global and app components, and where each is managed
  • What resources a custom component can contain
  • How the Component Editor is structured
  • How exported properties and functions make components configurable from the outside

When To Use This

Use custom components when you need to encapsulate a repeatable UI pattern into a self-contained, reusable element. Specific scenarios include:

  • You need the same UI structure (e.g., a card, a form section, a data panel) on multiple pages or applications
  • You want to isolate the logic and styling of a UI element from the pages that use it
  • No built-in component covers your design or interaction requirements
  • You want to expose specific properties or functions for consumers to configure via data binding

Custom Component Scope

Every custom component is either a global component or an app component. The scope determines where the component can be used and where it is managed in the Bellini UI.

Scope Where it can be used Where it is managed
Global component Any application in the organization Components view → My Components
App component Only within the application it belongs to Apps view → application → Components

Global components also support additional resources — APIs and sub-components — that are not available on app components (see Component Structure below).

You select the scope when creating a component. For step-by-step instructions, see Creating Components.

Component Structure

A custom component is a self-contained resource that can include the following:

Resource Available on Description
Scripts App and global Custom JavaScript loaded when the component loads. Can be a URL or a script file.
Stylesheets App and global Custom CSS loaded when the component loads. Can be a URL or a CSS file.
Assets App and global Static files (images, icons, fonts, etc.) used within the component.
APIs Global only REST or GraphQL APIs consumed by the component. Bellini generates an API service with one function per operation, which can then be injected into the component's declarations. For app components, it has access to the app's API services.
Components Global only Sub-components scoped to this global component, used only within it.

Component Editor

Custom components are edited in the Component Editor, which shares the same layout as the Page Editor. It is composed of three main areas:

  • Canvas — The visual design surface where you drag and drop UI elements and built-in components to build the component's layout.
  • Elements Tree — A hierarchical view of all DOM elements (HTML elements and nested components) on the canvas.
  • Declarations — The named properties, arrays, functions, services, and APIs used by the component.

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

For a full reference of the editor layout, toolbar, and panels, see Component Editor.

Exported Properties and Functions

Properties and functions defined in a component's Declarations can be marked as exported. Exported items are exposed to wherever the component is used — they appear in the Properties view and can be connected to declarations or expressions via data binding (one-way or two-way).

This is what makes custom components configurable and reusable in different contexts without modifying the component itself. For details, see Exported Properties and Functions.

In This Section

Page Description
Creating Components Step-by-step instructions for creating a new global or app component.
Modal Components How Modal Components and Wizard Modals work and how to use them.
Component Editor Reference for the Component Editor — canvas, elements tree, declarations, and toolbar.
Exported Properties and Functions How to configure exported properties and functions to make components configurable from the outside.
Managing Events How to define, emit, and handle custom events on a component.
Documenting Components How to add documentation to a component so it is discoverable and understandable by other developers.

Helpful Resources

  • Components — Overview of all component types in Bellini: built-in, custom, and layout.
  • Built-in Components — The pre-built UI elements Bellini provides out of the box.
  • Data Binding — How to connect exported properties to declarations and expressions.
  • Pages — How pages and the Page Editor work, where custom components are used.