How to preview content changes on Gatsby Preview

If you are using Gatsby as your static site generator of choice, maybe you would like to show a preview of what you are editing to someone else.

Or maybe you are an editor, and you would like to see your changes right away without triggering a full build of your website.

Here comes Gatsby Preview, a way to have your cloud instance managed by the Gatsby team itself, with your code running in preview mode, allowing you to see the changes instantly on a live site.

How to set up a Demo with Gatsby Preview

If you are just starting with either Gatsby Preview or DatoCMS, you can just set up a free account on both and start playing with our portfolio demo project.

Head out to Gatsby preview, and you'll be able to pick a DatoCMS starter project quite easily:

The excellent wizard will guide on setting up a Gatsby Preview instance and also a DatoCMS project, all wired up so that it works out-of-the-box in just a few easy and quick steps.

Gatsby Cloud plugin

Last but not least there's a convenient plugin that will open the Gatsby instance directly from the DatoCMS record you are editing.

You'll find a button in the sidebar, looking like this:

The plugin will query your Gatsby instance to find the most likely URL and open a new tab reading the record's slug, getting you directly to the page you are editing. So handy!

The plugin will be already present and set up in the demo project, but in case you want to add it on your own, you can get it from our plugins directory.

What now?

Now you can go to your DatoCMS editor interface, change anything and see how that is immediately reflected in your Gatsby Preview!

Pretty cool, huh?

That was only a demo, but setting up your real project is not complicated either.

Just start as usual by creating a project in DatoCMS and wiring up your Gatsby code hosted on Github (it's a requirement for now).

Then, when you are ready to set up your preview instance, start a new project picking an existing repository:

And you are back having your DatoCMS project in sync with a Gatsby Preview instance.

Thank you, Gatsby-team for having implemented such a smooth experience!

Need help?

If you need any help with either Gatsby Preview or our integration in general, please head to our community forum, we'll be there!

Get started with DatoCMS now
No credit card required, 30 seconds sign-up
Try for free!