Visual Editor Events

Technical reference for client-side events that Stackbit emits to customize how your site reloads content.

You can customize the content-reloading behavior by taking advantage of client-side events that fire when content is updated with Stackbit.

stackbitObjectsChanged

Stackbit emits the stackbitObjectsChanged event on the window object when content has changed. This event is emitted by the is used by the Automatic Content Reload feature.

  • 1
  • 2
  • 3
window.addEventListener('stackbitObjectsChanged', (event) => {
  // Override default refresh behavior ...
})

To handle this event yourself and disable the default page refresh behavior, make sure to call event.preventDefault() in your callback code - just like you would with standard DOM events.

Event Details

On each change, your callback will be run. The callback's first argument (e.g. event) has a detail property with this shape:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
{
  currentUrl: string,
  currentPageObjectId: string | null,
  changedObjectIds: string[],
  changedContentTypes: string[],
  visibleObjectIds: string[]
}
  • currentUrl: Current page URL
  • currentPageObjectId: Current page object ID, based on the URL mapping in stackbit.config.js
  • changedObjectIds: Changed objects
  • changedContentTypes: Matching array of changed object types
  • visibleObjectIds: All IDs found in data-sb-object-id annotations on this page

API CMS Example:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
{
  currentUrl: '/about',
  currentPageObjectId: '5YPPXqxAL5tJ6hdJu',
  changedObjectIds: ['30PBUexVrS5dVbXhh7PtXt', '66AhvK0Uuo2u8F1yqs10My'],
  changedContentTypes: ['Page'],
  visibleObjectIds: ['5YPPXqxAL5tJ6hdJu', '26iggNOU3KpmftTSpINCjn']
}

Git CMS Example:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
{
  currentUrl: '/about',
  currentPageObjectId: 'src/pages/about.md',
  changedObjectIds: ['src/pages/index.md'],
  changedContentTypes: ['Page'],
  visibleObjectIds: ['src/pages/index.md', 'src/data/authors/jane.json']
}