Load and Save Designs

By default, the Unlayer 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.

📘

JSON Format

All designs are loaded and saved in the JSON format

Load Design

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

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

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.

unlayer.saveDesign(function(design) {
  console.log('design', design);
});

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.

unlayer.addEventListener('design:updated', function(updates) {
  // Design is updated by the user
  
  unlayer.exportHtml(function(data) {
    var json = data.design; // design json
    var html = data.html; // design html

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