---
title: 'Custom previews'
description: 'Customize list display without changing stored values.'
---

# Custom previews

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

```tsx filename="catalog-previews.tsx"
'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](/docs/schema/attribute-reference) and [custom fields](/docs/extensions/custom-fields).


---

[View full sitemap](/docs/sitemap.md)