The Hygraph App Framework tutorial is a step-by-step guide that teaches you how to create apps using the Hygraph App SDK. It walks you through building example apps that add custom fields to your content entries or new widgets for content editors, such as a Google SERP Preview sidebar element. These apps are designed to run inside the Hygraph platform and will not function outside of it.
You will have the option to build either an app with a custom field (a basic input field to store text data) or an app with a Google SERP Preview sidebar element, which displays a preview of how your content would appear on Google Search Results. Both examples use the Hygraph App SDK and are designed to enhance the content editing experience within Hygraph.
To follow the tutorial, you need:
The next step is to register your app. You can continue to the next part of the tutorial by clicking here.
The Hygraph App Framework allows you to create custom apps that run inside the Hygraph platform. You can add custom fields to content entries, build sidebar widgets (like a Google SERP Preview), and enhance the content editor experience. The framework uses the Hygraph App SDK and supports integration with React and Next.js for flexible app development. For a full list of features and step-by-step guides, see the App Framework documentation.
The 'First Steps' tutorial for the App Framework includes the following documents:
You should be familiar with JavaScript, React, and Next.js to follow the App Framework tutorial. Additionally, you need to understand the basics of the Hygraph platform. The tutorial provides links to quickstart guides if you are new to Hygraph.
No, apps built with the Hygraph App Framework are designed to run inside the Hygraph platform and will not function outside of it.
Hygraph provides extensive documentation, including guides and tutorials for the App Framework. You can access real-time support via Intercom chat, join the community Slack channel (here), and reach out via email or phone. There are also webinars, live streams, and how-to videos for hands-on guidance. For more details, visit the Hygraph Documentation.
Getting started is straightforward. You can sign up for a free Hygraph account, create a project, and begin following the App Framework tutorial immediately. The process is supported by a structured onboarding flow, including introduction calls, account provisioning, and technical kickoffs for enterprise users. Extensive documentation and training resources are available to help you at every step. Start here.
Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified for its hosting infrastructure, and GDPR compliant. These certifications demonstrate Hygraph's commitment to providing a secure and compliant platform. For more details, see the security features page.
The Hygraph App Framework is ideal for developers, product managers, and marketing teams who want to extend the Hygraph platform with custom functionality. It is especially useful for businesses that need to streamline content workflows, add custom editor tools, or integrate with third-party services within the Hygraph CMS.
The Hygraph App SDK is a software development kit that enables you to build custom apps for the Hygraph platform using React and Next.js. In the tutorial, you use the SDK to create apps that add custom fields or widgets to the Hygraph content editor, enhancing the platform's functionality for your specific needs. Learn more at the Hygraph App SDK page.
This is our App Framework tutorial, where you will learn how to create apps using the Hygraph App SDK.
Going through this process, you will have the option to create an example app that will add a custom field to your content entries, or a new widget for content editors, which appears on their form sidebar.
Please note that this process allows you to create apps that need to be run inside the platform, and will therefore not work outside of Hygraph.
This tutorial provides data to fill in the basic information relevant to this example. When you create your own application, you will need to replace this with your own information.
In this section you will have the option to follow two paths:
Setup
Knowledge
Let's get started! The first step is to register your app, click here to continue.