App Framework

This document helps you understand what the Hygraph App Framework is and what you can do with it. With the App Framework, you can extend the core capabilities that Hygraph offers. It gives you the possibility to create your own custom apps, and (optionally) share them with other users.

The App Framework is a toolset that allows you to build apps easily. You can use it to build apps that integrate Hygraph with third-party services, or build custom integrations tailored to your specific needs.

Would you like to build your own app

Look into our App Framework tutorial.

What are apps?Anchor

Apps are packages that extend Hygraph in various ways. Apps allow for simpler customization and integration of your project with other tools, products and services. With apps, you can adapt Hygraph to your individual or business needs.

What can apps do?Anchor

With apps, you can extend the out-of-the-box Hygraph functionality and User Interface in various ways. From small custom field extensions to full fledged product integrations, with the App Framework & your custom apps it becomes super easy to extend Hygraph to meet your needs.

Some common use cases are:

  • Adding custom fields to your models
  • Customizing the content editing sidebar to improve the editor experience
  • Triggering actions such as CI builds in third-party systems

For inspiration on what's possible with the App Framework, check out the publicly available apps in our Marketplace.

Why apps?Anchor

Apps offer an improvement over the UI Extensions feature, which will eventually be deprecated. We encourage all users to migrate from UIX to apps.

Why migrate from UIX to the App Framework?

The App Framework offers more flexibility and greater security features:

FlexibilityAnchor

Creating your own app to be used in the Hygraph platform allows you to have custom fields on your setup, as well as custom functionality on your CMS. You can even group up all your custom elements under one app and install them at once, which greatly simplifies the installation process compared to UI Extensions.

It also makes it possible for you to create custom page views, which was not possible before.

SecurityAnchor

Certain resources are critical for an app to work, and should therefore be hidden from users to prevent accidental removal. Our App Framework offers a permissions system, which allows better control over resources visibility as well as over creating resources on behalf of the user.

With this new permissions system you can create the app establishing which resources should be hidden from users, and also which resources are critical and can't be removed once the app is unistalled.

Section contentsAnchor

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

Getting startedAnchor

DocumentContents
OverviewHygraph's App Framework overview.
Migrate to appsContains information on how to migrate from UI Extrension to app. Includes a step-by-step example for both Field UIX and Sidebar UIX.
Register an appContains all the information you need about the app registration process.
Using app tokensContains information on how to generate app tokens for your app.
Install an appContains information on how to install an app in your Hygraph Project.
Delete an appContains information on how to delete an app you've created.

First stepsAnchor

This is our App Framework tutorial. Take the first steps into creating an app with field, sidebar, or page elements.

DocumentContents
OverviewApp Framework tutorial overview document stating what you will learn as well as the prerequisites.
Register your appContains instructions on how to register your app.
Develop your appContains instructions on how to develop an application.
Installation flowContains instructions on how to develop your app's installation flow.
Configuration flowContains instructions on how to develop your app's configuration flow.
Field elementContains instructions on how to develop a custom field element.
Sidebar elementContains instructions on how to develop a custom sidebar element.
Page elementContains instructions on how to develop a custom page element.

Quick startersAnchor

DocumentContents
Nexj.jsContains instructions on how to build an app with a custom field element using our Next.js starter.

Field elementsAnchor

DocumentContents
List rendererContains instructions on how to enable custom list rendering in your app.
Table rendererContains instructions on defining how custom field values are displayed in the content table.
DeclarationContains information about field element declaration properties.
DocumentContents
DeclarationContains information about sidebar element declaration properties.

API ReferenceAnchor

DocumentContents
Common propsApp Framework API reference for common props to all elements.
Field elementApp Framework API reference for field element.
Sidebar elementApp Framework API reference for sidebar element.
Additional typesApp Framework API reference for additional types. It includes model, form, locale, stage, user, dialog, and toasts.

FunctionsAnchor

DocumentContents
OpenDialogOpenDialog function documentation.
ShowToastShowToast function documentation.
ToastOptionsToastOptions function documentation.
useFieldExtensionuseFieldExtension hook documentation.
useFormSidebarExtensionuseFormSidebarExtension hook documentation.
useAppuseApp hook documentation.

ConstantsAnchor

DocumentContents
ConstantsList of constans with their descriptions, types, and values.

ExamplesAnchor

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

LibrariesAnchor

DocumentContents
React SDKLink to our App Framework React SDK.
JavaScript SDKLink to our JavaScript SDK.