Your first reusable Grid View

A View presents model values and routes edits back to their owners. Start with this complete example in Code:

TAGS "canonical", "views", "composition"
 
input Estimate = 10
input Approved = 0
 
ELEMENT AmountEditor(amount: edit number, approve: action(number), title: string = "Estimate")
  Card
    NumberInput amount label title
    "Approve" -> approve(amount)
    BODY "summary"(amount)
      Text "Review the amount before approving."
END
 
SURFACE Desk
  local note = "Private review"
  approveAmount(amount) -> Approved = amount
 
  AmountEditor(Estimate, approveAmount)
    SLOT "summary"(current)
      Text note
      show current
 
  show Approved
END

Estimate and Approved are shared model inputs. The number field edits Estimate; the button calls approveAmount, whose ordinary Grid rule writes Approved. The reusable editor does not need to know the receiving model's input names. note belongs to this viewer and stays private.

The editor's interface states what each argument permits. edit number needs a direct writable input or local; action(number) needs a named action taking one argument; title: string is read-only. Omitting the trailing title uses the literal default. Types are checked against known source types at admission; these declarations do not install runtime value validators.

BODY "summary"(amount) lets the component supply a value to caller-owned content. SLOT "summary"(current) names that value in the fill. The fill still sees the caller's note. When the fill is omitted, the component's default summary appears. Each instance retains its own declared locals.

Open the View inspector to review model access and inferred presentation. After an accepted source has been inspected, editing it can show changed reads, write targets, trust requirements and uniquely matched presentations. This comparison uses source analysis; run a private preview and CHECKs to exercise behavior.

Export this definition as a Grid source component (.gridcomponent) to keep its interface, defaults and scoped slot. Import rechecks the interface against the package source. App templates (.gridui) cannot preserve these contracts and refuse the conversion.

For the next step, see the task cookbook. Keep the full reference open for layout, pages, validation, tables and native libraries.