10 Must-Have Gatsby Plugins for Sanity

The Gatsby framework is one of the most popular React frameworks that provide the speed and simplicity of a static site generator. Sanity's customizable approach to content management integrates seamlessly with Gatsby's plugins.

The most sophisticated web applications are now easier to create than ever. You can have a system that scales with your project, allows you to iterate, and assists you in learning from your products up and running in just a few minutes.

10 Gatsby-Sanity Plugins

The vast Gatsby Plugin Library is one of the many reasons why people may choose to use Gatsby. Thousands of different plugins with almost seamless drop-in support, make the developing experience with Gatsby very smooth. Here are 10 Must-Have Gatsby Plugins for Sanity.

1. gatsby-source-sanity

This plugin works to pull data from Sanity CMS into Gatsby websites and comes with a real-time preview of all content changes. This plugin is also compatible with gatsby-image.

How to Install

From the command line, use npm (node package manager) to install the plugin:

npm install gatsby-source-sanity

2. Gatsby Theme for Marketing/Launch Sites

This is an ideal theme if you’re looking to set up simple pages on a site. This theme currently relies on Sanity.io.

How to Install

To set this site up, you’ll need a Sanity instance available and the GraphQL API deployed. From the command line, run the following  script to install the plugin:

yarn add gatsby-theme-marketing-sanity

3. Gatsby-Theme-Blog-Sanity

A Gatsby theme to pull blog posts from Sanity.io. This theme doesn’t provide much by way of styling, but it’s hooked up to theme-ui’s Gatsby plugin for easy style overrides.

How to Install

To install the plugin in your Gatsby project, run the following script:

yarn add gatsby-theme-blog-sanity

Set up your environment variables in .env.development

4. Gatsby-Plugin-Sanity-Image

You will find the planned union between the image assets of Sanity and Gatsby that you have been looking for.

There are no nested DOM structures to deal with, just outputs a single <img> tag. Out-of-the-box support for image previews of lower quality, with no increase in build time required. Generates a srcSet automatically based on the width that you specify in your component code.

Applies the data from the Sanity hotspots to the object position in case you require it. Calculates the dimensions of the cropped image and, when necessary removes srcSet entries whose dimensions are greater than those of the source image. Utilizing Sanity's Image API, one can customize aspects such as image quality, resizing behavior, file format, and more.

How to Install

From the command line, run the following  script to install the plugin:

yarn add gatsby-plugin-sanity-image

5. Gatsby-Source-Sanity-Transform-Images

This plugin extends the Gatsby Sanity GraphQL schema to add a localFile field to the SanityImageAsset type. The field localFile returns a File type. This enables downloading remote images to local so you have the flexibility to deploy them to a different CDN (or even process them with gatsby-plugin-sharp if you need to).

How to Install

From the command line, use npm (node package manager) to install the plugin:

npm i gatsby-source-sanity-transform-images --save

6. Gatsby-Theme-Catalyst-Sanity

This theme adds a data layer for Sanity.io on top of gatsby-theme-catalyst-core via component shadowing. This is used as a “core” theme for Sanity.io and is designed to be modified and shadowed in the final site. You can see an example of this theme stacked and further customized with gatsby-theme-catalyst-bery.

How to Install

From the command line, use npm (node package manager) to install the plugin:

npm i gatsby-theme-catalyst-sanity

7. Gatsby-Plugin-Sharp

This plugin is used for image processing. It compresses images on your site according to your configuration. It aims to provide excellent out-of-the-box settings for processing common web image formats.

It exposes several image processing functions built on the Sharp image processing library. This is a low-level helper plugin generally used by other Gatsby plugins. You generally shouldn’t be using this directly but might find it helpful if doing very custom image processing.

It aims to provide excellent out-of-the-box settings for processing common web image formats. For JPEGs, it generates progressive images with a default quality level of 50. For PNGs, it uses pngquant to compress images. By default, it uses a quality setting of [50-75].

How to Install

From the command line, use npm (node package manager) to install the plugin:

npm install gatsby-plugin-sharp

8. Gatsby-Plugin-React-Helmet

React Helmet is a component that lets you control your document head using its React component. This is one of the most used gatsby plugins. It helps in your site SEO as it holds titles and meta-data of your site which is used by Google for determining placement in search results.

It provides drop-in support for server rendering data added with React Helmet. React Helmet is a component that lets you control your document head using its React component. With this plugin, attributes you add in their component, e.g. title, meta attributes, etc. will get added to the static HTML pages Gatsby builds.

This is important not just for site viewers, but also for SEO — title and description metadata stored in the document head is a key component used by Google in determining placement in search results.

How to Install

From the command line, use npm (node package manager) to install the plugin:

npm install gatsby-plugin-react-helmet react-helmet

9. Gatsby-Plugin-Manifest

This plugin helps in creating a progressive app version of your gatsby site. It allows users to add your site to their home screen on most mobile browsers and set their icon for your progressive app.

The web app manifest that is enabled by this plugin gives users of most mobile browsers the ability to add your site to the home screen of their device. The phone receives its configuration as well as its icons from the manifest. In addition to the manifest configuration options, this plugin gives you access to several other features that will make your life easier.

• It generates multiple sizes of icons automatically from a single source using automatic icon generation.

• Favicon support Legacy icon support (iOS)[^1]

• Clearing out caches

• Provides unique manifests for path-based localization as part of the localization process.

• You are always in control thanks to the extensive configuration options that are available for each of these features.

How to Install

From the command line, use npm (node package manager) to install the plugin:

npm install gatsby-plugin-manifest

10. Gatsby-Plugin-Page-Creator

Gatsby plugin that generates pages from React components that are located in a directory of your choosing automatically. This plugin for generating pages from components located in src/pages is automatically included in all sites created with Gatsby. You can also make use of the File System Route API to automate the generation of pages from the data you provide.

If you want to override the default usage or create additional "pages" directories, you can include another instance of this plugin in your website by doing either of these things.

When using this plugin, it is expected that any file that is located in the specified pages folder (for example, the default src/pages folder) or any subfolders will export a React Component to generate a Page.

How to Install

From the command line, use npm (node package manager) to install the plugin:

npm install gatsby-plugin-page-creator

Wrapping Up

Gatsby is a lightning-fast React frontend framework that can be easily integrated with Sanity.io's cutting-edge content management system to supercharge your websites. You will have access to all of the information contained in Sanity's data.

Once you have successfully connected Gatsby to Sanity using Gatsby plugins, you can now easily integrate a GraphQL query into any of your pages to retrieve data from Sanity.

Gatsby's power comes from thousands of different plugins. It's wonderful to be able to easily access the contents of your CMS at build time without having to go to such lengths.