Easily restore your project to a previous version with our new Instant One-click Backup Recovery
Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

Hygraph recipes

#Overview

Hygraph Recipes is a collection of developer resources that can help you discover how to combine different field types to create schema elements.

You will find documentation sections - which we are calling Cookbooks - based on real-life use cases. Each cookbook contains a number of guides - or Recipes! - that show different ways of creating an element type.

You can use this content to learn how to work with Hygraph and discover what you can do with it, or clone projects that already contain schema elements to save yourself time!

Each recipe offers 2 paths:

  • A step-by-step guide, in case you want to build these elements from scratch.
  • A clonable cookbook project containing several recipes, in case you want to compare the different ways to build a schema element.

#Highlights

Banners

Buttons

Card Grid

CTA

Headers & footers

Image galleries

Navigation

Page sections

#Recipes list

CookbookRecipeDescription
BannersSimple bannerLearn how to create a simple banner
BannersReferences bannerLearn how to create a banner model that allows you to easily reference content from other models
BannersBanner sliderLearn how to create a banner slide where you can add multiple banners that will change on a timer
BannersImage bannerLearn how to create an image banner with
ButtonsSimple buttonLearn how to create a simple button
ButtonsSocial linksLearn how to create a to link your socials
ButtonsStyled button linkLearn how to create a link button that uses style dropdowns
Card GridCard grid with componentsLearn how to create a card grid using components
Card GridCard grid with referencesLearn how to create a card grid using references
CTASimple CTALearn how to create a simple CTA
CTACTA with socialsLearn how to create a CTA with social links
CTAStyled CTALearn how to create a CTA with style dropdowns
Headers & FootersFooter with linksLearn how to create a footer with links
Headers & FootersFooter with sectionsLearn how to create a footer with columns as sections
Headers & FootersHeader with linksLearn how to create a header with links
Headers & FootersHeader with notificationLearn how to create a header with a notifications line at the top
Image galleriesFormatted gallery sectionLearn how to create an image gallery component with format dropdowns and columns
Image galleriesGallery with informationLearn how to create an image gallery model with a basic component fields to add images with metadata
Image galleriesStyled image galleryLearn how to create an image gallery component with style
NavigationSimple navigationLearn how to create a simple navigation
NavigationStyled navigationLearn how to create a navigation with style dropdowns
NavigationSectioned navigationLearn how to create navigation with internal sections
Page sectionsMulti-purpose sectionLearn how to create a multi-purpose section component that you can add as a block selector to different models in your schema
Page sectionsRelated content blockLearn how to create a related content block component containing a title, a body, an image, and a reference
Page sectionsLanding pageLearn how to create a dynamic landing page model that will allow you to create different landing page configurations