Bellini User Interface
Overview
The Bellini UI is organized around a central editor area flanked by two sidebars and an optional bottom panel — a layout familiar to anyone who has used a modern code editor like VS Code. Understanding where things live and how the panels interact will help you navigate the platform efficiently from day one.
What You Will Learn
- How the Bellini UI is laid out
- What each sidebar contains and how to use it
- How editors are opened and managed
- What the canvas, elements tree, and declarations panels are
- What the bottom panel contains and when it appears
Overall Layout
The Bellini UI is divided into four main areas:
| Area | Location | Purpose |
|---|---|---|
| Main Toolbar | Top | Global actions: save, undo/redo, search, import, and developer tools |
| Left Sidebar | Far left | Toggle views for Apps, Components, and Marketplace |
| Editor Area | Center | Open and work in editors (page, component, service, etc.) |
| Right Sidebar | Far right | Toggle views for Properties, Styles, and AI Chat |
| Status Bar | Bottom | Toggle the bottom panel and view notifications |
| Bottom Panel | Bottom (toggleable) | Error Logs, Console, and Controller Inspector (page/component editors only) |
Each sidebar acts as a vertical icon toolbar. Clicking an icon toggles the corresponding view open or closed. The editor area in the center is where all editing work happens.
Main Toolbar
The main toolbar runs across the top of the Bellini UI and is always visible. It provides global actions available regardless of which editor is open:
| Item | Purpose |
|---|---|
| Save | Save the current editor |
| Save All | Save all open editors |
| Undo / Redo | Undo or redo the last action in the current editor |
| Error Logs | Open the Error Logs tab in the bottom panel |
| Console | Open the Console tab in the bottom panel |
| Controller Inspector | Open the Controller Inspector tab in the bottom panel |
| Import | Import an application or component from a file |
| Clone Git Repo | Clone a remote Git repository directly into Bellini |
| Open Text Search | Search across your application's source |
| Help | Access the help menu |
| Account | Access account settings, switch organization and logout |
Left Sidebar
The left sidebar gives you access to your resources and the Lonti Marketplace.
Apps View
The Apps view lists all applications belonging to your organization. From here you can:
- Browse and open applications
- Create new applications
- Access application settings
- Navigate to an application's pages, components, APIs, services, scripts, stylesheets, and assets
Double-clicking a page or resource in the Apps view opens it in the editor area.
For more, see Applications.
Components View
The Components view is your component library. A search bar at the top lets you quickly filter by name. The view contains four collapsible sections, each showing 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.
Drag any item from the Components view onto the canvas to add it to the current page or component.
For more, see Built-in Components and Custom Components.
Marketplace View
The Marketplace view provides access to the Lonti Marketplace, where you can browse and import APIs, components, and applications shared by the community or your organization.
For more, see Lonti Marketplace.
Editor Area
The editor area occupies the center of the screen and is where all editing work takes place. Editors open in tabs, similar to VS Code — you can have multiple editors open simultaneously and switch between them by clicking their tabs.
Opening an Editor
Double-click any resource in the Apps or Components view to open it in the editor area:
- Double-clicking an application page opens the Page Editor.
- Double-clicking a component opens the Component Editor.
- Double-clicking a service, script, stylesheet, or other resource opens the corresponding editor.
Available Editors
| Editor | Opens when you open… |
|---|---|
| Application Configuration Editor | An application's settings (general, source control, authentication, environments, themes, mobile, advanced) |
| Page Editor | An application page |
| Component Editor | A custom component |
| Service Editor | A custom service |
| Function Editor | A function declaration (opens as a modal) |
| Expression Editor | A component property configured via expression (opens as a modal) |
| Script Editor | A JavaScript script file |
| CSS Editor | A CSS stylesheet file |
For more, see Page Editor and Component Editor.
Page and Component Editors
The Page Editor and Component Editor share the same layout and are the editors you will use most. They are composed of three areas:
Canvas
The canvas takes up most of the editor space and is the visual design surface where you build your UI. Drag components from the Components view onto the canvas to add them to the page or component. Select any element on the canvas to configure it in the Properties and Styles views.
A toolbar at the top of the editor provides quick access to common actions such as reloading, toggling selection, and switching between desktop and mobile views.
Elements Tree and Declarations
To the side of the canvas, two accordion-style panels are displayed:
- Elements Tree — A hierarchical view of all DOM elements (HTML elements and components) currently on the canvas. Use it to select, reorder, or navigate elements, especially when the canvas is complex.
- Declarations — The named properties, arrays, functions, and injected API services defined on the page or component. This is where you manage the state and logic that your UI is wired to.
Both panels can be collapsed to give the canvas more space when needed.
For more, see Bellini Concepts — Declarations.
Right Sidebar
The right sidebar contains contextual views that update based on what is selected in the active editor.
Properties View
The Properties view displays the configurable properties of the currently selected element — whether that is a component, an HTML element, or a page. Use it to set property values, configure data bindings, and adjust component-specific settings.
For more, see Component Properties.
Styles View
The Styles view displays styling options for the currently selected element. Use it to apply CSS classes, set inline styles, and adjust layout and spacing properties visually.
AI Chat View
The AI Chat view provides a dedicated chat interface for interacting with the Bellini AI agent. Use it to ask questions, troubleshoot issues, or generate applications and components from natural language prompts.
For more, see AI Chat.
Status Bar
The status bar runs along the very bottom of the Bellini UI, similar to VS Code. Use it to:
- Toggle the bottom panel open or closed.
- View and dismiss notifications from Bellini.
Bottom Panel
The bottom panel is only visible when a Page Editor or Component Editor is open. It can be toggled via the status bar or via the toolbar buttons (Error Logs, Console, Controller Inspector). It contains three tabs:
- Error Logs — Displays errors and warnings from the current page or component.
- Console — A JavaScript console for monitoring log output and debugging runtime behavior.
- Controller Inspector — Inspect the current state of the page or component controller, including the values of all declarations and injected services.
For more, see Developer Console.
Helpful Resources
- Bellini Concepts — Understand the core building blocks: applications, pages, components, APIs, and more.
- Page Editor — Detailed reference for the Page Editor.
- Component Editor — Detailed reference for the Component Editor.
- Quick Start Guide — Build and deploy your first Bellini application.