# Register your app Learn how to register your app on the Hygraph platform. This document covers most steps of the registration process, from general configurations, to permissions, and app elements registration. ## Overview When you decide to build an app for Hygraph, you must register it on the platform. In this tutorial, we are only going to complete the basic information in the [General](https://hygraph.com/classic-docs/app-framework/register-an-app#general), [Permissions](https://hygraph.com/classic-docs/app-framework/register-an-app#permissions) and [Elements](https://hygraph.com/classic-docs/app-framework/register-an-app#elements) tabs. If you want in depth information about the app registration process, along with all the options available, as well as all possible actions you can take in the registration form, [click here](https://hygraph.com/classic-docs/app-framework/register-an-app). **Let's get started:** Navigate to **User settings > Your apps**, then click on the `+ Add new app` button. This will lead you to the [App registration form](https://app.hygraph.com/apps/new). ![Your apps](https://hygraph.com/images/classic-docs/app-framework/app-framework-yourapps.png) ## General In the **General** tab of the app registration process, fill in the following information: ![App registration - General](https://hygraph.com/images/classic-docs/app-framework/app-framework-register-general.png) - **Name:** This is the name of your app. For this example, write `App SDK Demo`. - **Description:** A description for what your app does. For this example, write `Example App Framework Application`. - **Avatar URL:** URL that indicates where your logo is hosted. For this example, use `https://i.pravatar.cc/300?img=69`. - **API ID:** Write your API ID here. The ID is globally unique, so the form will let you know if the name is taken. This field only allows alphanumeric characters, underscores and hyphens, and you must start with a lowercase letter. This field becomes read-only once the app is created. - **Setup URL:** The setup URL is the form that displays when you install an app for the first time in Hygraph. For this example, write `http://localhost:3000/setup`. ## Permissions This section shows the access details of your app. ![App registration - Permissions](https://hygraph.com/images/classic-docs/app-framework/app-framework-register-permissions.png) For this tutorial, we suggest you give read/write permissions but you can select your own. **Warning:** Permissions can't be edited after the initial save. Consider this information when creating your own app outside of this tutorial. ## Elements ![App registration - elements](https://hygraph.com/images/classic-docs/app-framework/app-framework-register-elements.png) **What are you building?:** **Are you building a custom field element?** Click [here](https://hygraph.com/classic-docs/app-framework/first-steps/register-your-app#field-element) to continue. **Are you building a sidebar element?** Click [here](https://hygraph.com/classic-docs/app-framework/first-steps/register-your-app#sidebar-element) to continue. **Are you building a page element?** Click [here](https://hygraph.com/classic-docs/app-framework/first-steps/register-your-app#page-element) to continue. ### Field element - **Elements:** Add an element by clicking on `+ Add element`: - **Name:** Name of your element. For this example, write `Custom field`. - **API ID:** Your element's API ID. For this example, write `appCustomField`. - **Type:** This is the element type. For this example, select `field` from the dropdown menu. - **URL:** The element's dedicated URL. For this example, write `http://localhost:3000/custom-field`. - **Description:** It's the description that will appear under your field name in the Schema. For this example, write `Custom field`. After you've filled in all the information provided for this example, you can save your app by clicking on the `Register app` button. The next step is to develop your application. [Click here](https://hygraph.com/classic-docs/app-framework/first-steps/develop-your-application) to continue. ### Sidebar element - **Elements:** Add an element by clicking on `+ Add element`: - **Name:** Name of your element. For this example, write `Google SERP Preview`. - **API ID:** Your element's API ID. For this example, write `appFormSidebar`. - **Type:** This is the element type. For this example, select `formSidebar` from the dropdown menu. - **URL:** The element's dedicated URL. For this example, write `http://localhost:3000/google-serp-preview`. - **Description:** It's the description that will appear under your field name in the Schema. For this example, write `Google SERP Preview`. After you've filled in all the information provided for this example, you can save your app by clicking on the `Register app` button. **Tip:** The next step is to develop your application. [Click here](https://hygraph.com/classic-docs/app-framework/first-steps/develop-your-application) to continue. ### Page element - **Elements:** Add an element by clicking on `+ Add element`: - **Name:** Name of your element. For this example, write `Custom page view`. - **API ID:** Your element's API ID. For this example, write `custom-page-view`. - **Type:** This is the element type. For this example, select `page` from the dropdown menu. - **URL:** The element's dedicated URL. For this example, write `http://localhost:3000/page`. - **Description:** It's the description that will appear under your field name in the Schema. For this example, write `Custom page view`. After you've filled in all the information provided for this example, you can save your app by clicking on the `Register app` button. **Tip:** The next step is to develop your application. [Click here](https://hygraph.com/classic-docs/app-framework/first-steps/develop-your-application) to continue. ## Resources - [App Framework:](https://hygraph.com/classic-docs/app-framework) Overview to our **App Framework**, which extends **Hygraph** capabilities, offering the possibility of creating your own custom apps and sharing them with other users. - [Migrate to apps:](https://hygraph.com/classic-docs/app-framework/migration) A guide on migrating from UIX to app. - [Register an app:](https://hygraph.com/classic-docs/app-framework/register-an-app) Documentation for developers on how to register an app on the **Hygraph** platform. - [Using app tokens:](https://hygraph.com/classic-docs/app-framework/app-tokens) Document on how to generate an app token for your app during installation. - [Install an app:](https://hygraph.com/classic-docs/app-framework/app-installation) Step by step guide on how to install an app in your **Hygraph** project. - [Delete an app:](https://hygraph.com/classic-docs/app-framework/delete-an-app) Documentation for developers on how to delete an app you have created. - [Next.js starter:](https://hygraph.com/classic-docs/app-framework/quick-starters/nextjs) Document that guides you through the process of developing an app with a custom field using our `Next.js` starter. - [API Reference:](https://hygraph.com/classic-docs/app-framework/api-reference/api-reference-common) Our App Framework API Reference.