---
title: "Methods & ref, MailKaro Docs"
description: "The Unlayer-shaped ref exposes an editor object. Grab it from a useRef and call these after onReady."
---

# 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](https://mailkaro.com/docs/rendering) 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](https://mailkaro.com/docs/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();
```

Source: https://docs.mailkaro.com/methods