Consumer Node Preview

The Consumer Node Preview module shows unsaved content in your decoupled frontend when an editor presses Preview. Editors see the draft the way the real site will show it.

Your frontend needs a preview page that reads the unsaved node from JSON:API. The module shows that page inside Drupal's preview screen and gives it the address of the unsaved node.

Features:

• A preview screen with three tabs.
  • Frontend - the draft on your decoupled site.
  • Drupal - core's preview.
  • JSON:API - the document the frontend reads.
• Preview targets on each consumer, such as local, staging and production.
• Preview targets in settings.php, for URLs that change per environment.
• Phone, Tablet and Full widths, and an "Open in new tab" link.
• Frontend, View mode and Layout selects that switch the preview without a page reload.
• Unsaved paragraphs in the preview, nested up to three levels.
• An API endpoint where a frontend registers its preview targets, such as a dev server adding its URL.
• Preview opens in the admin theme when content editing uses it.
• Tested with Claro, Gin and Olivero.

Requirements:

• Drupal 10.3 or 11
• Consumers
• JSON:API Node Preview, with the include fixes from issue 3367724 until a release has them. It is in beta, so require it first: composer require drupal/jsonapi_node_preview:^1.0@beta
• A frontend with a preview page.

Usage/Configuration:

Once installed, add a preview target to a consumer: a label and a URL.

Example: Administration > Configuration > Web services > Consumers
/admin/config/services/consumer

Put the [jsonapi_node_preview] token in the URL's fragment, such as https://www.example.com/node/preview?vm=[view_mode]#[jsonapi_node_preview]. The preview page reads the document URL from location.hash and fetches it with credentials: 'include'. The editor's Drupal session goes with the request, and no API key is needed.

Allow the frontend's origin in the site's services.yml CORS settings, with supportsCredentials: true.

The README covers the other tokens, targets in settings.php, layouts and target registration.

Similar Projects:

• Decoupled Preview - previews published content, revisions and edits on Next.js sites, with an OAuth consumer for each preview site.
• Decoupled Preview Iframe - shows one frontend URL in place of Drupal's preview.
• Next.js for Drupal - includes preview for Next.js sites.

Frequently Asked Questions:

• Can it preview a saved, unpublished node?
  Open the node's edit form and press Preview. The module previews the edit form, not saved revisions.
• Why does the Frontend tab show an error instead of the draft?
  The editor's session cookie did not reach Drupal, and the preview document answered 404. Drupal's session cookie is SameSite=Lax, so browsers send it only when the frontend and Drupal share a site, such as www.example.com and cms.example.com. Check the CORS settings too, and that the preview page fetches with credentials: 'include'. The frontend must also allow Drupal to show it in a frame.