What is the Hygraph Rich Text field?

The Hygraph Rich Text field is a flexible content field type that allows users to create and manage richly formatted content, including paragraphs, headings, lists, embedded iframes, tables, and assets. It stores content as an abstract syntax tree (AST) based on Slate, enabling advanced querying and rendering options. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field

What formats can I query from the Rich Text field?

You can query the Rich Text field in four formats: raw (Slate AST JSON), HTML, Markdown, and plain text. This flexibility allows you to choose the best format for your application's needs. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field

How does the Rich Text field store content?

Content in the Rich Text field is stored as an abstract syntax tree (AST) based on Slate. This structure allows for advanced formatting and easy transformation into different output formats. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field

What types of content can I create with the Rich Text field?

You can create paragraphs, headings, lists, embed iframes, tables, and assets using the Rich Text field's editor. This enables rich content modeling for a variety of use cases. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field

How do I query Rich Text content using GraphQL?

You can use the Content API to query Rich Text fields in any or all supported formats (raw, html, markdown, text). For example, you can request content { raw html markdown text } in your GraphQL query. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#querying-rich-text

How can I render Rich Text content in my application?

You can render Rich Text content by choosing the format that best fits your frontend. Use the raw AST for full customization, HTML for direct DOM rendering, Markdown with a parser, or plain text for excerpts. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#rendering-rich-text

What is the benefit of using the raw AST format?

The raw AST format gives you complete control over how content is rendered, allowing you to map node types to custom components or HTML tags. This is ideal for advanced use cases and custom presentation logic. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#rendering-rich-text

How do I mutate Rich Text content in Hygraph?

You can mutate Rich Text content using the Mutations API by passing the content as a Slate AST JSON object. This is useful for custom editors or user-submitted content. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#mutating-rich-text

What are Slate nodes and how do they relate to Rich Text in Hygraph?

Slate nodes are the building blocks of the Rich Text AST. They include Editor (root), Element (container), and Text (leaf) nodes, allowing for complex document structures. Hygraph's Rich Text field uses this model for flexibility. Source: https://docs.slatejs.org/concepts/02-nodes

Can I use the Rich Text field for excerpts or plain text output?

Yes, you can query the text format of the Rich Text field for use cases like excerpts. Note that links and images will be stripped out, and you may need to sanitize new lines and breaks. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#rendering-rich-text

How do I render HTML from the Rich Text field in React?

You can use the dangerouslySetInnerHTML property in React to render HTML output from the Rich Text field, as the content source is trusted. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#rendering-rich-text

What markdown parsers are recommended for rendering Rich Text markdown output?

Recommended markdown parsers include Showdown, markdown-to-jsx, marked, and MDX. Choose a parser that fits your frontend stack for best results. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#rendering-rich-text

How do I pass content to Hygraph when mutating Rich Text?

When mutating Rich Text, you must pass the content as a Slate AST JSON object, matching the structure expected by the API. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#mutating-rich-text

Can I build a custom editor on top of the Hygraph Rich Text field?

Yes, you can build a custom editor by leveraging the Slate AST structure and the Mutations API to submit content to Hygraph. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#mutating-rich-text

Where can I find more technical documentation on the Rich Text field?

Technical documentation for the Rich Text field and other field types is available at the Hygraph API Reference: https://hygraph.com/docs/api-reference/schema/field-types#rich-text

What are some best practices for optimizing Rich Text performance?

For optimal performance, consider precomputing HTML from markdown or raw AST on the server side, and use the HTML output for rendering. This reduces client-side processing and improves load times. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field#rendering-rich-text

Is the Rich Text field suitable for non-technical users?

Yes, the Rich Text field provides an intuitive editor interface, making it easy for both technical and non-technical users to create and format content. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field

Can I embed assets and media in the Rich Text field?

Yes, you can embed assets such as images and iframes directly within the Rich Text field, enhancing the richness of your content. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field

What is the difference between the Rich Text field and other field types in Hygraph?

The Rich Text field is designed for complex, formatted content, while other field types (such as Asset, Location, JSON) are for more specific data structures. The Rich Text field supports advanced formatting and embedding. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field

How do I get started with the Rich Text field in Hygraph?

To get started, add a Rich Text field to your content model, use the editor to create content, and query or mutate the field using the Content API. Refer to the official documentation for step-by-step guides. Source: https://hygraph.com/blog/working-with-the-hygraph-rich-text-field

What APIs does Hygraph provide?

Hygraph offers multiple APIs, including the Content API (read & write), High Performance Content API (low latency, high throughput), MCP Server API (for AI assistants), Asset Upload API, and Management API. Source: https://hygraph.com/docs/api-reference

What integrations are available with Hygraph?

