Custom components

Custom implementations receive TypedRenderComponentProps<Props>. The model cannot supply a component implementation, import, event handler, or arbitrary React child.

function WeatherCard({
  props,
  options,
}: TypedRenderComponentProps<WeatherProps>) {
  return (
    <article lang={options.locale}>
      <h3>{props.location}</h3>
      <data value={props.temperature}>{props.temperature} C</data>
    </article>
  );
}

Available capabilities

Prop	Meaning
`props`	Schema-validated, read-only component properties
`children`	Validated child nodes allowed by the child contract
`nodeId`	Stable source node identifier
`options`	Frozen resolved theme, locale, currency, time zone, and policy
`emit`	Request a registered action
`navigate`	Request host-mediated navigation, when configured
`isUrlAllowed`	Check the renderer URL policy
`imagePolicy`	Optional host image policy
`mode`	`preview` or `committed` rendering context

Custom components remain disabled in provisional source previews. They render only from validated authoritative state. Still treat their props as untrusted data: escape text normally, avoid dangerouslySetInnerHTML, do not construct code, and do not initiate effects while rendering. Use actionProps in defineComponent only for schema properties that contain registered action names. Use children: { min, max } to constrain composition. Keep browser/network behavior behind explicit host callbacks rather than hidden inside a visual component.

Catalog and registry Actions, approval, and idempotency

⌘I

Get started

Render content

Configure Rixx UI

Frameworks and tools

Security

API reference

Architecture

Project

Custom components

Available capabilities

​Available capabilities

Available capabilities