Skip to content

Bellini Concepts

Overview

Bellini is a low-code application development tool (LCAD) that empowers frontend developers to build custom web and mobile apps, dashboards, and reports by dropping UI components onto a canvas and binding them to data from REST or GraphQL APIs. Understanding Bellini's core concepts — applications, components, pages, services, and deployment — gives you the mental model needed to work efficiently across every part of the platform. This page introduces each concept and explains how they relate to one another.

Bellini is a multi-tenant platform: each user belongs to an organization, which contains all the applications and components being developed by that team.

What You Will Learn

  • What an Application is and how it is structured in Bellini
  • How APIs are configured and consumed in Bellini
  • What Pages and the Page Editor are and how they work
  • What Components are, the difference between global and app components, and how the Component Editor works
  • How Authentication is configured for Bellini applications
  • How Deployment, Export, and Source Control work
  • What Themes are and how they apply to applications
  • What the Lonti Marketplace is and what can be imported from it
  • What Declarations, Expressions, and Functions are and how they drive page logic
  • How Data Binding connects declarations and API services to component properties
  • What AI Capabilities are available in Bellini
  • What Views and Editors are available in the Bellini UI

Applications

An application in Bellini is a resource that can be deployed as a web application, a mobile application, or both. Applications are the primary deliverable you build in Bellini — they contain everything needed to run a complete user-facing product.

Applications are managed in the Apps view. For a deeper dive, see Applications.

Application Structure

Every Bellini application is composed of the following resources (see Application Structure for full details):

  • Pages — The screens accessible at a configured URL path (e.g., /home) that display the UI of the application.
  • Components — Custom (user-made) components scoped to this application and used within its pages.
  • APIs — The REST and GraphQL APIs consumed by the application. See APIs below.
  • Services — Custom services created by the user. A service is an object containing functions and properties that can be reused throughout the application. Services can be configured as singletons.
  • Scripts, Stylesheets, and Assets — Custom JavaScript, CSS, and static files associated with the application.

APIs

Connecting to external data is central to building applications in Bellini. An API in Bellini is a REST or GraphQL endpoint that your application consumes. Rather than writing fetch logic manually, you configure the API once and Bellini generates a typed service you can use anywhere in your pages and components.

1. Configure the API — Add an API to your application or component by providing either a schema file (OpenAPI for REST, GraphQL schema for GraphQL) or a URL pointing to the schema. Bellini reads the schema and understands the available operations.

2. Bellini generates an API service — For each operation in the schema, Bellini automatically generates a corresponding function on an API service. For example, a GET /users endpoint becomes a callable getUsers() function.

3. Inject the service — API services must be injected into the page or component where you want to use them. This is done through the UI in the Declarations panel. Once injected, the service and all its functions are available in expressions, functions, and data bindings within that page or component.

