Registry Renderers

Renderers customize how values are displayed.

Use renderers for table cells, detail values, badges, formatted values, and visual display components.

Schema usage

schemas/users/users.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  table: {
    columns: [
      { key: "name", label: "Name" },
      { key: "status", label: "Status", type: "badge", renderer: "users.statusBadge" }
    ]
  },
  detail: {
    fields: [
      { key: "status", label: "Status", renderer: "users.statusBadge" }
    ]
  },
  registry: {
    renderers: ["users.statusBadge"]
  }
} as const;

Runtime registry

components/vibeflui/renderers/users/UserStatusBadge.tsx

TSX

import type { FluiKitRuntimeComponentProps } from "@vibeflui/core";

export function UserStatusBadge({ value }: FluiKitRuntimeComponentProps) {
  const status = String(value ?? "unknown");

  return (
    <span data-status={status} className="rounded-full px-2 py-1 text-xs">
      {status}
    </span>
  );
}

lib/vibeflui/registry.tsx

TSX

import { createRegistry } from "@vibeflui/core";
import { UserStatusBadge } from "@/components/vibeflui/renderers/users/UserStatusBadge";

export const registry = createRegistry({
  renderers: {
    "users.statusBadge": UserStatusBadge
  }
});

Renderer context

Renderers receive runtime component props.

Common values:

schema
column
detailField
row
value
className

For TypeScript, use FluiKitRuntimeComponentProps from @vibeflui/core.

Renderer vs component

Use renderers when a schema field or column needs a value renderer.

Use components when the schema references a general UI component, such as an alert, custom filter component, or reusable slot component.

Computed values and renderers

You can combine computed columns with renderers.

schemas/users/users.schema.ts

export const usersSchema = {
  version: "1.0.0",
  resource: "users",
  table: {
    columns: [
      {
        key: "displayName",
        label: "Display Name",
        type: "computed",
        computed: "users.displayName",
        renderer: "users.strongText"
      }
    ]
  },
  registry: {
    computedResolvers: ["users.displayName"],
    renderers: ["users.strongText"]
  }
} as const;