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

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

What’s Next