UI extensions

UI Extensions will soon be deprecated. Please migrate to App Framework.

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 stepsAnchor

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
Field extension	Field extension API reference.
Sidebar extension	Sidebar extension API reference.
Hooks	Hooks API reference.