gui.displays reference

Display shortcuts render read-only content. They have no path (no data binding) and no events — just a typed props object.

Signature

gui.displays.<shortcut>(props: DisplayProps, tags?: string[]): GuiDisplaysShortcut;

A fully-populated alert example:

gui.displays.alert(
  {
    // props — typed per-shortcut
    text: 'Your changes have been saved.',
    level: 'success', // 'info' | 'warning' | 'error' | 'success'
    icon: 'check',
    states: {
      // per-state overrides — see /form-definition/states/
      'errors:hasIssues': {
        text: 'Some fields need your attention.',
        level: 'warning',
      },
    },
  },
  ['banner'], // tags — addressable groups for selectors
);

The Programmatic-only gui.displays.display(callback) is shaped differently — it takes a single render callback that returns framework-specific markup (Lit html, React JSX, Angular template). There’s no JSON equivalent because the value is a function reference. See Renderer for the full pattern.

gui.displays.display(
  ({ $form }) => html` <p>Hello, ${$form.user?.name ?? 'guest'}!</p> `,
);

Shortcuts

Shortcut	Renders	Reference
gui.displays.alert	an alert with a level (info / warning / error / success)	Alert
gui.displays.markdownText	markdown content rendered as formatted HTML	Markdown Text
gui.displays.display	a renderer that takes a render callback (Programmatic-only)	Renderer
gui.displays.custom	your custom display widget	Custom Widgets