Display Widgets Overview

Display widgets render read-only content. They have no path and don’t write to form data — they just display information. An alert, a markdown block, a custom-rendered summary card are all display widgets.

The DX shortcuts

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

const formDef = [
  gui.displays.alert({ text: 'Some fields need your attention', level: 'warning' }),
  gui.displays.display(({ $form }) => html`<h2>Hello, ${$form.name}!</h2>`),
  gui.displays.custom('productDescription', { img: 'p.png', description: '### Cool' }),
];

Shortcut	Description
gui.displays.alert	A levelled alert (Alert).
gui.displays.display	A render-callback that returns framework markup (Renderer). Programmatic-only.
gui.displays.custom	Plug in your own display widget (Custom Widgets).

JSON form

The same widgets expressed in JSON:

{
  "form": [
    {
      "kind": "display",
      "type": "alert",
      "props": { "text": "Some fields need your attention", "level": "warning" }
    }
  ]
}

Property	Description
uid	Optional unique id; one is generated if absent.
kind	MANDATORY. Always 'display'.
type	MANDATORY. The widget type (alert, markdownText, renderer, etc.).
props	Widget-specific configuration — see each widget’s reference page.

Available widgets

• Alert
• Markdown Text
• Renderer

See also

• gui.displays reference — every display shortcut.
• Extending GolemUI / Display Widget — build your own.