Frequently Asked Questions

Rich Text Embeds & Editor Functionality

What are Rich Text Embeds in Hygraph?

Rich Text Embeds in Hygraph allow you to embed other content entries directly into your Rich Text fields. You can choose between Link, Inline, and Block embed types, enabling flexible content modeling and richer digital experiences. For more details, watch the Rich Text Editor Embeds Video.

What types of Rich Text embeds does Hygraph support?

Hygraph supports three types of Rich Text embeds: Link (embed a hyperlink or reference another entry), Inline (embed content within a paragraph), and Block (embed content as a root node, outside of paragraphs). Source: Working with Rich Text Embeds Blog.

How do I enable and configure embeds in a Rich Text field?

To enable embeds, edit your Rich Text field in the model settings and select which content models should be embeddable. Note: This setting is permanent and cannot be changed after saving. Source: Field Configuration Docs.

What formats does the Rich Text field support in Hygraph?

The Rich Text field in Hygraph supports .raw, .HTML, .markdown, .text, and .JSON formats when embeds are enabled. Source: Hygraph Features.

How can I embed assets into Rich Text fields?

You can embed assets into Rich Text fields using Hygraph's asset upload API. For step-by-step instructions, see the Embedded types documentation.

How do I render Rich Text content with embeds in my frontend?

Hygraph provides libraries such as Rich Text HTML Renderer and Rich Text React Renderer to help transform the AST to HTML or React components. Guides are available for React, Svelte, and Vue integrations. Source: Working with Rich Text Embeds Blog.

What is the functionality of the Rich Text editor in Hygraph?

Hygraph's Rich Text editor provides flexibility for creating, editing, and manipulating content entries with text and images. It supports link, inline, and block embeds, allowing editors to add existing content from the Hygraph project. For a visual walkthrough, watch the Rich Text Editor Embeds Video.

Features & Capabilities

What features does Hygraph offer?

Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. Key features include rich text editing with embeds, integrations with popular platforms, enterprise-grade security, and robust API access. Source: Hygraph Features.

What integrations are available with Hygraph?

Hygraph integrates with platforms such as Netlify, Vercel, BigCommerce, Shopify, Lokalise, Crowdin, 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?

Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. Learn more at the Hygraph API Reference.

Is technical documentation available for Hygraph?

Comprehensive technical documentation is available for Hygraph, covering setup, API usage, integrations, and advanced features. Access it at the Hygraph Documentation.

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 details, visit the Hygraph Pricing page.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. It offers features like SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more, see the Hygraph Security Features page.

Use Cases & Benefits

Who can benefit from using Hygraph?

Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, solution partners, and technology partners. Companies modernizing their tech stack, scaling across geographies, or seeking improved development velocity benefit most. Source: ICPVersion2_Hailey.pdf.

What business impact can customers expect from Hygraph?

Customers can expect time savings, faster speed-to-market, lower operational costs, and enhanced customer experience through scalable and consistent content delivery. Source: ICPVersion2_Hailey.pdf.

What industries are represented in Hygraph's case studies?

Hygraph's case studies span food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. Source: Case Studies.

Can you share specific customer success stories?

Yes. Komax achieved 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement, and Dr. Oetker enhanced their digital experience using MACH architecture. More stories: Customer Stories.

How long does it take to implement Hygraph and how easy is it to start?

Hygraph is designed for quick implementation. For example, Top Villas launched a new project in just 2 months. Non-technical users can get started easily by signing up for a free account and using onboarding resources. Source: Documentation, Top Villas Case Study.

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

Customers praise Hygraph for its intuitive interface and ease of use, noting that even non-technical users can start using it right away. The UI is described as logical and user-friendly. Source: Try Headless CMS.

Pain Points & Solutions

What problems does Hygraph solve?

Hygraph solves problems such as reliance on developers for content updates, outdated tech stacks, conflicting needs of global teams, clunky user experiences, high operational costs, slow speed-to-market, expensive maintenance, limited integration capabilities, scalability challenges, boilerplate code, overwhelming queries, evolving schemas, cache problems, and OpenID integration challenges. Source: Product Page.

How does Hygraph address pain points for different personas?

Hygraph tailors solutions for developers (simplifies code and query management), content creators/project managers (intuitive interface for independent updates), and business stakeholders (reduces costs, supports scalability, accelerates speed-to-market). Source: Product Page.

