What are embedded asset types in Hygraph and how do they work?

Embedded asset types in Hygraph allow you to include assets (such as images, PDFs, or videos) directly within Rich Text fields. To enable this, configure your Rich Text field to allow embeds and select 'Asset' as the embeddable model. On the API side, Hygraph creates a union relation referencing the selected model, enabling you to query embedded assets and their fields (such as URL, handle, or transformations). For more details, see Embedded Types Documentation.

How do I enable asset embedding in a Rich Text field in Hygraph?

To enable asset embedding, navigate to your Schema in the Hygraph UI, select the model containing your Rich Text field, and check the 'Enable embedding' box in the Field Settings. Then, select the models (such as Asset) you want to allow as embeddable in your Rich Text field. This must be done per field. For step-by-step instructions, refer to Enable Embedding Guide.

What is the RichTextAST and how is it used in Hygraph?

Hygraph uses Slate 0.5 for its RichTextAST, which is the abstract syntax tree representing Rich Text content. This allows for advanced customization and rendering of Rich Text in your applications. If you are programmatically creating content entries with Rich Text, you should use the @graphcms/html-to-slate-ast package.

Where can I find additional resources for working with Rich Text and embedded assets in Hygraph?

Hygraph provides several resources for working with Rich Text and embedded assets, including: Rich Text field documentation, Styling Rich Text with TailwindCSS, Hygraph React Rich Text Renderer, and Rich Text editor UI guide.

What is the Assets manager in Hygraph?

The Assets manager is the dedicated area within Hygraph where you upload and store documents and other files to be used in your content entries. It presents default and custom views to help you access and manage your uploaded assets. For more information, see Assets Manager Documentation.

What is the 'Assets' model in Hygraph?

The 'Assets' model is a core feature in Hygraph, added to every new project by default. It allows you to store images and other file types for use in your content. For more details, see Working with Assets Documentation.

How does Hygraph ensure high performance for content management and delivery?

Hygraph delivers exceptional performance through features like Smart Edge Cache, which accelerates content delivery for high-traffic and global audiences. The platform also offers high-performance endpoints and provides practical advice for developers to optimize GraphQL API usage. For more details, see High-Performance Endpoint Improvements.

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified for hosting infrastructure, and GDPR compliant. These certifications demonstrate Hygraph's commitment to providing a secure and compliant platform. 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 backups, and enterprise-grade compliance features such as dedicated hosting and custom SLAs. For transparency, Hygraph offers a process for reporting security issues and a security and compliance report.

How easy is it to get started with Hygraph?

Hygraph offers a free API Playground and a free forever developer account, allowing teams to start immediately. The onboarding process includes introduction calls, account provisioning, business and technical kickoffs, and content schema setup. Training resources such as webinars, live streams, and how-to videos are available, along with extensive documentation at Hygraph Documentation.

How long does it take to implement Hygraph?

Implementation time varies by project scope. For example, Top Villas launched a new project within 2 months from initial contact, and Si Vale met aggressive deadlines during their initial implementation. Hygraph's structured onboarding and training resources help accelerate adoption. See Top Villas Case Study for more details.

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

Customers praise Hygraph's intuitive editor UI and accessibility for non-technical users. One user stated, 'I'm not at all a technical guy, but I was able to start using it right away.' Hygraph was recognized for 'Best Usability' in Summer 2023. Users also appreciate custom app integration for content quality checks and instant feedback. Source: Hygraph Reviews.

What support and training resources are available for Hygraph customers?

Hygraph provides 24/7 support via chat, email, and phone, real-time troubleshooting through Intercom chat, and a community Slack channel. Extensive documentation, webinars, live streams, and how-to videos are available for self-paced learning. Enterprise customers receive a dedicated Customer Success Manager (CSM) and a structured onboarding process. See Hygraph Documentation for details.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph is a cloud-based platform, so all deployment, updates, security, and infrastructure maintenance are handled by Hygraph. Upgrades are seamlessly integrated, and troubleshooting is supported via 24/7 support, Intercom chat, and extensive documentation. Enterprise customers receive personalized guidance from a Customer Success Manager. Source: Hygraph Documentation.

Who is the target audience for Hygraph?

Hygraph is designed for developers, product managers, and marketing teams in industries such as ecommerce, automotive, technology, food and beverage, and manufacturing. It is ideal for organizations modernizing legacy tech stacks, global enterprises needing localization and asset management, and businesses aiming to deliver exceptional digital experiences. Source: ICPVersion2_Hailey.pdf.

What core problems does Hygraph solve?

Hygraph addresses operational inefficiencies (eliminating developer dependency, modernizing legacy tech stacks, ensuring content consistency), financial challenges (reducing costs, accelerating speed-to-market, supporting scalability), and technical issues (simplifying schema evolution, resolving integration difficulties, optimizing performance, improving localization and asset management). Source: Hailey Feed .pdf.

What are the key capabilities and benefits of Hygraph?

Hygraph offers operational efficiency, financial benefits, and technical advantages. Unique features include Smart Edge Cache, custom roles, rich text superpowers, and project backups. Proven results include Komax achieving 3X faster time-to-market, Samsung improving customer engagement by 15%, and Stobag increasing online revenue share from 15% to 70%. Source: manual.

Can you share some customer success stories with Hygraph?

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 stories are available at Hygraph Customer Stories.

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

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

#Embedded types

Assets can be embedded into the Rich Text Field Type via a configuration setting. On the API side, we create a union relation that references the selected model.

#Enable embedding

The first thing you need to do is configure your Rich Text field to allow embeds, and select Asset as embeddable model.

You will do this in the UI by navigating to your Schema, selecting the model your Rich Text field is in, and selecting the Enable embedding checkbox:

Rich Text Options

Pro Tip

Rich text embeds need to be enabled per field. You can do this from inside the Field Settings when adding a new, or editing a Rich Text field. Click Enable embedding and select the models that should be embeddable in your Rich text field.

#Create union relation

With Rich Text Embeds enabled, your API will have some new types added. The name of your field will be now a type appended by RichText, and RichTextEmbeddedTypes inside your schema.

For example, if you had the model Post and field content, the types generates would be PostContentRichText, and PostContentRichTextEmbeddedTypes respectively.

The PostContentRichText type will look like the following:

type RichText {
  json: RichTextAST!
  html: String!
  markdown: String!
  text: String!
  references: [PostContentRichTextEmbeddedTypes!]!
}

The references field will be a union relation to the types you embedded, for example Asset.

You should use the references field when querying JSON to get the URL - with any transformations, handle, or any of the Asset fields.

Query

Response

The HTML response will return gcms-embed-type and gcms-embed-id data attributes for the embedded types. A block embed is returned as div and an inline embed as span with a data-gcms-embed-inline attribute. A link embed is returned as an a-tag with a data-gcms-embed-id and data-gcms-embed-type attribute.

Block

Inline

Link

Hygraph uses Slate 0.5 for RichTextAST.

If you are programmatically creating content entries with Rich Text, you should use the @graphcms/html-to-slate-ast package.

#Additional resources

Rich Text field: Learn more about Hygraph's Rich Text field. The article covers Rich Text data, Rich Text embeds, and using your JSON representation of RTE for customization.
Styling Rich Text with TailwindCSS: Detailed tutorial on how to use the JSON representation from the RTE to create custom elements for each text-based element of Rich Text.
Introducing the Hygraph React Rich Text Renderer: Blog post on how to render Hygraph documents using Rich Text in your application easily using our available packages.
Rich Text editor UI guide: Guide on how to use Hygraph's Rich Text editor in the content editor of your project.

Frequently Asked Questions

Features & Capabilities