Renderer

The Renderer widget renders raw framework markup returned by a callback. Use it when you need to drop a small piece of bespoke UI inside a form — a heading, a summary block, a chart — without writing a full custom widget.

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

const formDef = [
  gui.displays.display(
    (params) => html`<h2>Hello, ${params?.$form?.name ?? 'guest'}!</h2>`,
  ),
];

Programmatic-only

The Renderer widget takes a function as its only argument. There’s no JSON equivalent — JSON cannot serialize functions.

Caution

This is the only widget where JSON and Programmatic forms aren’t interchangeable. For JSON forms, drop in a gui.displays.custom('renderer', ...) and read the render function from props at runtime — but that requires registering a custom widget loader, which is more work than just using the Programmatic API.

Per-framework usage

React

import { gui } from '@golemui/gui-shared';
import * as React from 'react';

const formDef = [
  gui.displays.display(
    (params) => (
      <div className="summary">
        <h2>Booking summary</h2>
        <p>Customer: {params?.$form?.customer?.name}</p>
      </div>
    ),
  ),
];

Angular

Renderer widgets in Angular accept a callback that returns an Angular template ref or a string of HTML. Most teams prefer a custom display widget for non-trivial Angular templates.

Lit

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

const formDef = [
  gui.displays.display(
    (params) => html`
      <div class="summary">
        <h2>Booking summary</h2>
        <p>Customer: ${params?.$form?.customer?.name}</p>
      </div>
    `,
  ),
];

Reactivity

The callback receives a params object with $form (the live form data tree) and re-renders whenever any referenced path changes. Read what you need from $form and the widget will keep itself in sync.

See also

• gui.displays — every display shortcut.
• Extending GolemUI / Display Widget — for richer cases that need a full custom widget.