Frequently Asked Questions

Product Information: Hygraph React Rich Text Renderer

What is the Hygraph React Rich Text Renderer?

The Hygraph React Rich Text Renderer is an open-source package that allows developers to easily render rich text content from Hygraph in React applications. It converts rich text JSON objects into HTML and supports custom elements and styling. You can find the package on GitHub and NPM.

How do I install the Hygraph React Rich Text Renderer?

You can install the package using npm or Yarn:
npm i @graphcms/rich-text-react-renderer
yarn add @graphcms/rich-text-react-renderer

How do I use the Hygraph React Rich Text Renderer in my application?

To use the renderer, import the RichText component and pass the content array returned from the Hygraph API. For example:
import { RichText } from '@graphcms/rich-text-react-renderer';
const App = () => <RichText content={content} />;

For more details, see the documentation.

Can I customize the rendered elements with my own components?

Yes, you can pass a renderers prop to the RichText component to use your own components and styling for specific elements. For example, you can customize headings, bold text, and links. See the full list of customizable elements here.

Is the Hygraph React Rich Text Renderer compatible with TypeScript?

Yes, Hygraph provides the @graphcms/rich-text-types package with TypeScript definitions for the Rich Text field type. This allows you to use types for elements and props in your application for better type safety.

Can I integrate the Hygraph React Rich Text Renderer with Next.js?

Yes, you can integrate the renderer with Next.js or Gatsby. For example, you can use custom link components like NextLink for internal navigation. See the integration example in the blog post.

Is the Hygraph React Rich Text Renderer open-source?

Yes, the project is open-source. Contributions are welcome, including bug fixes, feature requests, and improvements. You can contribute via GitHub.

Features & Capabilities

What features does Hygraph offer?

Hygraph offers a GraphQL-native architecture, content federation, scalability, and integrations with popular platforms such as Netlify, Vercel, Shopify, AWS S3, Cloudinary, and more. It also provides a powerful GraphQL API for efficient content management. Learn more at the Hygraph Features page.

Does Hygraph support integrations with other platforms?

Yes, Hygraph supports integrations with hosting and deployment platforms (Netlify, Vercel), eCommerce (Shopify, BigCommerce, commercetools), localization (Lokalise, Crowdin, EasyTranslate, Smartling), digital asset management (Aprimo, AWS S3, Bynder, Cloudinary, Mux, Scaleflex Filerobot), personalization (Ninetailed), AI (AltText.ai), and more. For a full list, visit Hygraph Integrations.

Does Hygraph provide an API for content management?

Yes, Hygraph provides a powerful GraphQL API for fetching and managing content. You can learn more about the API at the Hygraph API Reference.

Where can I find technical documentation for Hygraph?

Comprehensive technical documentation is available at Hygraph Documentation, covering everything you need to know about building and deploying projects with Hygraph.

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 pricing page.

Use Cases & Benefits

Who can benefit from using Hygraph?

Hygraph is ideal 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: ICPVersion2_Hailey.pdf

What business impact can customers expect from using Hygraph?

Customers can expect significant business impacts, including time-saving through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market for digital products, and enhanced customer experience through consistent and scalable content delivery. Source: ICPVersion2_Hailey.pdf

What industries are represented in Hygraph's case studies?

Hygraph's case studies cover industries such as food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. For more details, visit Hygraph Case Studies.

Can you share specific customer success stories?

Yes. For example, Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with a scalable platform, and Dr. Oetker enhanced their digital experience using MACH architecture. Explore more success stories here.

Pain Points & Solutions

What problems does Hygraph solve?

Hygraph solves problems such as reducing reliance on developers for content updates, modernizing legacy tech stacks, addressing conflicting needs of global teams, and improving user experience for content creation. Financially, it lowers operational costs, speeds up time-to-market, and supports scalability. Technically, it simplifies development workflows, streamlines query management, and resolves cache and integration challenges. Source: Hygraph Product Page

How does Hygraph address operational, financial, and technical pain points?

Operational: Empowers non-technical users with an intuitive interface, modernizes outdated systems, and ensures consistent branding across regions.
Financial: Streamlines workflows, reduces developer dependency, accelerates project delivery, and minimizes maintenance costs.
Technical: Simplifies development, streamlines query management, and resolves cache and OpenID integration issues. Source: Hygraph Product Page

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

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

Technical Requirements & Getting Started

How easy is it to get started with Hygraph?

Hygraph is designed for ease of use, even for non-technical users. You can sign up for a free-forever account and access resources like documentation, video tutorials, and onboarding guides. For example, Top Villas launched a new project in just 2 months. Learn more at Hygraph Documentation.

