Skip to content
👀 See Sanity in action: Watch product demo now →
Get more help on our Slack

How to use Rich Text from Sanity: Abstract Syntax Tree and Renderer

5 replies
Last updated: May 18, 2022
Hi,
could you help me figure out how to use rich text from sanity?

Can I not query data from the field as HTML?

I can only see stuff like:

{
"content": [
    {
    "children": [
        {
        "text": Some bold text
        }
        {
        "text": some normal text.
        }
If I make some text bold, it becomes a child.

What am I missing?

Thanks!
May 18, 2022, 12:11 PM
May 18, 2022, 12:17 PM
The rich text data doesn’t yield HTML, it yields an AST (Abstract Syntax Tree) so it can eventually be rendered in any sort of format (HTML, JSX, etc.).
May 18, 2022, 12:23 PM
So you need a renderer. If you use React, then you should use the library you just linked. If you want HTML, you want https://github.com/portabletext/to-html .
May 18, 2022, 12:23 PM
There is a list of renderers here: https://www.sanity.io/docs/presenting-block-text
May 18, 2022, 12:23 PM
Thank you!
May 18, 2022, 12:34 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get StartedJoin our Slack

Categorized in