Partners

Gatsby live preview

How to preview content changes on Gatsby Preview

Posted on August 19th, 2019 by Matteo Giaccone

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

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

DatoCMS is the best Gatsby CMS, because it includes a plugin that seamlessly integrates with Gatsby Live Preview, the new way to have your cloud instance managed by the Gatsby team itself. With your code running in preview mode, you can 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:

Pick DatoCMS

The excellent wizard will guide on setting up a 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.

Connect to DatoCMS

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:

Gatsby live preview plugin

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 live 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 CMS 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:

Add your site

And you are back to having your DatoCMS project in sync with the Preview instance.

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

Need help?

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