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.
This section offers a contents map to help you readily find what you're looking for.
|Contains basic information about what a UI extension is inside Hygraph, as well as some useful links to our quickstarts.
|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.
|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.
|Contains information about installing a UI extension from an application running locally.
|Contains our field extension quickstart, with a step by step explanation on how to build a demo UI extension.
|Contains information on field extension declaration properties, supported
FieldExtensionType enumeration values, and
|Contains information about enabling custom list rendering in your app.
|Contains information about enabling custom table-cell rendering in your app.
|Contains our sidebar extension quickstart, with a step by step explanation on how to build a Google SERP Preview Sidebar UI Extension.
|Contains information about sidebar extension declaration properties.
|Contains an example that will help you use the openAssetPicker method.