Setting Up Live Preview with Craft CMS in Headless Mode

In my previous post, I talked about transitioning my site from being powered by Craft to being powered by Remix and a GraphQL endpoint coming from Craft. One of the best features of Craft is Live Preview, and it took a little configuration to get this working on my new Remix powered site.

Remix Configuration

These were specific changes that I needed to make on the Remix side, but really it would be the same for any GraphQL request. As Andrew Welch breaks down in his article, the key is passing the token parameter back that Craft included in the URL.

In the loader function of my blog post route, I call a helper function to setup the GraphQL client, and I pass the request to it:

And then in my helper function, I take that request, grab the URL params that I want to include, and add those to my GraphQL request endpoint URL:

It wasn’t totally necessary to include the x-craft-preview and x-craft-live-preview parameters, but I figured it couldn’t hurt.

Craft Configuration

Now with the Remix configuration in place, I just needed to make two small changes to Craft to get it working correctly. First, I had to update the preview target for my Blog section to point to my Remix site:

Then, I had to update the config/general.php to allow iframe requests from my Remix domain:

Voilà, Live Preview

And just like that, I had live preview working.