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

Ikius

WordPress site migration to Sanity and Gatsby.js

Brightway Careers

Scott Wambach

Doug the Pug Foundation

Aaron Cohen

Culinary ice cream inspired by international cuisine.

Marco Ice Cream

Lukas Mason

Marketing and ecommerce site generating leads and sales.

Maddox Industrial Transformer

Aaron Bentley

Helping adventurers find the bestest loot in Minecraft Dungeons.

Minecraft Dungeons Loot Hunter

Headless portfolio site for NOSY, a creative agency working with green tech and planet conscious brands.

NOSY

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.