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.