Structured Content 101: Find out how to make your content work harder (without your team working harder) →

Gatsby resources

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

4 Gatsby tools

Gatsby Cloud

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

Go to Gatsby Cloud

Sanity Codegen
- has 27 likes

Generate TypeScript types from your Sanity schemas. Also includes a simple and tiny (<1kB) TypeScript powered client. Built for Jamstack apps.

Rico Kahler
Go to Sanity Codegen

Gatsby source plugin

Official(made by Sanity team)

Source plugin for pulling content from into Gatsby websites.

Go to Gatsby source plugin

6 Gatsby starters

HeySugar (Gatsby)

An open-source, self hosted, blood sugar tracker for type one and type two diabetics. Developed with Sanity and built with Gatsby.

Jamie Bradley
Go to HeySugar (Gatsby)

Kitchen Sink

Official(made by Sanity team)’s ever-evolving feature-rich demonstration studio. Fully customizable examples of page building, blog template and more examples with a React.js front-end.

Go to Kitchen Sink

Blog with Gatsby

Official(made by Sanity team)

Fully customizable blog template with a Gatsby & React.js front-end.

Go to Blog with Gatsby

Gatsby Theme Catalyst Bery

A minimalist personal blog featuring a Gatsby frontend and SANITY backend with automatic RSS feeds, and sortable posts.

Eric Howey
Go to Gatsby Theme Catalyst Bery

Gatsby Theme Catalyst

A minimalist integration of Gatsby and SANITY designed as a starting point to accelerate your development workflow.

Eric Howey
Go to Gatsby Theme Catalyst

Gatsby Portfolio

Official(made by Sanity team)

A clean Gatsby & React.js starting point for portfolios, project listings or case studies.

Go to Gatsby Portfolio

11 Gatsby guides

View all

Adding Bulma CSS to your React application

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.

Tomi Adekanye
Go to Adding Bulma CSS to your React application

Using Theme UI with

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

This is an external link
Eric Howey
Go to Using Theme UI with

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

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.

This is an external link
Eric Howey
Go to Form submission using Gatsby, SANITY, Netlify and React Hook Form

How to Make Taxonomy Pages With Gatsby and

Official(made by Sanity team)

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

This is an external link
Knut Melvær
Go to How to Make Taxonomy Pages With Gatsby and

57 Gatsby projects made with Sanity

View all


Complex product offering with nested product structure and tiered pricing.

Kevin Green
Go to Occo

Figma Config

Website for Config, the global design conference by Figma.

Corey Ward
Go to Figma Config

The Agnes

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.

David Gross
Go to The Agnes

Why Mums Don't Jump

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

Paul Brickles
Go to Why Mums Don't Jump

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.

Other frameworks

All frameworks