Frequently Asked Questions

Product Information: Rich Text Renderer & JavaScript Support

What is the Hygraph Rich Text HTML Renderer?

The Hygraph Rich Text HTML Renderer is an official package that allows developers to render Rich Text content in any JavaScript project. It extends the original React package and supports the same API, enabling easy integration with frameworks like Vue and Svelte. For more details, see the GitHub documentation and NPM package.

How do I install and use the Rich Text HTML Renderer in my JavaScript project?

You can install the package using npm (npm i @graphcms/rich-text-html-renderer) or Yarn (yarn add @graphcms/rich-text-html-renderer). Import the astToHtmlString function and pass your Rich Text content as an argument to output an HTML string. The package includes built-in TypeScript declarations and supports custom Models and Assets. Example usage and documentation are available on GitHub.

Which JavaScript frameworks are supported by the Rich Text HTML Renderer?

The Rich Text HTML Renderer supports any JavaScript project, including frameworks such as React, Vue, and Svelte. Official examples for Vue and Svelte are available on GitHub (Vue) and GitHub (Svelte).

Does the Rich Text HTML Renderer support TypeScript?

Yes, the package contains built-in TypeScript declarations, so there is no need to install a separate package for TypeScript support.

Where can I find documentation and examples for the Rich Text HTML Renderer?

Documentation and examples for the Rich Text HTML Renderer are available on GitHub and NPM. Examples for Vue and Svelte are also provided on GitHub.

Features & Capabilities

What are the key features of Hygraph?

Hygraph offers a GraphQL-native architecture, content federation, scalability, and a wide range of integrations (including Netlify, Vercel, Shopify, AWS S3, Cloudinary, and more). It provides an intuitive interface praised for ease of use, supports rapid content delivery, and includes enterprise-grade security and compliance features. Learn more at the Hygraph Features page.

What integrations does Hygraph support?

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

Does Hygraph provide an API for content management?

Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. More details are available in the Hygraph API Reference.

How does Hygraph handle rich text content in React and JavaScript applications?

Hygraph provides a Rich Text React Renderer and a Rich Text HTML Renderer for JavaScript projects. These packages convert rich text JSON objects into HTML, allowing easy customization and display of dynamic content. The React package has over 12,000 monthly downloads. For implementation details, see the React Renderer blog post and GitHub repository.

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 full 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 information, visit 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/program managers, agencies, solution partners, and technology partners. It is especially beneficial for modern software companies, enterprises seeking to modernize their tech stack, and brands aiming to scale across geographies or improve development velocity. Source: ICPVersion2_Hailey.pdf

What business impact can customers expect from using Hygraph?

Customers can expect time-saving through streamlined workflows, ease of use with an intuitive interface, faster speed-to-market, and enhanced customer experience via scalable content delivery. These benefits help businesses modernize their tech stack and achieve operational efficiency. Source: ICPVersion2_Hailey.pdf

What industries are represented in Hygraph's case studies?

Hygraph's case studies cover industries such as Food and Beverage (Dr. Oetker), Consumer Electronics (Samsung), Automotive (AutoWeb), Healthcare (Vision Healthcare), Travel and Hospitality (HolidayCheck), Media and Publishing, eCommerce, SaaS (Bellhop), Marketplace, Education Technology, and Wellness and Fitness. See more at the Hygraph Case Studies page.

Can you share specific customer success stories using Hygraph?

Yes. 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. More success stories are available on the Hygraph product page.

Pain Points & Solutions

What problems does Hygraph solve?

Hygraph solves operational pains (reliance on developers for content updates, outdated tech stacks, conflicting needs from global teams, clunky user experiences), financial pains (high operational costs, slow speed-to-market, expensive maintenance, scalability challenges), and technical pains (boilerplate code, overwhelming queries, evolving schemas, cache problems, OpenID integration challenges). For more details, visit the Hygraph product page.

How does Hygraph address these pain points?

Hygraph provides an intuitive interface for non-technical users, modernizes legacy tech stacks with its GraphQL-native architecture, ensures consistent branding via content federation, streamlines workflows to reduce costs, accelerates speed-to-market, and simplifies development with tools for query management and schema evolution. For more details, see the Hygraph product page.

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

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

Technical Requirements & Documentation

Where can I find technical documentation for Hygraph?

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

How easy is it to get started with Hygraph?

Hygraph is designed for easy onboarding, even for non-technical users. For example, Top Villas launched a new project in just 2 months. Users can sign up for a free account and access documentation, video tutorials, and onboarding guides. Learn more at the Hygraph Documentation page.

Support & Implementation

What customer support does Hygraph offer?

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

What training and technical support is available for new customers?

Hygraph offers onboarding sessions for enterprise customers, training resources such as video tutorials, documentation, webinars, and access to Customer Success Managers for expert guidance. For more details, visit the Hygraph Contact 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 and logos, visit the Hygraph Case Studies page.

Performance & Optimization

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 helps reduce bounce rates and increase conversions. For more details, visit this page.

Blog & Community

Where can I find the Hygraph blog and latest updates?

The Hygraph Blog provides the latest updates, developer tutorials, and essential guides to content modeling. Visit the Hygraph Blog for news and insights.

How can I stay informed about Hygraph releases and industry news?

You can sign up for the Hygraph newsletter to be the first to know about releases and industry news and insights. The sign-up form is available on the blog and product update pages.

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

Announcing JavaScript Support for our Rich Text Renderer

We're pleased to announce we have expanded our Rich Text Renderer to include full support for any JavaScript project.
João Pedro Schmitz

Written by João 

Apr 08, 2022
javascript-support-rich-text-renderer

Last year we released the official Rich Text Renderer for React, which enabled Rich Text content to be easily rendered on React applications. Today, the package has more than 12k monthly downloads.


As our community started to grow, we've heard more and more community members asking for support for other JavaScript frameworks, such as Vue and Svelte.


Today, we are excited to announce the Rich Text HTML Renderer! This is an extension of the original React package, including the same API support. You can check out the documentation on GitHub or NPM.


With this new official package, our growing community of developers can render Rich Text content on any JavaScript project.


We also have two new examples demonstrating how to use the package with Vue and Svelte.


#Getting Started

The easiest way to get started is by installing the package with npm or Yarn:


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

On your application, you can import the astToHtmlString function, which receives the content as an argument, and outputs an HTML string based on it.

import { astToHtmlString } from '@graphcms/rich-text-html-renderer';
const content = {
children: [
{
type: 'paragraph',
children: [
{
bold: true,
text: 'Hello World!',
},
],
},
],
};
const html = astToHtmlString({
content,
});

This example will output the following HTML:

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

The package contains built-in TypeScript declarations, so there’s no need to install a separate package for that! It also supports rendering custom Models and Assets, so you won’t be limited at all!


Take it for a spin, and let us know how it goes. We're keen to gather your feedback on our community, or, even better, offer 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.