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.

How to define them

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.markdownText({
    md: '### Welcome\nFill in the form below to get started.',
  }),
  // Programmatic-only — the callback can read live form state.
  gui.displays.display(({ $form }) => html`<h2>Hello, ${$form.name}!</h2>`),
  gui.displays.custom('productDescription', {
    img: 'p.png',
    description: '### Cool',
  }),
];

Same outcome in JSON — every display widget carries its data inside props. The dynamic Renderer is Programmatic-only because JSON can’t serialize a function reference; everything else maps directly:

{
  "form": [
    {
      "kind": "display",
      "type": "alert",
      "props": { "text": "Some fields need your attention", "level": "warning" }
    },
    {
      "kind": "display",
      "type": "markdownText",
      "props": { "md": "### Welcome\nFill in the form below to get started." }
    },
    {
      "kind": "display",
      "type": "productDescription",
      "props": { "img": "p.png", "description": "### Cool" }
    }
  ]
}

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

Available widgets

Widget	DX shortcut	Reference
Alert	gui.displays.alert	Alert
Markdown Text	gui.displays.markdownText	Markdown Text
Renderer	gui.displays.display	Renderer — Programmatic-only
Custom	gui.displays.custom	Custom Widgets

See also

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