👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Previewing Portable Text

How to configure previews of Portable Text in the Studio

Sometimes you want to use the content from a block array in previews. Here's an example of how to get the first block text from a block array, concatenate the text from its spans and use as title for a preview:

{
  type: 'object',
  name: 'someTypeWithBlockArray'
  fields: [
    {
      name: 'blocks',
      type: 'array',
      of: [
        {type: 'block'}
      ]
    }
  ],
  preview: {
    select: {
      blocks: 'blocks'
    },
    prepare(value) {
      const block = (value.blocks || []).find(block => block._type === 'block')
      return {
        title: block
          ? block.children
            .filter(child => child._type === 'span')
            .map(span => span.text)
            .join('')
          : 'No title'
      }
    }
  }
}

Was this article helpful?