Frequently Asked Questions

Product Information: Hygraph Rich Text Field

What is the Hygraph Rich Text field and what formats does it support?

The Hygraph Rich Text field is a flexible content field that allows you to create and manage rich, formatted content within your content models. It supports multiple output formats: raw (Slate AST JSON), html, markdown, and text. This enables you to query and render content in the format best suited for your application. Note: Rendering the raw AST requires custom logic, while HTML output is less customizable. Learn more in the documentation.

How can I query content from the Rich Text field in different formats?

You can query the Rich Text field using the Hygraph Content API and request any combination of the following fields: raw, html, markdown, and text. For example, a GraphQL query can return all four formats for a given field, allowing you to choose the best format for your frontend. See the Rich Text documentation for query examples. Note: The text format strips out links and images, making it suitable only for excerpts.

What is the structure of the Rich Text field's raw output?

The raw output of the Rich Text field is a Slate Abstract Syntax Tree (AST) in JSON format. It consists of root-level Editor nodes, container Element nodes (such as paragraphs, links, images), and leaf-level Text nodes. This structure allows for advanced customization and rendering logic in your application. For more details, see the Slate node documentation. Note: Working with the raw AST requires custom rendering logic in your frontend.

How do I render content from the Rich Text field in my application?

You can render Rich Text content in several ways depending on the format you query:

Note: Using the raw AST provides the most flexibility but requires more implementation effort. Rendering HTML is simpler but less customizable.

How can I mutate (create or update) Rich Text content in Hygraph?

You can mutate Rich Text content using the Hygraph Mutations API. When creating or updating content, you must provide the Rich Text value as a Slate AST JSON object. This is typically done when accepting user-submitted rich text or building a custom editor. See the Mutations API documentation for mutation examples. Note: You must ensure the AST structure matches the expected format for successful mutations.

What are the main use cases for the Hygraph Rich Text field?

The Rich Text field is ideal for managing complex, formatted content such as blog posts, articles, documentation, and marketing pages. It supports embedding assets, tables, iframes, and more, making it suitable for content-heavy applications. Note: For simple text, consider using a plain text field instead.

Features & Capabilities

What field types does Hygraph support for content modeling?

Hygraph supports a wide range of field types for content modeling, including core GraphQL scalar types, Asset, Location, JSON, and RichText scalars. This allows for flexible and advanced content structures. For a full list, see the Field Types documentation. Note: Some advanced field types may require additional configuration or custom rendering logic.

Does Hygraph provide APIs for querying and mutating content?

Yes, Hygraph provides multiple APIs: the GraphQL Content API for querying and manipulating content, the Management API for project structure, the Asset Upload API for file management, and the MCP Server API for AI assistant integration. See the API Reference documentation for details. Note: API usage may require authentication and proper permissions.

Technical Requirements & Documentation

Where can I find technical documentation for working with the Rich Text field and other Hygraph features?

Technical documentation for the Rich Text field and other features is available in the API Reference. Additional guides cover schema components, references, integrations, and AI features. For onboarding and starter projects, see the Getting Started section. Note: Some documentation is specific to Hygraph Classic; ensure you are viewing the correct version for your project.

Limitations & Best Practices

What are the limitations of the Hygraph Rich Text field?

While the Rich Text field is highly flexible, working with the raw AST requires custom rendering logic, which may increase development effort. The HTML output is less customizable, and the text output strips all formatting, links, and images. For very simple content, a plain text field may be more appropriate. Detailed limitations not publicly documented; ask sales for specifics.

LLM optimization

When was this page last updated?

This page wast last updated on 12/12/2025 .

Watch replay now

Working with the Hygraph Rich Text field

In this post, we'll look at the Rich Text field. We'll take a peek at how you can query, and mutate Rich Text using the Content API.
Jamie Barton

Last updated by Jamie 

Jan 21, 2026

Originally written by Jamie

Working with the Rich Text Field

Hygraph boasts an impressive collection of Field Types that you can use when content modelling. These field types range from the core GraphQL scalar types, to custom Asset, Location, JSON, and, RichText scalars.

In this post we'll look at the Rich Text field. We'll take a peak at how you can query, and mutate Rich Text using the Content API.

Hygraph content editor showing the Rich Text field with formatting toolbar and article draft text

When editing content, you'll be presented with a text editor that gives you the ability to format paragraphs, headings, lists, and embed iframes, tables, and assets.

