Frequently Asked Questions

Rich Text Editor Features & Capabilities

What is the Hygraph Rich Text editor and what can it do?

The Hygraph Rich Text editor is an out-of-the-box content editor tool available for all Hygraph projects. It provides flexibility for creating, editing, and manipulating content entries that include text and images. The editor supports formatting options such as headings, bold, italic, underline, links, block quotes, inline code, assets, lists, code blocks, iframes, classes, tables, subscript, superscript, fullscreen mode, and content embeds. Learn more.

What formatting and embedding options are available in the Rich Text editor?

The Rich Text editor offers a wide range of formatting options, including text styles (headings, bold, italic, underline), links (to URLs or internal entries), block quotes, inline code, bulleted and numbered lists, code blocks, tables, subscript, superscript, and fullscreen editing. You can also embed assets (such as images), iframes, and content from other models using inline or block embeds. These features allow for flexible and structured content creation. See full list.

How can I configure and customize the Rich Text editor in Hygraph?

When adding a Rich Text field to your schema, you can configure settings such as display name, API ID, description, embedding, multiple values, localization, formatting options, required/unique validation, initial value, conditional visibility, and field visibility (read/write, read only, hidden, API only). You can also customize which formatting buttons appear in the editor by selecting or deselecting them in the configuration menu. Formatting options can be changed after the initial save. Read more.

How do I add links, assets, and embeds in the Rich Text editor?

To add a link, use the Link button to open a popup where you can choose between linking to a URL or an internal entry, set link text, address, and attributes. To add assets, click the Assets button to select or upload an asset, which will be inserted into your content. For embeds, use the embed option to add inline or block embeds from other models, allowing you to reference or insert related content directly within your text. Learn more about links, assets, and embeds.

Can I localize Rich Text fields or make them required or unique?

Yes, when configuring a Rich Text field, you can enable localization to support multiple languages, make the field required (so entries cannot be saved if empty), or set it as unique (ensuring no duplicate values across entries). These options help tailor the Rich Text field to your project's specific content and workflow needs. See configuration details.

Where can I find developer resources for the Rich Text editor?

Developer resources for the Rich Text editor include the API Reference, a blog post on the React Rich Text Renderer, and a tutorial on styling Rich Text with TailwindCSS. These resources provide guidance on integrating, rendering, and customizing Rich Text content in your applications.

General Hygraph Features & Benefits

What are the key capabilities and benefits of Hygraph?

Hygraph is a GraphQL-native Headless CMS that enables businesses to build, manage, and deliver digital experiences at scale. Key benefits include operational efficiency (eliminating developer dependency, streamlining workflows), financial advantages (reducing operational costs, accelerating speed-to-market), technical strengths (GraphQL-native architecture, content federation, enterprise-grade security), and unique features like Smart Edge Cache, custom roles, rich text superpowers, and project backups. Hygraph has helped companies like Komax achieve 3x faster time-to-market and Samsung improve customer engagement by 15%. See case studies.

What problems does Hygraph solve for its users?

Hygraph addresses operational inefficiencies (such as dependency on developers for content updates and legacy tech stack modernization), financial challenges (high operational costs, slow speed-to-market), and technical issues (complex schema evolution, integration difficulties, cache and performance bottlenecks, localization, and asset management). Its user-friendly interface, GraphQL-native architecture, content federation, and Smart Edge Cache help businesses modernize content management and deliver exceptional digital experiences. See customer stories.

How does Hygraph perform in terms of speed and reliability?

Hygraph is designed for high performance, featuring Smart Edge Cache for faster content delivery and high-performance endpoints for reliability and speed. The platform measures GraphQL API performance and provides optimization advice for developers. These features ensure Hygraph can handle high traffic and global audiences efficiently. Read more about performance improvements.

How easy is Hygraph to use for non-technical users?

Hygraph is frequently praised for its intuitive and clear user interface, making it accessible for both technical and non-technical users. Customers report that it is easy to set up and use, even for those without technical expertise. Hygraph was recognized for "Best Usability" in Summer 2023, and users appreciate features like custom app integration for content quality checks and instant feedback. Try Hygraph.

Security & Compliance

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified for its hosting infrastructure, and GDPR compliant. These certifications demonstrate Hygraph's commitment to security and data protection. For more details, visit the security features page.

What security features does Hygraph offer?

Hygraph provides granular permissions, SSO integrations, audit logs, encryption at rest and in transit, regular data backups, and enterprise-grade compliance features such as dedicated hosting and custom SLAs. The platform also supports GDPR and CCPA compliance and offers transparent reporting and a process for reporting security issues. Learn more.

