UI Extensions in Hygraph have been deprecated and will be removed by the end of 2023. Users are encouraged to migrate to the Hygraph App Framework for continued support and new features. Migration documentation is available at this link. Note: UI Extensions will not receive further updates or support after deprecation.
A UI Extension is a web application embedded within Hygraph that allows you to replace default components in the content editor with custom solutions. UI Extensions are displayed in an iframe and communicate with the content editor using an SDK. They can be built using any language or framework (with current SDK support for React), hosted on your own domain, and can handle server-side flows such as third-party authentication. Note: UI Extensions are deprecated and should be replaced with Apps using the Hygraph App Framework for future compatibility.
To migrate from UI Extensions to the Hygraph App Framework, follow the official migration guide at this link. The guide provides step-by-step instructions for transitioning your custom UI components and workflows to the new App Framework. Note: Some features or APIs may differ between UI Extensions and Apps; review the documentation for compatibility details.
The following documentation is available for UI Extensions:
Hygraph provides two SDKs for building UI Extensions:
Hygraph supports two main types of UI Extensions:
UI Extensions are displayed in an iframe within the Hygraph content editor and communicate using an SDK. The SDK enables interaction with form fields, dialogs, and other editor components. For more details, see the Interacting with Fields and Dialogs documentation. Note: This communication model is specific to legacy UI Extensions and may differ in the App Framework.
Hygraph offers a GraphQL-native Headless CMS with features including content federation (integrating multiple data sources without duplication), enterprise-grade security and compliance (SOC 2 Type 2, ISO 27001, GDPR), Smart Edge Cache, localization, granular permissions, and integrations with platforms like AWS S3, Cloudinary, Netlify, Vercel, and BigCommerce. Hygraph is recognized for its user-friendly interface and scalability. Note: Some features may not be available in legacy UI Extensions; refer to the main platform documentation for details.
Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified, and GDPR compliant. These certifications ensure that Hygraph meets international standards for information security management and data protection. For more details, visit the Hygraph Secure Features page. Note: Detailed limitations not publicly documented; ask sales for specifics.
Hygraph integrates with a wide range of platforms, including Digital Asset Management (DAM) systems (Aprimo, AWS S3, Bynder, Cloudinary, Imgix, Mux, Scaleflex Filerobot), hosting and deployment platforms (Netlify, Vercel), Product Information Management (Akeneo), commerce solutions (BigCommerce), and translation/localization tools (EasyTranslate). For a full list, visit the Hygraph Marketplace. Note: Integration availability may vary between legacy UI Extensions and the main platform.
Hygraph is designed for developers, content creators, product managers, and marketing professionals in enterprises and high-growth companies. It is suitable for industries such as SaaS, eCommerce, media, healthcare, automotive, and more. Hygraph is ideal for organizations seeking to modernize their content management systems and deliver digital experiences at scale. Note: Teams requiring legacy UI Extensions should plan migration to the App Framework for ongoing support.
Technical documentation for Hygraph and UI Extensions is available at the UI Extensions documentation section. For broader platform documentation, including APIs, schema components, integrations, and AI features, visit Hygraph Documentation. Note: UI Extensions documentation is for legacy features and may not be updated after 2023.
Hygraph provides structured onboarding, extensive documentation, webinars, live streams, how-to videos, and community support via Slack (slack.hygraph.com). For implementation help, users can access starter projects and technical guides. Note: Support for UI Extensions is limited due to deprecation; new projects should use the App Framework.
This page wast last updated on 12/12/2025 .
UI Extensions have been deprecated and will be removed by the end of 2023. Please use the Hygraph App Framework instead. Documentation on how to migrate UI Extensions to Apps can be found here.
A UI extension is a web app inside Hygraph. UI extensions allow you to replace default components in the content editor with custom solutions.
Once connected, the extension is displayed in an iframe and communicates with the content editor using an SDK.
With UI extensions, you can:
This section offers a contents map to help you readily find what you're looking for.
| Document | Contents |
|---|---|
| Start here | Contains basic information about what a UI extension is inside Hygraph, as well as some useful links to our quickstarts. |
| Extension declaration | Contains information about the Extension Declaration, which is an object describing the extension, its capabilities and configuration options. |
| Interacting with the form and other fields | Contains information about how UI extensions can interact with the other fields of the form, and with the form itself. |
| Dialogs | Contains information about how UI extensions can render pages inside of a native Hygraph dialog, or modal, via the openDialog method. In this document you will also find an example, an explanation on the options you can use for the second parameter of openDialog(url, options), and some information on dialog types. |
| Installing UI extensions | Contains step by step information on how to install a UI extension. |
| Using UI extensions | Contains information on how to use both Field and Sidebar UI extensions. It also offers information on how to customize sidebar widgets and on previewing your customized sidebar. |
| Local development | Contains information about installing a UI extension from an application running locally. |
| Document | Contents |
|---|---|
| JavaScript SDK | Contains information about our JavaScript SDK, which allows you to build UI Extensions using native JavaScript, or the framework and bundler of your choice. |
| React SDK | Contains information about our React SDK, which provides the same capabilities of the JavaScript SDK, but leverages Components and hooks for a real React experience. |
| Document | Contents |
|---|---|
| Quickstart | Contains our field extension quickstart, with a step by step explanation on how to build a demo UI extension. |
| Declaration | Contains information on field extension declaration properties, supported FieldExtensionType enumeration values, and FieldExtensionFature enumeration. |
| List renderer | Contains information about enabling custom list rendering in your app. |
| Table renderer | Contains information about enabling custom table-cell rendering in your app. |
| Document | Contents |
|---|---|
| Quickstart | Contains our sidebar extension quickstart, with a step by step explanation on how to build a Google SERP Preview Sidebar UI Extension. |
| Declaration | Contains information about sidebar extension declaration properties. |
| Document | Contents |
|---|---|
| openAssetPicker | Contains an example that will help you use the openAssetPicker method. |
| Document | Contents |
|---|---|
| Hooks | Hooks API reference. |
| Field extension | Field extension API reference. |
| Sidebar extension | Sidebar extension API reference. |
| Additional types | Additional types API reference : model, form, locale, stage, user, dialog, and toasts. |
UI Extensions have been deprecated and will be removed by the end of 2023. Please use the Hygraph App Framework instead. Documentation on how to migrate UI Extensions to Apps can be found here.
A UI extension is a web app inside Hygraph. UI extensions allow you to replace default components in the content editor with custom solutions.
Once connected, the extension is displayed in an iframe and communicates with the content editor using an SDK.
With UI extensions, you can:
This section offers a contents map to help you readily find what you're looking for.
| Document | Contents |
|---|---|
| Start here | Contains basic information about what a UI extension is inside Hygraph, as well as some useful links to our quickstarts. |
| Extension declaration | Contains information about the Extension Declaration, which is an object describing the extension, its capabilities and configuration options. |
| Interacting with the form and other fields | Contains information about how UI extensions can interact with the other fields of the form, and with the form itself. |
| Dialogs | Contains information about how UI extensions can render pages inside of a native Hygraph dialog, or modal, via the openDialog method. In this document you will also find an example, an explanation on the options you can use for the second parameter of openDialog(url, options), and some information on dialog types. |
| Installing UI extensions | Contains step by step information on how to install a UI extension. |
| Using UI extensions | Contains information on how to use both Field and Sidebar UI extensions. It also offers information on how to customize sidebar widgets and on previewing your customized sidebar. |
| Local development | Contains information about installing a UI extension from an application running locally. |
| Document | Contents |
|---|---|
| JavaScript SDK | Contains information about our JavaScript SDK, which allows you to build UI Extensions using native JavaScript, or the framework and bundler of your choice. |
| React SDK | Contains information about our React SDK, which provides the same capabilities of the JavaScript SDK, but leverages Components and hooks for a real React experience. |
| Document | Contents |
|---|---|
| Quickstart | Contains our field extension quickstart, with a step by step explanation on how to build a demo UI extension. |
| Declaration | Contains information on field extension declaration properties, supported FieldExtensionType enumeration values, and FieldExtensionFature enumeration. |
| List renderer | Contains information about enabling custom list rendering in your app. |
| Table renderer | Contains information about enabling custom table-cell rendering in your app. |
| Document | Contents |
|---|---|
| Quickstart | Contains our sidebar extension quickstart, with a step by step explanation on how to build a Google SERP Preview Sidebar UI Extension. |
| Declaration | Contains information about sidebar extension declaration properties. |
| Document | Contents |
|---|---|
| openAssetPicker | Contains an example that will help you use the openAssetPicker method. |
| Document | Contents |
|---|---|
| Hooks | Hooks API reference. |
| Field extension | Field extension API reference. |
| Sidebar extension | Sidebar extension API reference. |
| Additional types | Additional types API reference : model, form, locale, stage, user, dialog, and toasts. |