Custom previews

A preview contribution renders an attribute value in a list. It should be pure presentation: do not mutate a record during rendering.

'use client';
 
import type { StudioExtension } from '@flexkit/studio';
 
export function CatalogPreviews(): StudioExtension {
  return {
    id: 'catalog-previews',
    contributes: {
      previewFields: {
        text: {
          component: ({ value }) => <span>{value == null || value === '' ? '—' : String(value)}</span>,
        },
      },
    },
  };
}

Register the extension in your project. Attributes using the supported previewType: 'text' contribution receive the override. Keep broad overrides neutral because multiple fields can use the same preview type.

Verify display

Check null, empty string, zero, false, long values, and values from different scopes. Do not treat zero as absent. Keep essential information accessible without hover and avoid putting secret data in tooltip content.

A preview does not define the storage data type, input validation, or access permissions. See attribute reference and custom fields.