String Interpolation

String interpolation lets you embed live values directly in widget text props using {{expression}} slots — no callbacks, no custom widgets. Slots re-evaluate reactively as the user fills in the form.

Programmatic
JSON

import { gui } from '@golemui/gui-shared';

gui.displays.alert({
uid: 'greeting',
text: "Hello {{$form.firstName}}, you have {{$formIsInvalid ? 'errors' : 'no errors'}}.",
});

{
  "kind": "display",
  "type": "alert",
  "props": {
    "text": "Hello {{$form.firstName}}, you have {{$formIsInvalid ? 'errors' : 'no errors'}}."
  }
}

Where it works

Any string-valued widget property supports {{...}} slots: props.text, label, hint, placeholder, props.md, and any other string prop accepted by a widget. Display widgets are the most common use case, but the feature is not limited to them.

Available scopes

Scope	What it holds
`$form`	All current field values — the live form data object
`$meta`	Host-supplied metadata passed via the `meta` prop
`$errors`	Current validation error messages, keyed by field `uid`
`$formIsInvalid`	Boolean — `true` when any field currently fails validation

Access nested values with standard dot notation: {{$form.address.city}}. Use optional chaining when the field may not yet exist: {{$form.address?.city}}.

Expressions

Slots support a safe subset of JavaScript — no side effects, no function calls. You can use:

Path access — {{$form.user.name}}
Arithmetic — {{$form.count + 1}}, {{$form.price * 1.2}}
String concatenation — {{$form.firstName + ' ' + $form.lastName}}
Ternary — {{$meta.isVip ? 'VIP' : 'Guest'}}
Optional chaining — {{$form.address?.city}}
Nullish coalescing — {{$form.nickname ?? $form.firstName}}
Comparisons — {{$form.score >= 90 ? 'A' : 'B'}}

Programmatic
JSON

import { gui } from '@golemui/gui-shared';

const formDef = [
gui.displays.alert({ uid: 'result', text: 'Next item: {{$form.count + 1}}' }),
gui.displays.alert({ uid: 'name', text: "Full name: {{$form.firstName + ' ' + $form.lastName}}" }),
gui.displays.alert({ uid: 'role', text: "Role: {{$meta.isVip ? 'VIP' : 'Guest'}}" }),
];

{
  "form": [
    {
      "uid": "result",
      "kind": "display",
      "type": "alert",
      "props": { "text": "Next item: {{$form.count + 1}}" }
    },
    {
      "uid": "name",
      "kind": "display",
      "type": "alert",
      "props": {
        "text": "Full name: {{$form.firstName + ' ' + $form.lastName}}"
      }
    },
    {
      "uid": "role",
      "kind": "display",
      "type": "alert",
      "props": { "text": "Role: {{$meta.isVip ? 'VIP' : 'Guest'}}" }
    }
  ]
}

Null and undefined

If an expression evaluates to null or undefined, the slot renders as an empty string — not the literal "null". For example, Hello {{$form.name}} renders as Hello while name is still empty.

Validation state

Use $errors and $formIsInvalid to reflect live validation feedback inline:

Programmatic
JSON

import { gui } from '@golemui/gui-shared';

gui.displays.alert({
uid: 'validation_status',
text: 'Form valid: {{!$formIsInvalid}} | Username error: {{$errors.userName}}',
});

{
  "kind": "display",
  "type": "alert",
  "props": {
    "text": "Form valid: {{!$formIsInvalid}} | Username error: {{$errors.userName}}"
  }
}

$errors.fieldUid holds the current error message string for that field (empty string when there is no error). $formIsInvalid is a plain boolean — use it as-is: {{$formIsInvalid}} or inside a ternary: {{$formIsInvalid ? 'Fix errors first' : 'Ready'}}.

Error handling

If a slot contains a syntax error — for example {{$form..broken}} or {{$form.x = 1}} — GolemUI reports the problem through the formHealth callback with { status: 'errored', code: 40 } and stops re-rendering the form until the definition is corrected. This surfaces definition mistakes at runtime rather than silently producing wrong output.