Pages
Overview
A page in Bellini is a screen in your application, accessible at a configured URL path. Pages are the primary building blocks of any Bellini app — each page defines its own UI, logic, and access rules. You design pages visually in the Page Editor using a drag-and-drop canvas, and you control how each page behaves through its route, authentication settings, and scope restrictions.
What You Will Learn
- What a Bellini page is and how it fits into an application
- How to create and configure pages
- How to define routes and URL parameters for a page
- How to control page access using public/private settings and scopes
- How to build reusable layout patterns shared across pages
When To Use This
Use this section when you are building or modifying pages in a Bellini application. Start with Creating a Page if you are new to Bellini pages, then refer to the other topics as you configure routes, authentication, and layout.
What is a Page
A page represents one screen of your application. It is associated with a URL route, so navigating to that route renders the page's content. Every page has its own:
- Canvas — the visual design surface where you build the UI by dragging and dropping components
- Elements Tree — a hierarchical view of every element on the page
- Declarations — named properties, arrays, functions, and injected API services that hold the page's state and logic
Pages in Bellini are all the same type — there are no sub-types like dialog pages or layout pages. Any structural differences between pages are achieved through component composition and configuration.
For more, see Page Editor.
Pages in This Section
This section covers everything you need to build and configure pages in Bellini.
| Topic | Description |
|---|---|
| Creating a Page | Add a new page to your application |
| Page Editor | Understand the canvas, Elements Tree, and Declarations panel |
| Page Configuration | Set the default page, define URL parameters, and manage other page settings |
| Page Routes | Configure the URL path that maps to your page |
| Page Layout | Build reusable layout patterns shared across pages using components and Layout Fragments |
| Page Access Control | Control whether a page requires authentication and restrict access by user scope |
Page Configuration
Beyond the URL route, each page has a small set of settings that control its role in the application:
- Default page — Mark a page as the default so users land on it when opening the app at the root URL.
- Parameters — Define URL parameters that the page reads from the route (for example,
/orders/:id).
For full details, see Page Configuration.
Page Access Control
Bellini provides two layers of access control for pages.
Public vs Private
When authentication is enabled on an application, all new pages are private by default — users must be logged in to access them. You can set individual pages as public (no login required) by toggling off Authentication Required in the page properties. For more, see Page Access Control.
Page Scopes
Scopes provide finer-grained control within an authenticated application. Each app user is assigned scopes that correspond to groups managed in the Lonti Console user directory. By setting scopes on a page, you restrict access to users who have the matching scope. Scopes are also respected by the navigation component — pages a user cannot access are automatically hidden from the nav menu. For more, see Page Access Control.
Helpful Resources
- Creating a Page — Step-by-step guide to adding a page to your application
- Page Editor — Full reference for the canvas, Elements Tree, and Declarations panel
- Page Routes — How to configure URL paths and route parameters
- Page Access Control — Public/private settings and scope restrictions
- Page Layout — Reusable layout patterns using components and Layout Fragments
- Community Q&A: Bellini Community
Have a question? Post or search it here.