Load and Save Designs

By default, the MailUi editor loads with a blank design. If you want it to open with an existing design, you can do that. For example, your application saves a draft and you want people to be able to resume with their work later.

Load Design #

This is how you can load an existing design in the editor.

var design = {...}; // template JSON
mailui.loadDesign(design);

Create Form Blank #

To create a blank template, pass an empty object {} into mailui.loadDesign(). This initializes a new design with no pre-existing content, allowing you to start from scratch.

// pass empty object
mailui.loadDesign({});

Load Single Section #

mailui.fetchInitialDesign(async (design: { json: JSONTemplate; version: string }) => {
  let siteData = design.json;
  
  const sectionDesign = {}; // section JSON
  siteData.pages[0].data.elements = sectionDesign;
  mailui.loadDesign(siteData || {});
});

Save Design #

This is how you can save the design currently loaded in the editor. It will send you the current design's JSON in the callback function.

mailui.saveDesign(function(design) {
    const json = data.json;
    const html = data.html;
    const version = data.version;
    
    console.log(json, html, version);
});

Auto Saving #

You can set a callback function to execute whenever users update a design. Here is a quick snippet on how to detect changes and save the design. We will first listen for the design:updated event, and then call exportHtml to get the updated json and html.

mailui.addEventListener('design:updated', function(updates) {
  // Design is updated by the user
  
  mailui.exportHtml(function(data) {
    const json = data.json;
    const html = data.html;
    const version = data.version;
    
    console.log(json, html, version);

    // Save the json, or html here
  })
})