Pricing & Plans

What is Hygraph's pricing model?

Hygraph offers a Free Forever Developer Account, self-service plans (such as the Growth Plan at $299/month or $199/month billed annually), and custom enterprise pricing starting at $900/month. Plans include 1,000 entries, with add-ons available for additional entries, locales, API calls, asset traffic, and content stages. For more details, visit the Hygraph Pricing Page.

Use Cases & Customer Success

Who can benefit from using Hygraph?

Hygraph is ideal for developers, product managers, and marketing teams in industries such as ecommerce, automotive, technology, food and beverage, manufacturing, transportation, staffing, and science. It is especially suited for organizations looking to modernize legacy tech stacks, scale content operations, and deliver global digital experiences. See industry case studies.

Can you share specific case studies or success stories of customers using Hygraph?

Yes. Komax achieved a 3x faster time to market by managing over 20,000 product variations across 40+ markets via a single CMS. Samsung improved customer engagement by 15% with a scalable, composable member platform. Stobag increased online revenue share from 15% to 70% after transitioning to a digital-first approach. More examples are available on the Hygraph Case Studies Page.

Implementation & Support

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

Implementation time varies by project. For example, Top Villas launched a new project within 2 months, and Si Vale met aggressive deadlines during implementation. Hygraph offers a Free API Playground, a Free Forever Developer Account, and a structured onboarding process with introduction calls, account provisioning, and technical/content kickoffs. Training resources and extensive documentation are also available. See documentation.

What support and training does Hygraph provide to customers?

Hygraph provides 24/7 support via chat, email, and phone, real-time troubleshooting through Intercom chat, a community Slack channel, extensive documentation, webinars, live streams, and how-to videos. Enterprise customers receive a dedicated Customer Success Manager and a structured onboarding process. Access documentation.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph is a cloud-based platform, so all deployment, updates, security, and infrastructure maintenance are managed by Hygraph. Upgrades are seamlessly integrated, and troubleshooting support is available 24/7 via multiple channels. Customers also have access to extensive documentation and an API Playground for self-service troubleshooting. Enterprise customers receive personalized support from a Customer Success Manager. Learn more.

Competition & Comparison

Why choose Hygraph over other headless CMS solutions?

Hygraph offers unique features such as Smart Edge Cache for fast content delivery, content federation to integrate data from multiple sources, advanced content formatting, custom roles, and project backups. It provides business benefits like speed-to-market, lower total cost of ownership, scalability, and improved content workflows. Hygraph is developer-friendly, supports seamless integrations, and is recognized for security and compliance. Customer success stories include Komax (3x faster time to market) and Samsung (15% increase in engagement). See why customers choose Hygraph.

Help teams manage content creation and approval in a clear and structured way
Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

#Rich Text editor

#Overview

This content editor tool comes out-of-the-box for all Hygraph projects, and provides great flexibility when it comes to creating, editing, and manipulating content entries showcasing text and images.

If your project schema is configured so that your model has a Rich Text field, you'll see it like this in the content editor:

Rich Text editorRich Text editor

  1. This dropdown allows you to format text you've highlighted in the text area. You can format it as normal text as well as different heading levels.
  2. These typography options allow you to make text bold, italic, or underlined.
  3. Use this option to add a link. Click here for more information.
  4. Use this option to format the text as a block quote.
  5. Use this option to format the text as inline code.
  6. This option allows you to include an asset. Click here for more information.
  7. Use these options to create either a bulleted or numbered list.
  8. Use this option to format the text as a code block.
  9. Click on the Iframe button to display a popup where you can enter an iframe URL. After you've entered a valid iframe URL, click on the OK button to add it to your content.
  10. Use this option to assign classes to your text. Simply highlight the text and click on the Class button. A popup will display for you to type in the Class name, then click on Ok to finalize the process.
  11. Use this option to add a table.
  12. Use this option to format text as subscript.
  13. Use this option to format text as superscript.
  14. Use this option to enter the fullscreen rich text editor mode.
  15. This option allows you to embed content from a model. Click here for more information.

#Field configuration

Rich Text editor configurationRich Text editor configuration

When you add a Rich Text field to a model in your schema, you will find the following options:

