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
})
})
Updated over 3 years ago