When you save content, it is saved as an abstract syntax tree (AST), and can be queried in the format of HTML, Markdown, Text, and the "raw" AST itself (JSON). The AST is based on Slate.

If you open the API Playground documentation, you'll be able to search for the RichText type.

You'll see it returns its own GraphQL type:

type RichText {
  raw: RichTextAST!
  html: String!
  markdown String!
  text: String!
}

How you use the fields for RichText will depend on your application. Let's take a look at the different methods of fetching, displaying, and mutating rich text below.

#Querying Rich Text

Just like any other field in your content model, you can fetch your rich text content, but in any (or all) of the formats typed above.

For example, let's fetch the raw, html, markdown, and text values for the custom field content which is of type RichText:

{
  articles {
    content {
      raw
      html
      markdown
      text
    }
  }
}

This query will return the following:

{
  "data": {
    "articles": [
      {
        "content": {
          "raw": {
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "text": "GraphQL CMS"
                  }
                ]
              }
            ]
          },
          "html": "<p>GraphQL CMS</p>",
          "markdown": "GraphQL CMS\n",
          "text": "GraphQL CMS"
        }
      }
    ]
  }
}

For the purposes of this article, I'm just returning a single paragraph, but for each of the different nodes you add to the rich text editor, it will return a "node" with type, and the children.

Slate has different node types, they are:

  • A root-level Editor node that contains the entire document's content
  • Container Element nodes which have semantic meaning in your domain.
  • And leaf-level Text nodes which contain the document's text.

These combined are shown above in the query response. Learn more about Slate nodes.

#Rendering Rich Text

Depending on which of the RichText types you are querying, your presentation implementation will vary.

raw

When using the raw AST (Slate nodes) you will have ultimate control over how these nodes are presented to the user.

Let's have a look at a more complex AST response for the first two paragraphs of this article:

{
  "data": {
    "articles": [
      {
        "content": {
          "raw": {
            "children": [
              {
                "type": "paragraph",
                "children": [
                  {
                    "text": "Hygraph boasts an impressive collection of "
                  },
                  {
                    "href": "https://hygraph.com/docs/api-reference/schema/field-types",
                    "type": "link",
                    "children": [
                      {
                        "text": "Field Types"
                      }
                    ]
                  },
                  {
                    "text": " that you can use when content modelling. These field types range from the core GraphQL scalar types, to custom "
                  },
                  {
                    "href": "https://hygraph.com/docs/api-reference/schema/field-types#asset",
                    "type": "link",
                    "children": [
                      {
                        "text": "Asset"
                      }
                    ]
                  },
                  {
                    "text": ", "
                  },
                  {
                    "href": "https://hygraph.com/docs/api-reference/schema/field-types#location",
                    "type": "link",
                    "children": [
                      {
                        "text": "Location"
                      }
                    ]
                  },
                  {
                    "text": ", "
                  },
                  {
                    "href": "https://hygraph.com/docs/api-reference/schema/field-types#json",
                    "type": "link",
                    "children": [
                      {
                        "text": "JSON"
                      }
                    ]
                  },
                  {
                    "text": ", and, "
                  },
                  {
                    "href": "https://hygraph.com/docs/api-reference/schema/field-types#rich-text",
                    "type": "link",
                    "children": [
                      {
                        "text": "RichText"
                      }
                    ]
                  },
                  {
                    "text": " scalars."
                  }
                ]
              },
              {
                "type": "paragraph",
                "children": [
                  {
                    "text": ""
                  }
                ]
              },
              {
                "type": "paragraph",
                "children": [
                  {
                    "text": "In this post we'll look at the Rich Text field. We'll take a peak at how you can query, and mutate Rich Text using the Content API."
                  }
                ]
              },
              {
                "type": "paragraph",
                "children": [
                  {
                    "text": ""
                  }
                ]
              },
              {
                "src": "https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/N3JOKsXrT9ezCU4Ba6LI",
                "type": "image",
                "title": "Screenshot 2021-03-24 at 13.00.14.png",
                "width": 2408,
                "handle": "N3JOKsXrT9ezCU4Ba6LI",
                "height": 1684,
                "children": [
                  {
                    "text": ""
                  }
                ],
                "mimeType": "image/png"
              },
              {
                "type": "paragraph",
                "children": [
                  {
                    "text": ""
                  }
                ]
              }
            ]
          }
        }
      }
    ]
  }
}

