Frequently Asked Questions

Product Information: Hygraph Rich Text Field

What is the Hygraph Rich Text field?

The Hygraph Rich Text field is a versatile field type used in content modeling that allows users to format paragraphs, headings, lists, and embed iframes, tables, and assets. Content saved in this field is stored as an abstract syntax tree (AST) based on Slate. This content can be queried in various formats, including HTML, Markdown, Text, and the raw AST (JSON). The Rich Text field provides flexibility for querying, displaying, and mutating content using the Content API. [Source]

How can I query content from the Hygraph Rich Text field?

You can query content from the Hygraph Rich Text field in multiple formats: raw (AST), html, markdown, and text. This allows you to fetch the content in the format best suited for your application. For example, you can use GraphQL queries to retrieve these formats for a field of type RichText. [Source]

How do I render content from the Hygraph Rich Text field?

You can render content from the Hygraph Rich Text field in several ways, depending on the format you query. If you use the raw AST, you have full control over rendering each node type in your frontend. If you use html, you can directly inject the HTML into your page. For markdown, you will need a markdown parser to convert it to HTML. The text format is best for excerpts, as it strips out formatting and media. [Source]

How can I mutate or update content in the Hygraph Rich Text field?

You can mutate or update content in the Hygraph Rich Text field using the Mutations API. When submitting rich text, you need to pass the content as a Slate AST (abstract syntax tree) object. This is useful if you are accepting rich text input from users or building a custom content editor. [Source]

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

The Hygraph Rich Text field is ideal for managing complex content structures such as blog posts, articles, documentation, and course content. It allows editors to embed assets, format text, and structure content flexibly, making it suitable for a wide range of digital publishing and content management scenarios. [Source]

How does the Hygraph Rich Text field support embedding media and assets?

The Rich Text field in Hygraph allows editors to embed assets such as images, iframes, and tables directly within the content. This provides flexibility for creating visually rich and interactive content experiences. [Source]

What are the available output formats for the Hygraph Rich Text field?

The Hygraph Rich Text field supports output in four formats: raw (AST), html, markdown, and text. This allows developers to choose the most suitable format for their frontend or integration needs. [Source]

How can I use the Hygraph Rich Text field with React?

You can use the Hygraph Rich Text field with React by leveraging the slate-react package, which provides a rich text editor and rendering capabilities. You can also use the html output and render it using dangerouslySetInnerHTML in React components. For more details, see the Slate documentation and Hygraph's blog. [Source]

Features & Capabilities

What features does Hygraph offer beyond the Rich Text field?

Hygraph offers a wide range of features, including a GraphQL-native architecture, content federation, scalability, and support for multiple field types such as Asset, Location, JSON, and Rich Text. It also provides integrations with popular tools and platforms, robust security and compliance, and an intuitive user interface for both technical and non-technical users. [Source]

Does Hygraph support integrations with other platforms?

Yes, Hygraph supports a wide range of integrations, including Netlify, Vercel, BigCommerce, commercetools, Shopify, Lokalise, Crowdin, EasyTranslate, Smartling, Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot, Ninetailed, AltText.ai, Adminix, and Plasmic. For a full list, visit the Hygraph Integrations page.

Does Hygraph provide an API for content management?

Yes, Hygraph provides a powerful GraphQL API that allows you to fetch and manage content efficiently. You can learn more about it at the Hygraph API Reference.

Technical Requirements & Documentation

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation for Hygraph is available at https://hygraph.com/docs. It covers everything you need to know about building and deploying projects with Hygraph.

What is the Hygraph Rich Text Renderer?

The Hygraph Rich Text Renderer is a tool that allows technical users to render documents and content items using Rich Text in their applications easily. [Source]

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 Compliant, ISO 27001 Certified, and GDPR compliant. These certifications ensure the highest levels of data protection and security for users. For more details, visit the Hygraph Security Features page.

Support & Implementation

What support is available for Hygraph users?

Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to detailed documentation, video tutorials, and a community Slack channel. For more details, visit the Hygraph Contact Page.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For more details, visit the Hygraph pricing page.

Use Cases & Customer Success

Who can benefit from using Hygraph?

Hygraph is designed for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises looking to modernize their technologies, and brands aiming to scale across geographies or re-platform from traditional solutions. [Source]

What are some real-world success stories of Hygraph customers?

Hygraph customers have achieved significant results, such as Komax achieving a 3X faster time to market, Autoweb seeing a 20% increase in website monetization, and Samsung improving customer engagement with a scalable platform. Dr. Oetker enhanced their digital experience using MACH architecture. More case studies are available on the Hygraph Case Studies page.

Pain Points & Solutions

What problems does Hygraph solve for its users?

Hygraph addresses operational pains (such as reliance on developers for content updates, outdated tech stacks, and clunky content creation experiences), financial pains (high operational costs, slow speed-to-market, expensive maintenance, and scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, and cache problems). [Source]

How does Hygraph differentiate itself in solving these pain points?

Hygraph differentiates itself by offering a GraphQL-native architecture, content federation, and scalability. It empowers non-technical users, modernizes legacy systems, ensures consistent branding across regions, and streamlines workflows to reduce costs and speed up project delivery. [Source]

Performance & Metrics

What performance benefits does Hygraph provide?

Hygraph emphasizes optimized content delivery performance, which directly impacts user experience, engagement, and search engine rankings. Rapid content distribution and responsiveness help reduce bounce rates and increase conversions. [Source]

What KPIs and metrics are associated with Hygraph's solutions?

Key KPIs include time saved on content updates, system uptime, consistency in content across regions, user satisfaction scores, reduction in operational costs, time to market for new products, maintenance costs, scalability metrics, and performance during peak usage times. For more details, see the Hygraph blog on CMS KPIs.

Webinar Event: How to Avoid Personalization Tech Traps

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

Written by Jamie 

Mar 23, 2021
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-edito

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