An interface to push realtime updates to the live preview iframe.

Tested with Directus 10.10.4

This extension pushes live value updates to the live preview iframe.

Example Code: example endpoint

Requirements:

1. Set the Live Preview URL
2. Add the Live Preview Sync interface

{
  "type": "directus-preview",
  "path": "/admin/content/<collection>/<id>",
  "values": <form-values>,
}

For this to work the live preview page needs to be listening for the events. On the preview page add code with the following bootstrap:

window.addEventListener("message", (event) => {
    const { type, path, values } = event.data;
    if (type === 'directus-preview') {
        // do something creative
    }
}, false);

Included Example

Random Map Example