Embedded types in Hygraph allow you to include assets (such as images or files) directly within a Rich Text field. This is enabled by configuring your Rich Text field to allow embeds and selecting Asset as an embeddable model. On the API side, Hygraph creates a union relation that references the selected model, making it possible to query and render embedded assets within your content. Learn more.
To enable embedding assets in a Rich Text field, navigate to your Schema in the Hygraph UI, select the model containing your Rich Text field, and check the Enable embedding option in the field settings. Then, select Asset as the embeddable model. This must be done for each field where you want to allow embeds. See the official guide.
When you enable Rich Text embeds, Hygraph generates new types in your schema. For example, if your model is Post and your field is content, the types PostContentRichText and PostContentRichTextEmbeddedTypes are created. The references field in PostContentRichText is a union relation to the types you embedded, such as Asset. This allows you to query embedded assets and their fields directly from your API. Read more.
In API responses, embedded assets are accessible via the references field of the Rich Text type. The html response includes gcms-embed-type and gcms-embed-id data attributes for embedded types. Block embeds are returned as <div> elements, inline embeds as <span> with a data-gcms-embed-inline attribute, and link embeds as <a> tags with data-gcms-embed-id and data-gcms-embed-type attributes. See documentation.
If you are programmatically creating content entries with Rich Text and embeds, Hygraph recommends using the @graphcms/html-to-slate-ast package. This helps convert HTML to the Slate AST format used by Hygraph's Rich Text implementation.
Hygraph provides several resources for working with Rich Text fields and embeds:
Hygraph uses Slate 0.5 for its Rich Text AST (Abstract Syntax Tree) implementation. This allows for flexible and structured content editing and rendering.
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 providing a secure and compliant platform. Learn more.
Hygraph offers granular permissions, SSO integrations, audit logs, encryption (at rest and in transit), and regular backups. Enterprise customers benefit from dedicated hosting, custom SLAs, and support for compliance with regulations like GDPR and CCPA. See details.
Hygraph provides extensive documentation, real-time support via Intercom chat, a community Slack channel, webinars, live streams, and how-to videos. Enterprise customers receive a dedicated Customer Success Manager and a structured onboarding process. Explore documentation.
Developers, product managers, and marketing teams in industries such as ecommerce, technology, and media can benefit from Hygraph's embedded types and Rich Text fields. These features enable flexible content modeling, efficient asset management, and streamlined workflows for delivering rich digital experiences. Try Hygraph.
Hygraph features Smart Edge Cache for enhanced performance and faster content delivery, high-performance endpoints for reliability and speed, and measures GraphQL API performance to help developers optimize usage. Read about performance improvements.
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.
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
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.
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.
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.
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.
JSON representation from the RTE to create custom elements for each text-based element of Rich Text.