Events

Editor Ready #

This event is triggered when the editor is ready for use. It ensures that custom JavaScript, CSS, and fonts are fully loaded.

mailui.addEventListener('editor:ready', function () {
  // Perform your actions
});

Design Loaded #

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

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

Property	Description	Type	Default
json	This is the JSON of the design	JSON

Design Updated #

This event is triggered whenever the user makes any changes in the editor. It can be utilized to set up auto-saving functionality.

mailui.addEventListener('design:updated', function(data) {
  // Design is updated by the user
  var type = data.type; // BODY, SECTION, ROW, COLUMN, ELEMENT
  var changes = data.changes;
  
  // Perform your actions
});

Property	Description	Type	Default
type	The type specifies what kind of data has changed.d	BODY SECTION ROW COLUMN ELEMENT
changes	The `changes` object contains the required properties: path, elementType, and data. It may also include additional optional properties.	object

Events

Editor Ready #

Design Loaded #

Design Updated #

Explore Our Email Builder