What KPIs and metrics are associated with the pain points Hygraph solves?

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

Support & Implementation

What support and training does Hygraph offer?

Hygraph provides 24/7 support via chat, email, and phone, onboarding sessions for enterprise customers, training resources (video tutorials, documentation, webinars), and access to Customer Success Managers. Source: Contact Page.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph offers 24/7 support for maintenance, upgrades, and troubleshooting. Enterprise customers receive dedicated onboarding and expert guidance, and all users can access documentation and the community Slack channel. Source: Contact Page.

Product Performance

How does Hygraph optimize content delivery performance?

Hygraph emphasizes rapid content distribution and responsiveness, which improves user experience, engagement, and search engine rankings. Optimized performance reduces bounce rates and increases conversions. Learn more at Headless CMS Checklist.

Customer Proof

Who are some of Hygraph's customers?

Hygraph is trusted by Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See more at Case Studies.

Competition & Comparison

Why choose Hygraph over other CMS solutions?

Hygraph stands out with its GraphQL-native architecture, content federation, scalability, and cost efficiency. It empowers businesses to create impactful digital experiences while reducing operational costs and improving efficiency. For more, visit the Product Page.

Webinar Event: How to Avoid Personalization Tech Traps

Working with Rich Text Embeds

In this post we'll explore working with the Rich Text embed types Link, Inline, and Block.
Jamie Barton

Written by Jamie 

Jun 10, 2022
working with rich text embeds in hygraph

To follow along you'll need a project with a model, and a Rich Text field. Here's a preview of my project before we get started with enabling embeds:

Page model

Next if you edit the Rich Text field it's here you can enable embeds, and select the other content models you want to allow to be embedded.

Enable embeds

Now with embeds enable, we have 3 ways to embed these when editing content:

Rich Text Editor

If we first select the Link we can choose to use a regular href, or by selecting an existing content entry.

Embed Link Entry

If you saved this content and queried for the AST using the Hygraph Content API you'd get an AST that looks like:

"children": [
{
"type": "paragraph",
"children": [
{
"text": "Did you know you can embed "
},
{
"type": "link",
"nodeId": "ckz5njfa8ij7m0b05xxqd1ap2",
"children": [
{
"text": "link"
}
],
"nodeType": "Page"
},
{
"text": "?"
}
]
}
]

We can see from the response we have an array of children that contain objects of nodes that either contain content, or further children. We can see the second child is of the type link. We can also see this is of the nodeType Page, and we have the nodeId.

Right now all we now about the embedded link node is that it's a Page. We'll need to extend our GraphQL query to use inline fragments to fetch the references:

{
page(where:{ id: "..." }) {
content {
json
references {
... on Asset {
url
width
height
}
... on Page {
id
title
}
}
}
}
}

Now we should see in the response we get a little bit more about our Page entry:

{
"data": {
"page": {
"content": {
"json": {
"children": [
{
"type": "paragraph",
"children": [
{
"text": "Did you know you can embed "
},
{
"type": "link",
"nodeId": "ckz5njfa8ij7m0b05xxqd1ap2",
"children": [
{
"text": "link"
}
],
"nodeType": "Page"
},
{
"text": "?"
}
]
}
]
},
"references": [
{
"id": "ckz5njfa8ij7m0b05xxqd1ap2",
"title": "Creating pages"
}
]
}
}
}
}

Now if we want to embed a Block entry, we can select this from the Embed dropdown. Block embeds appear in the AST as a root node, so they won't be embedded inside of a paragraph for example.

Embed Block Entry

Finally we can embed an Inline entry which invokes the same behavior as above to select an entry, but will appear inside the AST of the child node. For example, inside the paragraph.

Here's what the final Rich Text editor looks like with these 3 types of embeds added:

Rich Text Editor with Embeds

Now with all of this added you can query for the content and references to then render on your site. We have several libraries that will help transform the AST to HTML.

We also have some guides on working with the above libraries and your frontend frameworks:

Hope this has given you a quick look at how you can use Rich Text Embeds to bring a whole new dimension to your content by embedding other content entries.

If you'd like to see a project using embeds you'll want to check out our Docs Starter. You can see below we use the Rich Text React Renderer to show assets, and links to other pages (as block embeds):

Docs starter preview

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.