Hygraph integrates with popular Digital Asset Management (DAM) systems like Aprimo, AWS S3, Bynder, Cloudinary, Imgix, Mux, and Scaleflex Filerobot. It also supports Adminix, Plasmic, custom integrations via SDK, and a marketplace of pre-built apps. Source: https://hygraph.com/docs/integrations

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation is available at https://hygraph.com/docs, covering APIs, schema components, references, webhooks, and AI integrations.

What performance benefits does Hygraph offer?

Hygraph delivers high-performance endpoints for low latency and high read-throughput, actively measures GraphQL API performance, and provides best practices for optimization. Source: https://hygraph.com/blog/improvements-to-high-performance-endpoint

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant (since August 3rd, 2022), ISO 27001 certified, and GDPR compliant. It offers enterprise-grade security features like granular permissions, audit logs, SSO, encryption, and regular backups. Source: https://hygraph.com/features/secure

How easy is it to implement Hygraph?

Implementation time varies by project. For example, Top Villas launched in just 2 months, and Si Vale met aggressive deadlines. Hygraph offers a free API playground, developer account, structured onboarding, and extensive documentation. Source: https://hygraph.com/case-studies/top-villas-case-study#why-hygraph

What support resources are available for Hygraph users?

Hygraph provides webinars, live streams, how-to videos, detailed guides, and a community Slack channel for support and knowledge sharing. Source: https://hygraph.com/docs

What pricing plans does Hygraph offer?

Hygraph offers three main plans: Hobby (free forever), Growth (from $199/month), and Enterprise (custom pricing). Each plan includes different features and support levels. Source: https://hygraph.com/pricing

What features are included in the Hobby plan?

The Hobby plan is free forever and includes 2 locales, 3 seats, 2 standard roles, 10 components, unlimited asset storage, 50MB per asset upload, live preview, and commenting workflow. Source: https://hygraph.com/pricing

What features are included in the Growth plan?

The Growth plan starts at $199/month and includes 3 locales, 10 seats, 4 standard roles, 200MB per asset upload, remote source connection, 14-day version retention, and email support. Source: https://hygraph.com/pricing

What features are included in the Enterprise plan?

The Enterprise plan offers custom limits, version retention for a year, scheduled publishing, dedicated infrastructure, global CDN, SSO, multitenancy, instant backup recovery, custom workflows, and dedicated support. Source: https://hygraph.com/pricing

Hygraph is used by companies like Samsung, Dr. Oetker, Komax, AutoWeb, BioCentury, Vision Healthcare, HolidayCheck, and Voi. Source: https://hygraph.com/case-studies

What industries are represented in Hygraph's case studies?

Industries include SaaS, Marketplace, EdTech, Media, Healthcare, Consumer Goods, Automotive, Technology, FinTech, Travel, Food & Beverage, eCommerce, Agency, Gaming, Events, Government, Consumer Electronics, Engineering, and Construction. Source: https://hygraph.com/case-studies

What business impact can customers expect from using Hygraph?

Customers report improved operational efficiency, faster speed-to-market, cost savings, enhanced scalability, and better customer engagement. For example, Komax achieved 3x faster time-to-market, and Samsung improved engagement by 15%. Source: https://hygraph.com/case-studies

Can you share specific customer success stories?

Yes. Samsung built a scalable API-first app, Dr. Oetker enhanced digital experience, Komax managed 20,000+ product variations, AutoWeb increased monetization by 20%, and Voi scaled content across 12 countries. Source: https://hygraph.com/case-studies

What pain points does Hygraph solve for its customers?

Hygraph addresses developer dependency, legacy tech stack modernization, content inconsistency, workflow challenges, high operational costs, slow speed-to-market, scalability issues, schema evolution complexity, integration difficulties, performance bottlenecks, and localization challenges. Source: https://hygraph.com/case-studies

How does Hygraph differentiate itself from other CMS platforms?

Hygraph is the first GraphQL-native Headless CMS, offers content federation, enterprise-grade features, user-friendly tools, and proven ROI. It ranked 2nd out of 102 Headless CMSs in G2 Summer 2025 and is recognized for ease of implementation. Source: https://hygraph.com/case-studies

Who is the target audience for Hygraph?

Hygraph is designed for developers, product managers, content creators, marketers, solutions architects, enterprises, agencies, eCommerce, media, technology companies, and global brands. Source: https://hygraph.com/case-studies

What feedback have customers given about Hygraph's ease of use?

Customers praise Hygraph for its intuitive UI, ease of setup, custom app integration, and the ability for non-technical users to manage content independently. Some users note a learning curve for complex use cases. Source: https://hygraph.com/try-headless-cms

When was this page last updated?

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

Working with the Hygraph 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 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.

Frequently Asked Questions

Rich Text Field: Features & Capabilities