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. |