What training and technical support is available for Hygraph?

Hygraph offers 24/7 support via chat, email, and phone, onboarding sessions for enterprise customers, training resources (video tutorials, documentation, webinars), and Customer Success Managers for expert guidance. For more details, visit the Hygraph Contact Page.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph provides 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 for additional support. Source: Hygraph Contact Page

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 enterprise-grade security and data protection. For more details, visit the Hygraph Security Features page.

How does Hygraph ensure data security?

Hygraph provides features such as SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. For more details, visit the Hygraph Security Features page.

Customer Proof & Case Studies

Who are some of Hygraph's customers?

Hygraph is trusted by companies such as Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. For more details, visit Hygraph Case Studies.

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

Customers have praised Hygraph for its ease of use and intuitive interface, noting that it is 'super easy to set up and use' and that 'even non-technical users can start using it right away.' The user interface is described as logical and user-friendly. Source: Hygraph Try Headless CMS

Competition & Comparison

How does Hygraph differentiate itself from other CMS platforms?

Hygraph differentiates itself with its GraphQL-native architecture, content federation, scalability, and ease of use for both technical and non-technical users. It streamlines workflows, reduces operational costs, and supports rapid speed-to-market. For more details, visit the product page.

Velocity at Scale: Join the Launch of Hygraph’s Latest AI Innovations

Introducing the Hygraph React Rich Text Renderer

Render Hygraph documents using Rich Text in your application easily
João Pedro Schmitz

Written by João 

May 25, 2021
GraphCMS Rich Text Renderer

We've often come across community members working with the Rich Text field in Hygraph and looking for a simple solution to render their content. Especially when working with React. There wasn't a single go-to solution for this. So we built one!

The project is open-source, so if you're keen to contribute - all types of contributions are welcome, such as bug fixes, issues, or feature requests. You can check out the repo on GitHub or NPM.

#Packages

Currently, there are two packages available.

#Getting started

You can get it on npm or Yarn.

# npm
npm i @graphcms/rich-text-react-renderer
# Yarn
yarn add @graphcms/rich-text-react-renderer

#Usage

To render the content on your application, you'll need to provide the array of elements returned from the Hygraph API to the RichText component.

import { RichText } from '@graphcms/rich-text-react-renderer';
const content = {
children: [
{
type: 'paragraph',
children: [
{
bold: true,
text: 'Hello World!',
},
],
},
],
};
const App = () => {
return <RichText content={content} />;
};

The content from the example above will render:

<p>
<b>Hello world!</b>
</p>

Custom elements

By default, the elements won't have any styling, despite the IFrame, which we designed to be responsive. But if you have, for example, a design system and want to use your components with styling, you can pass a renderers prop to the RichText component. Let's see an example:

import { RichText } from '@graphcms/rich-text-react-renderer';
const App = () => {
return (
<div>
<RichText
content={content}
renderers={{
h1: ({ children }) => <h1 className="text-white">{children}</h1>,
bold: ({ children }) => <strong>{children}</strong>,
}}
/>
</div>
);
};

You can find the full list of elements you can customize in this link, alongside the props available for each of them.

TypeScript

If you are using TypeScript in your project, we highly recommend you install the @graphcms/rich-text-types package. It contains types for the elements, alongside the props accepted by each of them. You can use them in your application to create custom components.

Integrating with Next.js

The best part about having custom elements support is that you can integrate it with Next.js or Gatsby, for example. The code below shows a custom link element that uses the NextLink component for internal links.

import Link from 'next/link';
import { RichText } from '@graphcms/rich-text-react-renderer';
const content = {
children: [
{
type: 'paragraph',
children: [
{
bold: true,
text: 'Hello World!',
},
],
},
],
};
const App = () => {
return (
<RichText
content={content}
renderers={{
a: ({ children, openInNewTab, href, rel, ...rest }) => {
if (href.match(/^https?:\/\/|^\/\//i)) {
return (
<a
href={href}
target={openInNewTab ? '_blank' : '_self'}
rel={rel || 'noopener noreferrer'}
{...rest}
>
{children}
</a>
);
}
return (
<Link href={href}>
<a {...rest}>{children}</a>
</Link>
);
},
}}
/>
);
};

Take it for a spin, and let us know how it goes. We're keen to gather your feedback, or even better, contributions on improving it for everyone.

Blog Author

João Pedro Schmitz

João Pedro Schmitz

Front-End Engineer

Front-End Engineer in love with React. Learning every day.

Share with others

Sign up for our newsletter!

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