Group

Keep related blocks in one content group.

group(content) keeps related blocks together. It adds no title, border, filters, or layout options. It accepts the same producers as view content, including zones. Use a panel for a bounded group and a section for a page region.

import {
  callout,
  defineResource,
  group,
  zone,
} from '@backlit/sdk'
const orders = defineResource('orders', [])
orders.view('overview', () =>
  group([
    callout('Orders are up to date.'),
    zone('activity', () => callout('No new activity.')),
  ])
)
export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "overview",
    "slots": {
      "content": [
        {
          "kind": "group",
          "slots": {
            "content": [
              {
                "kind": "callout",
                "text": "Orders are up to date."
              },
              {
                "kind": "zone",
                "name": "activity",
                "resource": "orders",
                "view": "overview",
                "slots": {
                  "content": [
                    {
                      "kind": "callout",
                      "text": "No new activity."
                    }
                  ]
                }
              }
            ]
          }
        }
      ]
    }
  }
}

Use normal TypeScript branches or array spreads to include optional blocks. Each content entry must be a builder. Do not pass booleans, null values, or callbacks in the content array. Fetch data inside the view or zone resolver. Zone lookup traverses authored groups, panels, sections, forms, and tabs.