Join us live as we unveil the all new Hygraph Studio!

Hygraph
Docs

UI Extensions

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

#Section contents

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

#Getting started

DocumentContents
Start hereContains basic information about what a UI extension is inside Hygraph, as well as some useful links to our quickstarts.
Extension declarationContains information about the Extension Declaration, which is an object describing the extension, its capabilities and configuration options.
Interacting with the form and other fieldsContains information about how UI extensions can interact with the other fields of the form, and with the form itself.
DialogsContains 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 extensionsContains step by step information on how to install a UI extension.
Using UI extensionsContains 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 developmentContains information about installing a UI extension from an application running locally.

#Libraries

DocumentContents
JavaScript SDKContains information about our JavaScript SDK, which allows you to build UI Extensions using native JavaScript, or the framework and bundler of your choice.
React SDKContains 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

DocumentContents
QuickstartContains our field extension quickstart, with a step by step explanation on how to build a demo UI extension.
DeclarationContains information on field extension declaration properties, supported FieldExtensionType enumeration values, and FieldExtensionFature enumeration.
List rendererContains information about enabling custom list rendering in your app.
Table rendererContains information about enabling custom table-cell rendering in your app.
DocumentContents
QuickstartContains our sidebar extension quickstart, with a step by step explanation on how to build a Google SERP Preview Sidebar UI Extension.
DeclarationContains information about sidebar extension declaration properties.

#Examples

DocumentContents
openAssetPickerContains an example that will help you use the openAssetPicker method.

#API reference

DocumentContents
HooksHooks API reference.
Field extensionField extension API reference.
Sidebar extensionSidebar extension API reference.
Additional typesAdditional types API reference : model, form, locale, stage, user, dialog, and toasts.