Events & Callbacks

Editor Ready

This event is called when the editor is ready for use. It waits for custom js, css and fonts to be fully loaded.

unlayer.addEventListener('editor:ready', function () {
  console.log('editor:ready');
});

Design Loaded

This event is called when your design is loaded in the editor.

unlayer.addEventListener('design:loaded', function(data) {
  // Design is loaded
  var json = data.design; // design json
})

Design Updated

This event is called when the user changes anything in the editor. This can be used to set up auto saving.

unlayer.addEventListener('design:updated', function(data) {
  // Design is updated by the user
  var type = data.type; // body, row, content
  var item = data.item;
  var changes = data.changes;
  console.log('design:updated', type, item, changes);
})

This event is also triggered while text is being edited in the text editor. You can customize the text editor's settings to optimize performance. Learn More

Image Uploaded

This event is called when an image is uploaded by the user.

unlayer.addEventListener('image:uploaded', function(data) {
  var image = data.image;
  var url = image.url;
  var width = image.width;
  var height = image.height;
})