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