Gatsby Cloud Docs

Adding the Gatsby Cloud Extension to DatoCMS

See how to add the Gatsby Cloud extension to DatoCMS

Table of Contents

What is the Gatsby Cloud DatoCMS plugin?

A plugin that installs a Gatsby Cloud extension in a DatoCMS project. This is especially valuable for content editing workflows.


The site must be set up with a Gatsby Preview instance. Please see “Getting Started with Gatsby Preview and DatoCMS”.

Installing the plugin

In DatoCMS, add the Gatsby Cloud DatoCMS plugin to the project in Settings > Plugins.

Screenshot of plugin button in DatoCMS

Screenshot of searching for Gatsby Cloud plugin in DatoCMS

Configuring the plugin

Please specify a Gatsby Cloud preview instance url in the plugin global settings and toggle the development mode “on”.

Configuration screenshot

Also, you can optionally input an authToken on the plugin settings page.

Assigning the plugin to a field

The Gatsby Cloud plugin can be assigned to the slug field. Please see the DatoCMS documentation on assigning a plugin to a field.

What does the final result look like in DatoCMS?

Once you’ve configured the plugin, anyone editing content will be able to see the Gatsby Cloud “open preview” button below each slug field.

Screenshot of the DatoCMS plugin in the sidebar

Plugin options

Make sure that in your gatsby-config.js file, the gatsby-source-datocms plugin’s previewMode is set to true. See the plugin documentation for more details on the options and usage.