TabField NameDescription
SettingsDisplay NameDisplay name of your rich text field.
SettingsAPI IDAPI ID of your Rich Text field. This field is autocompleted as you type in the display name, but can be edited.
SettingsDescriptionOptional field. You can add a description for your Rich Text field here.
SettingsEnable embeddingSelect this checkbox to enable embedding, which will allow you to reference content inside rich text. You cannot edit this setting after the initial save.
SettingsAllow multiple valuesSelect this checkbox to store a list of values instead of a single one.
SettingsLocalize fieldSelect this checkbox to make the Rich Text field localized.
SettingsFormatting optionsUse this dropdown menu to customize which buttons will appear in your rich text editor. You can read more about this menu here.
ValidationsMake field requiredSelect this checkbox to make the rich text field required. If you select it, you won't be able to save the entry if the field is empty. This option cannot be edited after the initial save.
ValidationsSet field as uniqueSelect this checkbox to set this field as unique. Selecting it ensures that multiple entries can't have the same value for this field.
AdvancedSet initial valueSelect this checkbox to set an initial value to prefill the form input.
AdvancedShow based on conditionSelect this checkbox to set condition visibility for this field. Check out our conditional fields document to learn more.
AdvancedField visibilityUse this dropdown to select a field visibility option. The options are: read/write, read only, hidden, and API only.

#Customize your editor

When you configure your Rich Text field, you will find the Formatting options under Settings.

Rich Text editor configurationRich Text editor configuration

This dropdown menu lets you select which buttons will display on your rich text field in the Content editor.

Rich Text editor configurationRich Text editor configuration

By default, all checkboxes are selected. Deselect the buttons that you don't want in your rich text editor.

#Using the Rich Text editor

#Links

Click on the Link button to display the Insert link popup, which contains two tabs: Settings and Attributes.

#Settings

RTE - Insert link - Settings tabRTE - Insert link - Settings tab

  • Link type: Use the radio buttons to select one of the two options. Your selection modifies the fields displayed on screen.
    • URL: Select this option to add a link to an external source.
    • Entry: Select this option to add a link to an entry in your Hygraph project.
  • Link text: You can add text for your link in this field. If you are creating a URL link type and don't complete this field, the Link address will be used as Link text. This field becomes mandatory for the Entry link type. If you selected text before clicking on the link button, this field will be autocompleted with the selected text.
  • Link address: Mandatory field where you can type the URL you wish to link to. This field only displays for the URL link type.
  • Open link in new tab: Use this checkbox for your link to open in a new tab. It adds the target='_blank' attribute to your link. This field only displays for the URL link type.
  • Link title: Optional field where you can enter a tooltip to display on hover. This field only displays for the URL link type.
  • Select entry: Click on Add existing entry to select the entry in your Hygraph project that you wish to create a link to. Only models that can be embedded will display in the dropdown. This field only displays for the Entry link type.
  • Action buttons:
    • Cancel: Click on this button to cancel the process.
    • Insert: Click on this button to save the link and add it to your content entry.

#Attributes

You can optionally complete the following HTML attributes:

RTE - Insert link - Attributes tabRTE - Insert link - Attributes tab

  • Rel attribute: This attribute defines the relationship between the current document and the linked resource.
  • Class attribute: This attribute specifies one or more classnames for an element. You can add classes separated with spaces here.
  • ID attribute: This attribute is used to specify a unique id for an HTML element.
  • Action buttons:
    • Cancel: Click on this button to cancel the process.
    • Insert: Click on this button to save the link and add it to your content entry.

#Assets

Clicking on the Assets button opens the Select Asset screen:

RTE - Select assetsRTE - Select assets

Select an asset by clicking on the purple reference icon located at the beginning of each asset entry. This will automatically add the asset to your content.

If the asset you need has not yet been uploaded to your project, you can do so from here by click on the Upload button. This process follows the standard asset upload flow.

#Embeds

Use this option to create inline and/or block embeds.

Inline embeds give Content Creators maximum flexibility to add references or relations directly within the text so they can move faster. This also clears up clutter around content creation, so they are able to add things like authors, citations, product attributes and more without having to add extra fields within the content entry.

Block embeds give Content Creators more flexibility with less clutter. Use block embeds to insert assets and other models inside the text as a block. This can be useful when adding images like logos, or referencing audiences to previous created material that support the new content item like blog posts, documents, announcements, etc.

RTE - Embeds - Block embed screen exampleRTE - Embeds - Block embed screen example

Whether you add an inline or a block embed, both screens show the same options: Use the dropdown to select the model you wish to embed content from, then click on Select model.

The system will display the selection screen for the chosen model. To select an entry and add it to your content, simply click on the purple reference icon located at the beginning of each content entry.

To Edit or Remove an embed you've added to your Rich Text editor, click on the context menu icon of your embed and select the desired option.

#Resources