App Framework first steps


In this tutorial 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.

What you will buildAnchor

In this section you will have the option to follow two paths:

  • Creating an app with a custom field using the Hygraph App SDK. It's a basic input field to store text data.
  • Creating an app with a Google SERP Preview Sidebar element. It will display a preview of how your content would appear on Google Search Results.



  • You must have a Hygraph account. If you don't have one, you can create one here.
  • You must have a Hygraph project to test the app in.
  • You need the latest LTS version of Node.js installed on your machine. If you don't have it, you can download it here


  • Be familiar with the Hygraph platform. If you're not yet familiar with Hygraph, check out our quickstart.
  • Be familiar with JavaScript
  • Be familiar with React
  • Be familiar with Next.js

Let's get started! The first step is to register your app, click here to continue.