As you can see, we have an array of different node types. It's up to you to display this in your application.

You may begin by having a dictionary (or Map) of your node type renderers as key/value pairs. Slate have an example of how you can use a switch statement in JavaScript to return different tags based on the type.

const renderElement = useCallback(({ attributes, children, element }) => {
    switch (element.type) {
      case 'quote':
        return <blockquote {...attributes}>{children}</blockquote>
      case 'link':
        return (
          <a {...attributes} href={element.url}>
            {children}
          </a>
        )
      default:
        return <p {...attributes}>{children}</p>
    }
  }, [])

html

Rendering the HTML of your rich text is quite simple, but comes without much customization. Hygraph will automatically parse the Slate raw output into HTML elements you can pass straight to the DOM.

Using the query above to fetch articles, let's now fetch just the html.

{
  "data": {
    "articles": [
            {
        "content": {
          "html": "<p>Hygraphboasts an impressive collection of <a title=\"https://hygraph.com/docs/api-reference/schema/field-types\" href=\"https://hygraph.com/docs/api-reference/schema/field-types\">Field Types</a> that you can use when content modelling. These field types range from the core GraphQL scalar types, to custom <a title=\"https://hygraph.com/docs/api-reference/schema/field-types#asset\" href=\"https://hygraph.com/docs/api-reference/schema/field-types#asset\">Asset</a>, <a title=\"https://hygraph.com/docs/api-reference/schema/field-types#location\" href=\"https://hygraph.com/docs/api-reference/schema/field-types#location\">Location</a>, <a title=\"https://hygraph.com/docs/api-reference/schema/field-types#json\" href=\"https://hygraph.com/docs/api-reference/schema/field-types#json\">JSON</a>, and, <a title=\"https://hygraph.com/docs/api-reference/schema/field-types#rich-text\" href=\"https://hygraph.com/docs/api-reference/schema/field-types#rich-text\">RichText</a> scalars.</p><p></p><p>In this post we&#39;ll look at the Rich Text field. We&#39;ll take a peak at how you can query, and mutate Rich Text using the Content API.</p><p></p><img src=\"https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/N3JOKsXrT9ezCU4Ba6LI\" alt=\"Screenshot 2021-03-24 at 13.00.14.png\" title=\"Screenshot 2021-03-24 at 13.00.14.png\" width=\"2408\" height=\"1684\" /><p></p>"
        }
      }
        ]
    }
}

You can then just output this HTML directly to the page.

If you are using React, it's a little different. However, you can safely (because you know the source of truth) use dangerouslySetInnerHTML for setting HTML.

For example:

const article = {
    "content": {
        "html": "<p>Hygraph boasts an impressive collection of <a title=\"https://hygraph.com/docs/api-reference/schema/field-types\" href=\"https://hygraph.com/docs/api-reference/schema/field-types\">Field Types</a> that you can use when content modelling. These field types range from the core GraphQL scalar types, to custom <a title=\"https://hygraph.com/docs/api-reference/schema/field-types#asset\" href=\"https://hygraph.com/docs/api-reference/schema/field-types#asset\">Asset</a>, <a title=\"https://hygraph.com/docs/api-reference/schema/field-types#location\" href=\"https://hygraph.com/docs/api-reference/schema/field-types#location\">Location</a>, <a title=\"https://hygraph.com/docs/api-reference/schema/field-types#json\" href=\"https://hygraph.com/docs/api-reference/schema/field-types#json\">JSON</a>, and, <a title=\"https://hygraph.com/docs/api-reference/schema/field-types#rich-text\" href=\"https://hygraph.com/docs/api-reference/schema/field-types#rich-text\">RichText</a> scalars.</p><p></p><p>In this post we&#39;ll look at the Rich Text field. We&#39;ll take a peak at how you can query, and mutate Rich Text using the Content API.</p><p></p><img src=\"https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/N3JOKsXrT9ezCU4Ba6LI\" alt=\"Screenshot 2021-03-24 at 13.00.14.png\" title=\"Screenshot 2021-03-24 at 13.00.14.png\" width=\"2408\" height=\"1684\" /><p></p>"
    }
}


function MyComponent() {
  return <div dangerouslySetInnerHTML={article.content.html} />;
}

markdown

To present markdown on a page, you'll need a markdown parser that will convert markdown to HTML. Here are a few that come to mind;

Depending on your frontend stack, there will most likely be a markdown renderer for you.

