Customizing document list preview format with Structure Builder

Yes! You can customize how document previews appear in list views using the preview configuration in your schema. This controls how documents display in document lists, reference fields, and array items.

Here's a basic example showing how to modify the preview format:

export const postType = defineType({
  name: 'post',
  type: 'document',
  preview: {
    select: {
      title: 'title',
      author: 'author.name',  // Access referenced author's name
      media: 'mainImage',
      publishedAt: 'publishedAt'
    },
    prepare({title, author, media, publishedAt}) {
      return {
        title: title,
        subtitle: author ? `By ${author} • ${publishedAt}` : 'Draft',
        media: media ?? DocumentIcon  // Fallback icon if no image
      }
    }
  }
})

The preview configuration has two parts:

1. select - Specifies which fields to extract from your document. You can access nested references using dot notation like 'author.name' or array items by index like 'images.0'.

2. prepare - Transforms the selected data before display. It returns an object with title, subtitle, and media properties that determine how the item appears.

For more complex array items, you can create richer previews to help editors quickly identify content:

export const offerType = defineType({
  name: 'offer',
  type: 'object',
  preview: {
    select: {
      title: 'title',
      discount: 'discount',
      expiryDate: 'expiryDate'
    },
    prepare({title, discount, expiryDate}) {
      return {
        title: title,
        subtitle: `${discount}% off - Expires: ${expiryDate}`
      }
    }
  }
})

Important note: The preview configuration modifies how items appear in lists, but it's defined at the schema level, not in the Structure Builder. The Structure Builder controls which documents appear in lists through filtering and organization, while the schema's preview configuration controls how each individual item is formatted within those lists.

If you need even more customization beyond title/subtitle/media, you can create custom preview components, though the standard preview configuration handles most use cases effectively.