Skip to content

br41nslug/directus-extension-live-preview-sync

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Directus Live Preview Sync

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

Tested with Directus 10.10.4

Usage

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

Example Code: example endpoint

Requirements:

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

Message Structure

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

Updating the Preview Page

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);

Examples

Included Example Example Demo

Random Map Example Dynamic Map Demo

About

Directus Live Preview form value synchronization

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published