Live Preview in Editor

What is Live Preview?

To make the experience of editors smooth in the Venue Editor, we have to ensure there is a true WYSIWYG experience - i.e, when a user makes a change on the left hand content editing panel, the preview on the right hand panel should be almost instantaneous.

If you are building a complex venue that does not use our standard frontend components, then you might need to add the support for the Live Preview by using our Javascript event listeners.



  1. Create a livepage

  1. Go to People Tab, create a user and generate a magic link. Paste the content of your clipboard in a new browser tab.
  2. image

  3. Make changes and click on Save & Publish changes.
  4. Notice that on the link generated URL, the changes is automatically updated without the user having to refresh the page.

Custom Event Listeners

Types of events

As a developer, you are able to add customizations such as alert/notification functions for these different events:

  • gevme-content-created
  • gevme-content-updated
  • gevme-content-deleted
  • gevme-content-reorder
  • gevme-header-updated
  • gevme-livebar-updated

Common use cases

Common use cases for addEventListener:

  • Trigger notification alert dialog on the webpage when a block is created
  • Scroll automatically to the block that was just updated
  • Re-initialize 3rd party script SDK
  • Send data for analytics service and many more.

Event Body

Body of each events are as such:


You may write your own custom logic as such