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:

'gevme-content-created', { detail: { data: ContentBlock } };

'gevme-content-updated', { detail: { data: { old: ContentBlock, new: ContentBlock } } };

'gevme-content-deleted', { detail: { data: ContentBlock } };

'gevme-header-updated', { detail: { data: Header } };

'gevme-livebar-updated', { detail: { data: Livebar } };

'gevme-content-reorder', { detail: { data: { order: number; id: string; name: string; } } };

'gevme-content', { detail: { data: data } };


You may write your own custom logic as such

document.addEventListener("gevme-content-created", (event) => {
  const contentBlockThatJustGotCreated = event.detail.data;
  // do something with this block

document.addEventListener("gevme-content-updated", (event) => {
  const oldBlock = event.detail.data.old;
  const newBlock = event.detail.data.new;
  // do something with this block

document.addEventListener("gevme-content-deleted", (event) => {
  const contentBlockThatJustGotDeleted = event.detail.data;
  // do something with this block

← Previous: Feature Restrictions