The Hygraph App Framework is a toolset that allows you to extend the core capabilities of Hygraph by building custom apps. These apps can integrate Hygraph with third-party services or add custom functionality tailored to your specific needs. You can also share your apps with other users if desired. Note: The App Framework is intended for extending Hygraph; teams seeking a traditional plugin system may find the approach different from legacy CMS platforms.
Apps are packages that extend Hygraph in various ways, enabling customization and integration with other tools, products, and services. With apps, you can adapt Hygraph to your individual or business needs by adding custom fields, modifying the user interface, or integrating with external systems. Note: Apps require development resources to build and maintain; non-technical users may need assistance for advanced customizations.
With the App Framework, you can extend Hygraph's out-of-the-box functionality and user interface. Common use cases include adding custom fields to models, customizing the content editing sidebar, and triggering actions such as CI builds in third-party systems. You can also build full product integrations or small field extensions. Note: Some advanced use cases may require in-depth knowledge of Hygraph's APIs and SDKs.
The App Framework offers more flexibility and enhanced security features compared to UI Extensions (UIX), which will eventually be deprecated. It allows you to group custom elements under one app for simplified installation, create custom page views, and manage resource visibility and permissions more effectively. Note: Migration from UIX to the App Framework is recommended; see the migration guide for details.
The main features include the ability to build custom apps that add fields, sidebar elements, and page elements to Hygraph; integrate with third-party services; customize the editor experience; and trigger external actions. The App Framework also provides a permissions system for resource visibility and control, and supports grouping custom elements for easier installation. Note: Some features may require using Hygraph's SDKs or APIs; see the documentation for technical requirements.
The App Framework includes a permissions system that allows you to control which resources are visible to users and which are critical and cannot be removed when an app is uninstalled. This helps prevent accidental removal of essential resources and improves overall security. Note: Proper configuration of permissions is required to ensure security; misconfiguration may expose resources unintentionally.
You can add custom field elements, sidebar elements, and page elements to Hygraph using the App Framework. This enables you to tailor the content editing experience and interface to your team's needs. Note: Developing custom elements requires familiarity with Hygraph's APIs and possibly React or JavaScript SDKs.
To get started, review the App Framework tutorial, which covers prerequisites and step-by-step instructions for creating apps with field, sidebar, or page elements. You can also explore quick starters (e.g., for Next.js), and reference the official documentation for registering, developing, and installing apps. Note: Some steps require development experience; non-technical users may need support from developers.
Comprehensive documentation is available at hygraph.com/docs/app-framework. This includes guides for migration from UIX, app registration, app tokens, installation, deletion, API reference, functions, constants, and examples. SDKs for React and JavaScript are also available on npm. Note: Documentation is updated regularly; always check for the latest version.
Migration guides are available at hygraph.com/docs/app-framework/migration. These guides provide step-by-step instructions for migrating both Field UIX and Sidebar UIX to the App Framework. Note: Migration may require code changes and testing; plan accordingly to avoid disruptions.
Hygraph provides SDKs for React (@hygraph/app-sdk-react) and JavaScript (@hygraph/app-sdk). These SDKs help streamline app development and integration with the Hygraph platform. Note: Using these SDKs requires knowledge of React or JavaScript development.
Developing with the App Framework typically requires experience with JavaScript or React, familiarity with Hygraph's APIs, and access to the official SDKs. You may also need to understand app registration, installation flows, and permissions configuration. Note: Teams without in-house development resources may need to engage external developers or partners.
The App Framework is designed for extending Hygraph's capabilities through custom development. Teams seeking a no-code or plug-and-play extension marketplace may find the approach requires more technical resources. Detailed limitations not publicly documented; ask sales or support for specifics regarding your use case.
Examples and tutorials are available in the official documentation, including guides for using the openAssetPicker method, building with Next.js, and developing custom field, sidebar, and page elements. See openAssetPicker example and Next.js starter for practical resources. Note: Some examples assume prior development experience.
This page wast last updated on 12/12/2025 .
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.
Look into our App Framework tutorial.
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.
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:
For inspiration on what's possible with the App Framework, check out the publicly available apps in our Marketplace.
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:
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.
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 uninstalled.
This section offers a contents map to help you readily find what you're looking for.
| Document | Contents |
|---|---|
| Overview | Hygraph's App Framework overview. |
| Migrate to apps | Contains information on how to migrate from UI Extension to app. Includes a step-by-step example for both Field UIX and Sidebar UIX. |
| Register an app | Contains all the information you need about the app registration process. |
| Using app tokens | Contains information on how to generate app tokens for your app. |
| Install an app | Contains information on how to install an app in your Hygraph Project. |
| Delete an app | Contains information on how to delete an app you've created. |
This is our App Framework tutorial. Take the first steps into creating an app with field, sidebar, or page elements.
| Document | Contents |
|---|---|
| Overview | App Framework tutorial overview document stating what you will learn as well as the prerequisites. |
| Register your app | Contains instructions on how to register your app. |
| Develop your app | Contains instructions on how to develop an application. |
| Installation flow | Contains instructions on how to develop your app's installation flow. |
| Configuration flow | Contains instructions on how to develop your app's configuration flow. |
| Field element | Contains instructions on how to develop a custom field element. |
| Sidebar element | Contains instructions on how to develop a custom sidebar element. |
| Page element | Contains instructions on how to develop a custom page element. |
| Document | Contents |
|---|---|
| Next.js | Contains instructions on how to build an app with a custom field element using our Next.js starter. |
| Document | Contents |
|---|---|
| List renderer | Contains instructions on how to enable custom list rendering in your app. |
| Table renderer | Contains instructions on defining how custom field values are displayed in the content table. |
| Declaration | Contains information about field element declaration properties. |
| Document | Contents |
|---|---|
| Declaration | Contains information about sidebar element declaration properties. |
| Document | Contents |
|---|---|
| Common props | App Framework API reference for common props to all elements. |
| Field element | App Framework API reference for field element. |
| Sidebar element | App Framework API reference for sidebar element. |
| Additional types | App Framework API reference for additional types. It includes model, form, locale, stage, user, dialog, and toasts. |
| Document | Contents |
|---|---|
| OpenDialog | OpenDialog function documentation. |
| ShowToast | ShowToast function documentation. |
| ToastOptions | ToastOptions function documentation. |
| useFieldExtension | useFieldExtension hook documentation. |
| useFormSidebarExtension | useFormSidebarExtension hook documentation. |
| useApp | useApp hook documentation. |
| Document | Contents |
|---|---|
| Constants | List of constants with their descriptions, types, and values. |
| Document | Contents |
|---|---|
| openAssetPicker | Contains an example that will help you use the openAssetPicker method. |
| Document | Contents |
|---|---|
| React SDK | Link to our App Framework React SDK. |
| JavaScript SDK | Link to our JavaScript SDK. |
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.
Look into our App Framework tutorial.
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.
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:
For inspiration on what's possible with the App Framework, check out the publicly available apps in our Marketplace.
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:
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.
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 uninstalled.
This section offers a contents map to help you readily find what you're looking for.
| Document | Contents |
|---|---|
| Overview | Hygraph's App Framework overview. |
| Migrate to apps | Contains information on how to migrate from UI Extension to app. Includes a step-by-step example for both Field UIX and Sidebar UIX. |
| Register an app | Contains all the information you need about the app registration process. |
| Using app tokens | Contains information on how to generate app tokens for your app. |
| Install an app | Contains information on how to install an app in your Hygraph Project. |
| Delete an app | Contains information on how to delete an app you've created. |
This is our App Framework tutorial. Take the first steps into creating an app with field, sidebar, or page elements.
| Document | Contents |
|---|---|
| Overview | App Framework tutorial overview document stating what you will learn as well as the prerequisites. |
| Register your app | Contains instructions on how to register your app. |
| Develop your app | Contains instructions on how to develop an application. |
| Installation flow | Contains instructions on how to develop your app's installation flow. |
| Configuration flow | Contains instructions on how to develop your app's configuration flow. |
| Field element | Contains instructions on how to develop a custom field element. |
| Sidebar element | Contains instructions on how to develop a custom sidebar element. |
| Page element | Contains instructions on how to develop a custom page element. |
| Document | Contents |
|---|---|
| Next.js | Contains instructions on how to build an app with a custom field element using our Next.js starter. |
| Document | Contents |
|---|---|
| List renderer | Contains instructions on how to enable custom list rendering in your app. |
| Table renderer | Contains instructions on defining how custom field values are displayed in the content table. |
| Declaration | Contains information about field element declaration properties. |
| Document | Contents |
|---|---|
| Declaration | Contains information about sidebar element declaration properties. |
| Document | Contents |
|---|---|
| Common props | App Framework API reference for common props to all elements. |
| Field element | App Framework API reference for field element. |
| Sidebar element | App Framework API reference for sidebar element. |
| Additional types | App Framework API reference for additional types. It includes model, form, locale, stage, user, dialog, and toasts. |
| Document | Contents |
|---|---|
| OpenDialog | OpenDialog function documentation. |
| ShowToast | ShowToast function documentation. |
| ToastOptions | ToastOptions function documentation. |
| useFieldExtension | useFieldExtension hook documentation. |
| useFormSidebarExtension | useFormSidebarExtension hook documentation. |
| useApp | useApp hook documentation. |
| Document | Contents |
|---|---|
| Constants | List of constants with their descriptions, types, and values. |
| Document | Contents |
|---|---|
| openAssetPicker | Contains an example that will help you use the openAssetPicker method. |
| Document | Contents |
|---|---|
| React SDK | Link to our App Framework React SDK. |
| JavaScript SDK | Link to our JavaScript SDK. |