How to query and render Sanity rich text/Portable Text as HTML?

You're not missing anything! What you're seeing is exactly how Sanity's rich text works - it's called Portable Text, and it's a JSON-based format rather than HTML.

The structure you're seeing is intentional: bold text creates separate objects because marks (like bold, italic, etc.) are stored as metadata on text spans. This is why formatting changes create new "children" in the structure.

You cannot query Portable Text directly as HTML because it's stored as structured JSON data in Sanity's Content Lake. However, you have several options to convert it to HTML for display:

Rendering Options

1. Use @portabletext/react (React apps)

The modern, recommended approach:

import {PortableText} from '@portabletext/react'

<PortableText value={yourContent} />

2. Use @portabletext/to-html (Node.js/server-side)

For converting to HTML strings:

import {toHTML} from '@portabletext/to-html'
const html = toHTML(yourContent)

3. Use pt::text in GROQ (plain text only)

If you only need plain text without formatting, you can query:

*[_type == "post"] {
  "plainText": pt::text(content)
}

Note: This strips all formatting and just gives you the raw text.

Why Not HTML?

Portable Text's JSON structure actually gives you several advantages over storing HTML:

• Security: No XSS vulnerabilities
• Platform-agnostic: Render the same content on web, mobile, email, voice assistants, etc.
• Customizable: You can create custom serializers to render content exactly how you want
• Structured: Content is semantic and queryable

The serializers handle transforming that JSON structure into whatever format you need. You define how each block type, mark, and style should render in your specific application.

Note: The older block-content-to-html package is deprecated, so stick with the @portabletext/* packages for new projects.