4. Call the functions — You can call API service functions in expressions (e.g., to bind a table's data directly to a fetch call), in custom functions (e.g., to handle a form submission), or assign them to declarations.

Authentication

For APIs built with Martini that use Lonti authentication, Bellini handles the entire authentication flow automatically — no additional configuration is needed. For other APIs, authentication can be configured as part of the API setup (e.g., headers, tokens). For more, see REST APIs and GraphQL APIs.

Pages and the Page Editor

A page is a screen within an application that is accessible at a configured URL path and displays the application's UI. Pages are edited using the Page Editor. For more, see Pages.

The Page Editor is composed of three main areas (see Page Editor for full details):

  • Canvas — The visual design surface where you drag and drop components to build the page layout.
  • Elements Tree — A hierarchical view of all DOM elements (HTML elements or components) rendered on the canvas.
  • Declarations — The properties, functions, services, and APIs used by the page.

Pages can be configured with a URL path and support URL parameters, enabling dynamic routing within the application. See Page Routes and Public vs Private Pages for more.

Page Key Terms

Term Definition
Canvas The visual design surface in the Page Editor where components are placed and arranged.
Elements Tree The hierarchical list of all DOM elements and components on the current page or component.
Declarations The named properties, arrays, and functions defined on a page or component that hold state and logic.
URL Path The route at which a page is accessible within a deployed application (e.g., /dashboard).
URL Parameter A dynamic segment of a page's URL path used to pass data to the page at runtime.

Components

A component in Bellini is a reusable UI element that can be either a global component or an app component:

  • Global components can be used in any application within the organization.
  • App components are scoped to a single application and can only be used within that app.

Components are edited using the Component Editor, which shares the same Canvas, Elements Tree, and Declarations layout as the Page Editor. For more, see Components and Custom Components.

A key distinction is that component properties and functions can be exported, meaning they become configurable from the outside — wherever the component is used. Exported properties are set visually in the Properties view when the component is placed on a page or inside another component. Binding can be one-way or two-way. See Component Editor, Component Properties, and Data Binding for more.

Component Key Terms

Term Definition
Global Component A component available for use in any application within the organization.
App Component A component scoped to a single application; cannot be used outside that app.
Exported Property A component property made configurable from outside the component via binding.

Declarations, Expressions, and Functions

Declarations, expressions, and functions are the building blocks of logic and state within a page or component.

Declarations

Declarations are the named properties, arrays, and functions you define on a page or component. They hold the state and logic that the page or component operates on — think of them as the variables and methods your UI is wired to. Declarations are defined in the Declarations panel of the Page Editor or Component Editor and can be referenced anywhere within that page or component.

For example, a page might declare a currentUser property that is populated on load and then bound to a profile component's input.

Expressions

Expressions are small JavaScript snippets used throughout Bellini to set component properties, initialize declarations, and compute values dynamically. An expression is evaluated in the context of the page or component, giving it access to all declarations and injected API services.

For example, you might use an expression to set a component's visibility based on the value of a declaration: currentUser.role === 'admin'.

Functions

Functions are declarations with parameters and a return value. Unlike a simple expression, a function is reusable — it can be called from multiple places within the same page or component, such as from a button's click handler, another function, or a component property. Functions are written in JavaScript using the Function Editor.

For more, see Functions and Data Binding.

Data Binding

Data binding is how you connect declarations and API services to component properties. Rather than writing imperative code to push data into the UI, you configure a binding on a component property and Bellini keeps it in sync automatically.

You bind a component property by assigning it a declaration (a property, array, or function) or an expression. For example:

  • The Data property of a Table component can be bound to an API service function that fetches a list of records — Bellini calls the function and populates the table automatically.
  • A Text Input's Value property can be bound to a declaration two-ways, so changes in the input update the declaration and vice versa.
  • A component's Visible property can be bound to an expression like items.length > 0 so it shows or hides reactively.

API services are available as injected dependencies within any page or component, so their functions can be called directly in expressions, assigned to declarations, or bound to component properties. Bindings can be one-way (data flows into the component) or two-way (the component can also update the declaration, useful for form inputs).

For more, see Data Binding.

Built-in UI Components and Layouts

Rather than building UI from scratch, Bellini provides a ready-to-use library of built-in components that you drop onto the canvas and configure. This is the core productivity advantage of Bellini — common UI patterns like forms, tables, charts, and navigation are available immediately, so you focus on your application's logic and data rather than low-level UI construction.

All built-in components can be customized using their configurable properties or CSS, and they integrate directly with Bellini's data binding system — meaning you can connect any component to a live API with no additional code.

UI Components

Bellini ships with 27 built-in UI components covering the most common needs in enterprise application development, organized into four categories:

  • Display & Feedback — Components that communicate status and progress to the user, such as badges, breadcrumbs, progress bars, and spinners.
  • Form Input — Components for capturing user input, including text fields, dropdowns, date pickers, file uploads, toggles, and more.
  • Navigation — Components for moving between pages and triggering actions, such as buttons, links, navigation bars, and tab bars.
  • Data Visualization — Components for presenting data, including tables, charts, calendars, maps, lists, and paginated views.

For the full component reference, see UI Components.

Layout Components

Layout components are structural containers that control how other components are arranged on the page. They do not display data themselves — instead, they define the visual structure that UI components are placed into.

Bellini provides 9 layout components covering horizontal and vertical box layouts, grid layouts, stack layouts, accordions, slide layouts, split panes, side panels, and layout fragments. Layouts can be nested to build complex, responsive page structures.

For the full layout reference, see Layout Components.

Authentication

Bellini applications support configurable authentication to control who can access your application and its APIs.

Authentication in Bellini operates at three levels:

  • Application-level — Authentication can be enabled or disabled per application. When enabled, users must authenticate before accessing the application and any of its secured APIs. User access is managed in the Lonti Console after deployment. Authentication and user login are handled via Lonti SSO.
  • Page-level — Individual pages can be configured as public (accessible without login) or private (requires authentication).
  • Scope-level — Pages can be restricted to users whose OAuth 2.0 access token contains matching scopes.

Bellini supports its built-in user directory as well as integration with SAML-compatible identity providers. For more, see Authentication & Authorization.

Authentication Key Terms

Term Definition
Lonti SSO The single sign-on service used by Bellini to authenticate users into deployed applications.
Lonti Console The administration interface where user access to deployed applications is configured.
Public Page A page accessible to unauthenticated users.
Private Page A page that requires the user to be authenticated before access is granted.
Scope An OAuth 2.0 permission claim on an access token used to restrict access to specific pages.

Deployment and Export

Bellini applications are deployed as web applications hosted on AWS CDN infrastructure, ensuring fast and reliable global distribution.

Deployment

  • Applications are deployed as web applications, with pages accessible at a base URL (e.g., https://sites.belliniserver.com/ACME/com.acme.dashboard). See Deploying Web Apps.
  • Bellini supports deployment to multiple environments (e.g., UAT, Staging, Production), enabling structured testing and release workflows. See Managing Environments.
  • Automated deployment pipelines are supported via endpoints that trigger builds from a Git repository to any configured environment. See Automated Deployment.

Export

Applications can also be exported in several formats:

  • Mobile app — Export as a native iOS or Android app. See Mobile Applications.
  • File — Export as a file that can be imported into a different organization. See Import/Export.
  • Lonti Marketplace — Publish to the Lonti Marketplace so other users can import it. See Publishing to Marketplace.

Source Control

Bellini provides built-in Git integration to support version control and team collaboration on applications and components.

  • Both applications and components can be placed under source control.
  • Bellini supports remote Git repositories, with native integration for Bitbucket, GitHub, and GitLab.
  • You can clone remote Git repositories directly within Bellini to start working from an existing codebase. See Cloning Repositories.

For more, see Source Control.

Themes

Bellini's theming system allows you to apply a consistent visual style across your entire application, including all built-in components.

  • Applications can be themed to match your organization's brand or design system. See Creating a Theme.
  • All built-in components respect the active theme and can be styled through it. See Applying Themes.
  • Separate themes can be configured for mobile and desktop experiences within the same application. See Mobile vs Desktop Themes.

Lonti Marketplace

The Lonti Marketplace is a shared repository of reusable Bellini resources that can be imported into your organization.

  • APIs — Import pre-configured API schemas and services. See Importing APIs.
  • Components — Import ready-made global components built by the community or your organization. See Importing Components.
  • Applications — Import complete applications published by other users. See Importing Applications.

For more, see Lonti Marketplace.

AI Capabilities

Bellini integrates AI assistance throughout the development experience to accelerate coding and problem-solving.

  • AI-powered code completion — An AI agent suggests code completions in code editors such as the function editor. See AI Code Completion.
  • Ask AI — Available everywhere in the application; ask for help troubleshooting an issue or ask the AI to generate code directly from the editor. See Ask AI.
  • AI Chat — A dedicated chat interface where you can send prompts to an AI agent to ask questions or generate entire applications and components. See AI Chat.

Views

Bellini's UI is organized into views — dedicated panels that give you access to specific resources and tools.

View Purpose
Apps Contains all applications belonging to the organization.
Components Contains user-made global components, core (built-in) components, layout components, and HTML elements.
Marketplace Access to the Lonti Marketplace for importing APIs, components, and applications.
Properties Configure the selected element (component, page, HTML element, etc.).
Styles Configure styling options for the selected element.
AI Chat Chat interface for interacting with the Bellini AI agent.

Editors

Bellini provides specialized editors for every resource type, each tailored to the task at hand.

Editor Purpose
Application Configuration Editor Configure general settings, source control, authentication, environments, themes, mobile options, and advanced options for an application.
Page Editor Design and configure application pages using the canvas, elements tree, and declarations. See Page Editor
Component Editor Design and configure components using the canvas, elements tree, and declarations. See Component Editor
Service Editor Configure general settings and declarations for a custom service. See Service Editor.
Function Editor A JavaScript code editor (modal) used for function declarations. See Function Editor.
Expression Editor A JavaScript code editor (modal) used to configure component properties via expressions.
Script Editor A JavaScript file code editor for application and component scripts.
CSS Editor A CSS file code editor for application and component stylesheets.

Helpful Resources