Load and Save Designs

The builder provides APIs to load, save, and even auto-save designs in your application. This allows developers to manage and persist user-created designs seamlessly. When the builder is initialized, it loads with a blank design.

JSON Format

All designs are loaded and saved in the JSON format

Load Design

To load a pre-existing design or template into the editor, you can use the unlayer.loadDesign() method. The design is passed as a JSON object.

Example:

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

• design: This is the JSON object that contains the design structure. When this method is called, the editor will load the specified design or template into the builder.

---

Save Design

To save a design, you can use the unlayer.exportHtml() method. This method will export both the design’s HTML and its JSON structure. You can then save either or both, depending on your requirements.

Example:

unlayer.exportHtml(function (data) {
  var json = data.design; // The design JSON structure
  var html = data.html; // The final HTML of the design

  // Save the JSON and/or HTML
});

• data.design: This contains the design’s JSON structure, which can be stored for later use or modifications.
• data.html: This is the final HTML output that you can use to render the design on the web or in emails.

---

Auto-Saving a Design

If you want to automatically save the design whenever the user makes changes, you can listen for the design:updated event. This event is triggered every time the user updates the design in the editor.

Example:

unlayer.addEventListener('design:updated', function (updates) {
  // Design has been updated by the user

  unlayer.exportHtml(function (data) {
    var json = data.design; // The updated design JSON
    var html = data.html; // The updated HTML

    // Auto-save the JSON and/or HTML here
  });
});

• design:updated event: This event is fired whenever the user modifies the design in the editor.
• Auto-save logic: After detecting changes, the design can be saved automatically in the background by exporting the design JSON and/or HTML.

---

Best Practices for Saving Designs

• Use the JSON: The JSON structure is ideal for storing the design in a database because it allows you to reload and edit the design later.
• Use the HTML: The HTML can be used for rendering the final output on a website or in an email. It is typically not modifiable once saved.

---

Example Use Cases

1. Loading a Pre-Existing Template: You might have a saved design template that you want to load into the editor for further customization by the user. The unlayer.loadDesign() method makes it easy to load and edit.
2. Saving User-Generated Designs: When a user finishes creating a design, you can save both the JSON for reloading/editing purposes and the HTML for displaying or sending as an email.
3. Auto-Saving in Real-Time: To avoid losing any user changes, set up auto-saving that listens for the design:updated event and automatically saves the current state of the design.