/portable-text-serialization

Extract Plain Text from Portable Text

Every @portabletext/* library exports a toPlainText() utility. Use it for meta descriptions, search indexing, summaries, and anywhere you need raw text without markup.

Usage

// From any framework library:
import {toPlainText} from '@portabletext/react'
// or: import {toPlainText} from '@portabletext/svelte'
// or: import {toPlainText} from '@portabletext/vue'
// or: import {toPlainText} from '@portabletext/to-html'

const plainText = toPlainText(portableTextBlocks)

Common Patterns

Meta Description

function getMetaDescription(body: PortableTextBlock[]): string {
  const text = toPlainText(body)
  return text.length > 160 ? text.slice(0, 157) + '...' : text
}

Search Indexing

// Index document content for search
const searchableText = toPlainText(document.body)

Slug Generation

import slugify from 'slugify'

const slug = slugify(toPlainText(blocks), {lower: true, strict: true})

Character/Word Count

const text = toPlainText(blocks)
const wordCount = text.split(/\s+/).filter(Boolean).length
const charCount = text.length

Behavior

• Extracts text from all span children in block type nodes
• Joins blocks with double newlines (\n\n)
• Ignores custom block types (images, code blocks, etc.)
• Strips all marks (bold, links, etc.) — returns raw text only

Reference

• toPlainText source