What are UI Extensions in Hygraph?

UI Extensions in Hygraph are web apps that 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. UI Extensions can be built using any language and framework (with current SDK support for React), hosted on your own domain, and can include server-side flows such as authenticating with third-party platforms.

Are UI Extensions deprecated in Hygraph?

Yes, UI Extensions have been deprecated and will be removed by the end of 2023. Users are advised to migrate to the Hygraph App Framework. Documentation for migration is available here.

What should I do if I am currently using UI Extensions?

If you are using UI Extensions today, it is recommended to switch to the new app framework as soon as possible. This ensures continued support and access to the latest features.

What can UI Extensions do in Hygraph?

UI Extensions allow you to customize the Hygraph content editor by replacing default components with your own solutions. You can build extensions using any language or framework (SDK support for React), host them on your own domain, and implement server-side flows such as third-party authentication. Extensions can interact with form fields, render custom dialogs, and be installed from local development environments.

What is an Extension Declaration for a Hygraph UI Extension?

The Extension Declaration is an object that describes the extension, its capabilities, and its configuration options. It is essential for defining how your extension interacts with the Hygraph editor. Detailed documentation is available here.

How do I install and use UI Extensions in Hygraph?

To install a UI Extension, follow the step-by-step guide provided in the documentation. You can install extensions from local development environments and use both Field and Sidebar UI Extensions. Customization options are available for sidebar widgets, and you can preview your customized sidebar.

What SDKs are available for building UI Extensions?

Hygraph provides both a JavaScript SDK and a React SDK for building UI Extensions. The JavaScript SDK allows you to use native JavaScript or your preferred framework and bundler, while the React SDK leverages components and hooks for a React experience.

What types of UI Extensions can I build in Hygraph?

You can build Field Extensions and Sidebar Extensions in Hygraph. Field Extensions allow you to customize how fields are rendered and interacted with, while Sidebar Extensions enable custom sidebar widgets such as a Google SERP Preview. Quickstart guides are available for both types.

How do UI Extensions benefit content teams?

UI Extensions allow content teams to interact more with content stored externally while ensuring consistency wherever it is used. For example, Top Villas uses UI Extensions and Remote Fields to keep content pages up-to-date and reflect the most current offerings.

What are some real-world examples of UI Extensions in use?

Top Villas leverages UI Extensions to enable their content team to interact with external content sources and maintain consistency across all content pages. This ensures that the most up-to-date information is always available and reflected in their offerings.

How do UI Extensions interact with the Hygraph editor?

UI Extensions communicate with the Hygraph content editor using an SDK. They can interact with form fields, render custom dialogs using the openDialog method, and support options for customizing dialog types and parameters.

Where can I find API references for UI Extensions?

API references for UI Extensions are available for hooks, field extensions, sidebar extensions, and additional types such as model, form, locale, stage, user, dialog, and toasts.

Where can I find documentation and guides for UI Extensions?

Comprehensive documentation and guides for UI Extensions are available in the Hygraph Classic Docs. These include quickstart guides, extension declaration details, installation instructions, and API references.

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.

#UI Extensions

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:

Use any language and framework to build it (eventually, as the current SDK version is for React).
Host it on your own domain.
Build flows requiring server-side treatment, like authenticating with another 3rd party platform.

#Next steps

Quickstart building Field Extensions
Quickstart building Sidebar Extensions

#Section contents

This section offers a contents map to help you readily find what you're looking for.

#Getting started

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.

#Libraries

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.

#Field extension

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.

#Sidebar extension

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.

#Examples

Document	Contents
openAssetPicker	Contains an example that will help you use the openAssetPicker method.

#API reference

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.

Frequently Asked Questions

UI Extensions: Overview & Migration