Methods & ref

The editor

Methods & ref

The Unlayer-shaped ref exposes an editor object. Grab it from a useRef and call these after onReady.

ts
interface MailkaroIframeEditorRef {
  editor: {
    saveDesign: (cb: (design: Design) => void) => void;
    exportHtml: (cb: (data: { design: Design; html: string }) => void) => void;
    exportAmp: (cb: (data: { design: Design; amp: string }) => void) => void;
    exportDocument: (cb: (data: { design: Design; html: string }) => void) => void;
    exportZip: (cb: (data: { design: Design; zip: Uint8Array }) => void) => void;
    exportPlainText: (cb: (data: { design: Design; text: string }) => void) => void;
    loadDesign: (design: Design) => void;
    loadBlank: (options?: { backgroundColor?: string; contentWidth?: number }) => void;
    setBodyValues: (values: Record<string, unknown>) => void;
    setMergeTags: (tags: unknown) => void;
    showPreview: (device?: "desktop" | "mobile") => void;
    hidePreview: () => void;
    addEventListener: (event: string, handler: () => void) => void;
    removeEventListener: (event: string, handler: () => void) => void;
    registerCallback: (type: "image" | "selectImage" | "previewHtml", cb: (...args: any[]) => void) => void;
  };
}

saveDesign(cb)#

Hands your callback the current design JSON, store this.

ts
editorRef.current?.editor.saveDesign((design) => {
  db.emails.update(id, { design });
});

exportHtml(cb)#

Hands your callback both the design and a rendered HTML string.

ts
editorRef.current?.editor.exportHtml(({ design, html }) => {
  console.log(html);
});

Called without a callback, every export (exportHtml, saveDesign, exportPlainText, exportAmp, exportZip, canUndo, audit ...) returns a promise of the same data instead, in every wrapper. It rejects if the export fails.

ts
const { design, html } = await editorRef.current!.editor.exportHtml();
For production sends, render on the server with email-craft-sdk so merge tags resolve against real recipient data.

loadDesign(design)#

Loads a saved design. Unlayer JSON is auto-converted; MailKaro designs load as-is; fresh/ converted designs are widened to the canvas.

loadBlank(options?)#

Clears the canvas to an empty design, optionally seeding the body backgroundColor and contentWidth.

ts
editorRef.current?.editor.loadBlank({ backgroundColor: "#ffffff", contentWidth: 600 });

setBodyValues(values)#

Merges body-level values into the current design. Keys are the Unlayer camelCase names (backgroundColor, contentWidth, fontFamily…), mapped to the design schema for you.

setMergeTags(tags)#

Replaces the field-picker tags at runtime (same shape as options.mergeTags). See Merge tags.

showPreview(device?) / hidePreview()#

Opens a device-framed preview overlay of the current design ("desktop" or "mobile"), and closes it. The preview renders through the same engine as exportHtml, so it reflects the active builder mode.

ts
editorRef.current?.editor.showPreview("mobile");
// …later
editorRef.current?.editor.hidePreview();