Deploys by Netlify
Visit us on GitHub


To enable previews you either need a running instance of gatsby develop with ENABLE_GATSBY_REFRESH_ENDPOINT env variable enabled or a Preview instance running in Gatsby Cloud.

Check out the official docs on how tu run your preview instance


To be able to see previews in gutenberg, you need to install a plugin into Wordpress.


  • Install the plugin manually, by downloading it from here.
  • Install with composer
composer require gatsby-wordpress-gutenberg/wp-gatsby-gutenberg


The enable live previews in Gutenberg, follow these steps:

  • enable your preview instance through Settings -> GatsbyJS
  • enable previews in gutenberg in Settings -> GatsbyJS Gutenberg

You should see preview icon inside block's edit toolbar.

Block Preview

Each time a block content is changed and the preview button is clicked, a new Gatsby Preview trigger is send. This means this will also count to your previews count when running on Gatsby Cloud.

How does it work

  • wp-graphql-gutenberg saves the live changes in gutenberg in the database within custom post type, which has one to one relationship with the edited post
  • when clicking the block preview button (available when the option is enabled), the preview content is sourced by gatsby-source-wordpress-experimental and special preview page for that post type is created within gatsby-theme-wordpress-gutenberg
  • the page with the highlighted block is then displayed inside gutenberg within an iframe
Edit on GitHub