The design JSON is the input for loadDesign. The HTML is the generated reading or delivery output. Unlayer documents these as separate values; saving only the HTML leaves out the designer data used by that loading route. Load and save designs
Capture both outputs from the same export
Suppose a fictional equipment-desk reminder says “Return the recorder by Thursday.” Its author needs to change Thursday to Friday next week while retaining the email layout.
After initializing your existing Unlayer integration in email mode and making the design ready for export, use its export callback:
unlayer.exportHtml(function (data) {
const revision = {
design: data.design,
html: data.html
};
// Pass revision to your application's authorized save operation.
// Mark it saved only after that operation succeeds.
});
This fragment captures the outputs; it does not write them to a database. Connect it to the application's existing save operation, retain unsaved work on failure, and associate both outputs with the same content revision.
The callback's html contains a complete HTML document. It also supplies chunks for integrations assembling their own layout, but a body chunk alone omits surrounding material that may be required. Start with the full output unless your sending pipeline specifically needs the pieces. Export HTML response
Reopen the designer with its JSON
After the builder has initialized, load the JSON object returned by your application's authorized record-reading operation:
// savedRevision comes from your application's stored record.
unlayer.loadDesign(savedRevision.design);
Pass the design object, rather than the HTML string. If your storage encodes the design as JSON text, decode it to the expected object before calling loadDesign.
Inspect the reopened reminder. The deadline should still be Thursday, and its text block should remain editable. Change it to Friday, export again, and save a new paired revision. Reopen that revision and confirm Friday appears in the designer and the corresponding HTML output.
Do not use the browser preview as a sending receipt
The exported HTML still needs to enter your approved email delivery system. Exporting does not send a campaign, choose its recipients, or confirm inbox rendering. Supply the actual subject, recipient selection, and other required message settings through that system.
For the recorder reminder, compare the deadline, return location, link destination, and image description in a test message. Use the clients your recipients need. A browser can display CSS differently from a mail app; the email preview checks describe what that extra step resolves.
If your application transforms the exported HTML, keep the transformed delivery copy distinct from the paired export. Otherwise, investigating an incorrect Friday message becomes harder: the designer, export, and sender may each hold a different version.
Preserve the source of the next revision
Retain the design JSON with the matching HTML and the application's revision identifier. When the reminder changes, edit the loaded design and create another export instead of treating an old delivered email as the designer source.
Check the final message through the sending system before approval. Keep future layout changes in the design record, and retain the delivered copy as evidence of what the recipient was sent.