Pages¶

Overview¶

Pages lets you build hosted UI pages backed by data from your Centrali collections. Instead of building a custom frontend from scratch, you define pages declaratively — choosing a page type, configuring data sources, and publishing to a live URL that your users can access.

Pages are ideal for internal tools, customer portals, admin dashboards, and data entry workflows.

What can you build?¶

Pages supports four page types, each designed for a different use case:

How it works¶

Building a page follows a straightforward workflow:

graph LR
    A[Create Page] --> B[Configure Sections & Blocks]
    B --> C[Connect Data Sources]
    C --> D[Save Draft]
    D --> E[Publish]
    E --> F[Live at Runtime URL]

1. Create a page¶

Choose a page type and give it a name and slug. The slug becomes part of the runtime URL.

curl -X POST https://api.centrali.io/workspace/my-workspace/api/v1/pages \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Orders",
    "slug": "orders",
    "pageType": "list",
    "description": "All orders in the workspace"
  }'

2. Configure sections and blocks¶

A page definition is organized into sections, each containing one or more blocks. Sections control layout; blocks display data.

{
  "sections": [
    {
      "id": "section-1",
      "kind": "content",
      "title": "Orders",
      "layout": "single-column",
      "blocks": [
        {
          "id": "block-1",
          "blockType": "table",
          "dataSource": {
            "type": "structure",
            "ref": "COLLECTION_ID",
            "config": {
              "fields": ["orderNumber", "customer", "total", "status"],
              "sort": [{ "field": "createdAt", "direction": "desc" }],
              "limit": 50
            }
          }
        }
      ]
    }
  ],
  "theme": { "inherit": true }
}

3. Save and publish¶

Save your definition as a draft version, then publish it to make it live:

# Publish the latest draft
curl -X POST https://api.centrali.io/workspace/my-workspace/api/v1/pages/PAGE_ID/publish \
  -H "Authorization: Bearer YOUR_TOKEN"

4. Access at runtime¶

Published pages are accessible at your workspace's runtime URL:

https://pages.centrali.io/{workspace-slug}/{page-slug}

Section kinds and layouts¶

Sections organize your page into logical groups:

Each section has a layout that controls how blocks are arranged:

Block types¶

Blocks are the building units of a page. The block type determines what is rendered:

Access control¶

Every page has an access policy that controls who can view it:

# Set a page to require authentication
curl -X PUT https://api.centrali.io/workspace/my-workspace/api/v1/pages/PAGE_ID/access-policy \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "accessMode": "role-gated",
    "requiredRoles": ["admin", "manager"]
  }'

Navigation shell¶

When you have multiple pages in a workspace, you can group them into a sidebar navigation shell. Users see a persistent sidebar with links to each page.

To include a page in the navigation shell, set showInNavShell to true:

curl -X PATCH https://api.centrali.io/workspace/my-workspace/api/v1/pages/PAGE_ID \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "showInNavShell": true
  }'

You can customize the navigation order and grouping through the navigation configuration endpoint.

Dynamic data with variable bindings¶

Pages can use variable bindings to dynamically filter data at runtime. For example, a detail page can read a record ID from the URL, or a list page can show only records belonging to the currently signed-in user.

Variable bindings are configured on each block's data source. See Data Sources & Variable Binding for a complete guide.

Theming¶

Pages inherit a workspace-level theme by default. You can configure the primary color, accent color, logo, and font family:

curl -X PUT https://api.centrali.io/workspace/my-workspace/api/v1/pages/theme \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "config": {
      "primaryColor": "#1a56db",
      "accentColor": "#7c3aed",
      "logoUrl": "https://example.com/logo.svg",
      "fontFamily": "Inter"
    }
  }'

Versioning¶

Every save creates a new version. You can view version history and roll back to a previous version by publishing it again. Versions have three states:

Next steps¶

1. Configure data sources and variable bindings
2. Set up page actions