The GatsbyJS framework is one of the most popular React frameworks available in web development today. Offering all the speed and ease of use of a static site generator with the power of a fullstack application, Gatsby allows development of advanced websites in the time it takes to create a mock-up. Check out these guides, starters, and plugins for use in Gatsby with Sanity studio and get inspired by the work of our community. Sanity's customizable approach to content management integrates flawlessly with Gatsby's GraphQL data structure-- the most cutting-edge web applications are simpler to create than ever before.

Guides, plugins, and other resources for Gatsby – the popular React-based Javascript framework.

Gatsby resources

Guides, tools, starters, and other Sanity.io resources for Gatsby – the popular React-based Javascript framework.

GatsbyJS & Sanity.io | Developer Resources

Gatsby

Evan Kohout

Learn how to deploy a Gatsby Preview server on AWS using CDK to preview page content in Sanity Studio.

Deploy a Gatsby Preview Server on AWS for use in Sanity Studio

 Tomi Adekanye

In this tutorial, you'll be learning how to integrate Bulma CSS into your Gatsby (React) application. You'll be working with a few of Bulma's components and implementing them in your application.

Adding Bulma CSS to your React application

Eric Howey

Learn how to integrate SANITY.io block content with Theme UI styles on your frontend

Using Theme UI with SANITY.io

Jacob Størdahl

See how we can add a Site Settings section in our Sanity Studio so our site administrators can update relevant info on our site. 

Creating 'Site Settings' for a Sanity powered Gatsby site

A walk through of creating a contact form in Gatsby that submits to both an email address and a backend database using SANITY. The form itself will be built using React Hook Form and also integrate with Netlify forms. 

Form submission using Gatsby, SANITY, Netlify and React Hook Form

Knut Melvær

In this tutorial, we’ll cover how to make taxonomy pages with Gatsby with structured content from Sanity.io.

How to Make Taxonomy Pages With Gatsby and Sanity.io

How to start from scratch with a Sanity powered Gatsby website

Making New Projects with Gatsby & Sanity

Learn how to implement localised content from Sanity in Gatsby.js

A method for Localization with Gatsby and Sanity.io

Anchor Links from Sanity in Gatsby

Get started with the Sanity and Gatsby blog starter project

Get started with the Gatsby blog

Kevin Green

Complex product offering with nested product structure and tiered pricing.

Occo

Corey Ward

Website for Config, the global design conference by Figma.

Figma Config

David Gross

A high end rental real estate site built with Gatsby, Sanity and Shopify that pulls in listing data via API and includes a headless Shopify shop.

The Agnes

Paul Brickles

Podcast website, plus blog and custom player. Built with Gatsby with a custom source plugin for TransistorFM.

Why Mums Don't Jump

Boring Money

Boring Money is an independent business which has been set up to help normal people who don't have PhDs in finance make some smart investment decisions - quickly and painlessly.

Michael Fanuzzi

Moses Gunesch

Alice Freda

Make a Daily Difference helps you give back any day of the year, pairing international days of celebration and remembrance with organizations doing work in that field.

Make a Daily Difference

Remy Hunter

Unique site built for Jaeyoung Cheong's UX Design portfolio

cheongjaeyoung.com 💧

Josh Lind

Gain complete visibility into engagement happening in all digital channels. Take action to deliver personalized and authentic interactions across the entire customer journey.

Common Room website

3200.PRO Ryan Murray

The focus of this website design was to allow for the quick cataloging of media-based blog posts. 

Lifestyle & Business Media Blog

Innovative Procedural Spinal Solutions Showcase

Innovative Procedural Spinal Solutions Website

Sanity Studio Dashboard Widget for triggering Gatsby Cloud Preview instances/sites.

Gatsby Cloud

Rico Kahler

Generate TypeScript types from your Sanity schemas.

Also includes a simple and tiny (<1kB) TypeScript powered client.
Built for Jamstack apps.

Sanity Codegen

Easily leverage the power of Sanity's image API from React-based environments like Gatsby.