It's important to remember that some renderers will handle the parse and transformation client side, so depending on the length of content, this could increase affect your performance metrics.

If you can, compute the HTML ahead of time, and render only HTML. You might find using the html output more performant instead.

If you opt to use MDX, you can have even more customisability than you can the raw AST. You can even inject dynamic React components based on your Markdown node types.

text

There aren't many use cases for rendering just the text other than using it for a "excerpt". This is because any links, or images will be stripped out, and you'll need to sanitize any new lines and breaks yourself before rendering into a DOM element.

For the same Rich Text we created earlier (the first two paragraphs of this article) you'll be presented with the following from the GraphQL query:

Hygraph boasts an impressive collection of \\nField Types\\n that you can use when content modelling. These field types range from the core GraphQL scalar types, to custom \\nAsset\\n, \\nLocation\\n, \\nJSON\\n, and, \\nRichText\\n scalars.\\n\\nIn this post we'll look at the Rich Text field. We'll take a peak at how you can query, and mutate Rich Text using the Content API.\\n\\n\\n

#Mutating Rich Text

Like every other content model, and field type inside Hygraph, you can also mutate data using the Mutations API.

You'll typically mutate rich text using the Mutations API if you are accepting rich text submitted by a user in your own application, or if you have built your own content editor on top of Hygraph.

However you're planning to mutate rich text, you will need to pass it to Hygraph in the format of the Slate AST nodes we described above.

Here's an example of a Mutation:

mutation createArticle($title:String, $content:RichTextAST) {
  createArticle(data: {
    title: $title,
    content: $content
  }) {
    title
    content {
      raw
    }
  }
}

... and the variables:

{
   "title":"Working with the Hygraph Rich Text field",
   "content":{
      "children":[
         {
            "type":"paragraph",
            "children":[
               {
                  "text":"Hygraph boasts an impressive collection of "
               },
               {
                  "href":"https://hygraph.com/docs/api-reference/schema/field-types",
                  "type":"link",
                  "children":[
                     {
                        "text":"Field Types"
                     }
                  ]
               },
               {
                  "text":" that you can use when content modelling. These field types range from the core GraphQL scalar types, to custom "
               },
               {
                  "href":"https://hygraph.com/docs/api-reference/schema/field-types#asset",
                  "type":"link",
                  "children":[
                     {
                        "text":"Asset"
                     }
                  ]
               },
               {
                  "text":", "
               },
               {
                  "href":"https://hygraph.com/docs/api-reference/schema/field-types#location",
                  "type":"link",
                  "children":[
                     {
                        "text":"Location"
                     }
                  ]
               },
               {
                  "text":", "
               },
               {
                  "href":"https://hygraph.com/docs/api-reference/schema/field-types#json",
                  "type":"link",
                  "children":[
                     {
                        "text":"JSON"
                     }
                  ]
               },
               {
                  "text":", and, "
               },
               {
                  "href":"https://hygraph.com/docs/api-reference/schema/field-types#rich-text",
                  "type":"link",
                  "children":[
                     {
                        "text":"RichText"
                     }
                  ]
               },
               {
                  "text":" scalars."
               }
            ]
         },
         {
            "type":"paragraph",
            "children":[
               {
                  "text":""
               }
            ]
         },
         {
            "type":"paragraph",
            "children":[
               {
                  "text":"In this post we'll look at the Rich Text field. We'll take a peak at how you can query, and mutate Rich Text using the Content API."
               }
            ]
         },
         {
            "type":"paragraph",
            "children":[
               {
                  "text":""
               }
            ]
         },
         {
            "src":"https://eu-central-1-shared-euc1-02.graphassets.com/AvHQ3RDvFSousA8iwElOKz/N3JOKsXrT9ezCU4Ba6LI",
            "type":"image",
            "title":"Screenshot 2021-03-24 at 13.00.14.png",
            "width":2408,
            "handle":"N3JOKsXrT9ezCU4Ba6LI",
            "height":1684,
            "children":[
               {
                  "text":""
               }
            ],
            "mimeType":"image/png"
         },
         {
            "type":"paragraph",
            "children":[
               {
                  "text":""
               }
            ]
         }
      ]
   }
}

Slate provides a nice editor out of the box for React you can use, slate-react. See "Installing Slate" for more on this.

Blog Author

Jamie Barton

Jamie Barton

Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.

Explore more blogs from Hygraph