Join us live as we unveil the all new Hygraph Studio!

Hygraph
Docs

App walkthrough

#Overview

Welcome to our Hygraph app walkthrough. This document will show you the entire app.

We'll go over each section and discuss what you can do in them.

At the end of the document you'll find a special section listing & describing actions and where they are located in the app.

#Dashboard

The Dashboard is the section of a project you land on when you first create it, and every time you access it after that.

It contains useful information such as project statistics, contact links to schedule a demo with our team, videos on some of our features, documentation & example links, and in-app documentation on connecting your frontend.

It also displays the quick start checklist, which will guide you through the process of setting up your first project.

#Onboarding checklist

Quick start checklist in project dashboardQuick start checklist in project dashboard

The quick start checklist, initially located on the lower right corner of the screen of your project, is designed to onboard you into using Hygraph.

The checklist will take you through your first steps in the Hygraph app, from creating a project, to enabling API access to share your content with others.

Quick start checklist closeupQuick start checklist closeup

It contains a progression line, so you can follow how far along you are in the process, the steps, with a brief description of each one, and a button that links you to the place in the app where each step will be carried out. As you move forward, completed steps will be ticked off and the following one will display.

Quick start checklist collapsed viewQuick start checklist collapsed view

You can use the chevron button on top of the progression line to collapse the list for a more minimal view, then click on it again to fully display it. The collapsed view shows only the checklist progression bar, and a line for the next step.

Quick start card in project dashboardQuick start card in project dashboard

If you close the checklist using the X button, a card will display at the top of the dashboard. The card shows the same progression line, as well as a link to reopen the checklist, in case you wish you have it displayed again.

The steps:

  • Create a project: Given that you will only see the checklist when you first access your project dashboard, the Create a project step will be ticked off already.
  • Set up your schema: The second step on the checklist suggests creating the minimal content necessary for a functional schema, that is, one model containing one field. Both of these actions are covered in our getting started tutorial: you will find information on creating your first models and adding field to them in our Getting Started tutorial.
  • Create content: The third step on the checklist suggests creating content using our intuitive Content editor. These actions are covered in our getting started tutorial under content creation and content publishing.
  • Explore your content API: The fourth step takes you to our API Playground, where you can fetch content using GraphQL. Use of the API Playground is covered in our getting started tutorial, in our queries and mutations practice.
  • Make your API accessible: The final step on the checklist takes you the API Access section of your Project settings, where you can enable access to your API. This is covered in getting started tutorial, in the connect storefront lesson.

#Schema builder

Your schema is defined by the models you create, and fields you add. It is the backbone of your Hygraph project. In the Schema builder you'll define the structure of your content by adding fields, creating relationships between models, and much more.

#Content editor

The Content editor is where you create, edit, publish and unpublish content using the structure of the schema you previously created.

The Content editor presents default and custom views for you to access your project's contents. It also allows the possibility of reloading your content, previewing it in the API Playground, or viewing the model.

#Assets manager

The Digital asset manager - or Assets - is where you upload and store documents to be used in your content entries.

The Assets tab presents default and custom views for you to access your uploaded assets.

#API Playground

You can use the API Playground to test out API calls, by experimenting with querying and mutating data.

#Mutations

Look into mutating data in our API Playground.

#Endpoints

Find your endpoints in the UI by navigating to your project settings.

#Other features

FeatureDescription
NotificationsThe Notifications section informs you of comments assigned to you in content entries. If you have unread comments, a red mark will appear on the bell icon. This section picks up notifications from all your Hygraph projects.
AppsThe Apps section is where you can configure or uninstall apps from your project. Each installed app will display in a card, where you will have the option of editing its configuration by clicking on the pencil icon, or uninstalling it by clicking on the trash icon. The configuration options depend on the app, they are the ones you initially set up during installation. You can also find a link to our Marketplace at the top, where you can browse the apps you can install.
WebhooksIn the Webhooks section, you can add webhooks to your project's deployment according to triggers you can configure. This section displays each webhook in a card, with options to edit its configuration, view its logs, and delete it.
Project settingsThis is where you can access your project's global information, and manage its settings. This screen contains both, general and access settings.

#Where do I...?

ActionWhere in HygraphDescription
Create a modelSchema BuilderYour schema is the content structure of your project. You can define your schema by creating models and adding fields to them.
Add fields to my modelSchema BuilderYou can add fields to your models to define your project schema.
Customize my sidebarSchema BuilderYou can configure schema sidebar adding and/or removing system and custom widgets.
Add componentsSchema BuilderYou can create components to use them as flexible, reusable templates where you define the fields once - in the Schema - and then fill them with different content every time you use the component in a content entry.
Add remote sourcesSchema BuilderYou can use remote sources to add content from other systems and sources to the Hygraph API without having to migrate the content itself.
Add enumerationsSchema BuilderYou can use enumerations to group values within a type, or to create a list of values, which can then be used when adding a dropdown field to your models.
Schedule publishingContent EditorYou can schedule content publishing, and unpublishing as single entries, or group them as part of a release.
Create contentContent EditorYou can create content entries based on the models you created in your schema.
Publish contentContent EditorYou can publish content so it can be consumed by others.
Update contentContent EditorYou can update content you've already created, whether it's been published or not.
Duplicate contentContent EditorYou can easily duplicate content, which saves time during content creation of similar entries.
Delete contentContent EditorYou can delete content entries individually or in bulk, and you can also delete related content.
Access created contentContent EditorYou can navigate to the content editor to access your content. This experience can be customized.
Add an asset entryDigital Assets ManagerYou can upload assets and add metadata to them, providing you've added metadata fields to the Assets model.
Upload assetsDigital Assets ManagerYou can quickly upload assets from different sources into the CMS.
Work with assetsDigital Assets ManagerYou can work with your assets table in a similar way as you would with content entries in the Content editor.
Manage notificationsNotificationsYou can use our commenting feature to manage notifications and work collaboratively with your team.
Install integrated appsAppsYou can install apps from our Marketplace in your Hygraph project to enhance its capabilities.
Configure webhooksWebhooksYou can configure webhooks to trigger actions in your project.
Manage my project's global informationProject settingsYou can access your project settings to edit your project details, clone your project, enable public cloning and even delete your project.
Clone my projectProject settingsYou can create a copy of your project's master environment by cloning it.
Delete my projectProject settingsYou can delete your project from project settings.
Share my projectProject settingsYou can enable public cloning to share a link that other people can use to clone your project.
Manage my project environmentsProject settingsYou can use different environments to safely work on isolated instances of your project.
Manage audit logsProject settingsYou can access audit logs to see all changes inside of your project. They contain both changes in the schema and content.
Manage my project's content stagesProject settingsYou can manage your content stages to create custom workflows.
Manage my project's localesProject settingsYou can add locales to include content in different languages.
Manage your billing informationProject settingsYou can update your billing information by accessing your project settings.
Manage custom UI extensionsProject settingsYou can use UI extensions to replace default components in the content editor with custom solutions.
Manage API accessProject settingsYou can manage API access from your project settings. Manage your endpoints, public content API permissions, and permanent auth tokens.
Manage roles and permissionsProject settingsYou can manage roles and permissions to create efficient workflows and build independent teams.
Manage team membersProject settingsYou can add members to your Hygraph project and overview the roles they have been assigned to.