Get a reference to the element first:

const builder = document.querySelector('email-builder');
// or, in React:
const builder = builderRef.current;

---

load(blockTree)

Load a BlockTree JSON object into the editor, replacing the current content.

const saved = await fetch('/api/templates/123').then(r => r.json());
builder.load(saved.blockTree);

Param	Type	Description
blockTree	BlockTree	A block tree previously returned by eb:save or getJson()

INFO

Calling load() marks the editor as clean (no unsaved changes). Auto-save is paused until the user makes their first edit.

---

getJson()

Returns the current BlockTree without triggering a save event.

const snapshot = builder.getJson();
console.log(snapshot.blocks.length, 'blocks');

Returns: BlockTree

---

save()

Programmatically trigger a save — equivalent to the user clicking the Save button. Fires the eb:save DOM event and calls the onSave callback.

// Auto-save on a timer
setInterval(() => builder.save(), 30_000);

---

exportHtml()

Compile the current block tree to production-ready HTML, fire the eb:export event, and call the onExport callback. Useful in headless mode where there is no Export button.

document.querySelector('#my-export-btn').addEventListener('click', async () => {
  const html = await builder.exportHtml();
  if (html) await sendToESP(html);
});

Returns: Promise<string | null> — resolves with the compiled HTML, or null if compilation fails.

---

togglePreview()

Open the email preview modal. Compiles the current block tree to HTML and renders it in a full-screen overlay.

document.querySelector('#my-preview-btn').addEventListener('click', () => {
  builder.togglePreview();
});

Returns: Promise<void>

---

undo()

Undo the last change — equivalent to pressing Cmd/Ctrl + Z.

document.querySelector('#my-undo-btn').addEventListener('click', () => {
  builder.undo();
});

---

redo()

Redo the last undone change — equivalent to pressing Cmd/Ctrl + Shift + Z.

document.querySelector('#my-redo-btn').addEventListener('click', () => {
  builder.redo();
});

---

isDirty()

Returns true if the editor has unsaved changes since the last save or load() call.

window.addEventListener('beforeunload', (e) => {
  if (builder.isDirty()) e.preventDefault();
});

Returns: boolean

---

openTemplates()

Open the template library modal programmatically. Useful in headless mode where there is no Templates button.

document.querySelector('#my-templates-btn').addEventListener('click', () => {
  builder.openTemplates();
});

---

saveAsTemplate(name?)

Capture the current email as a reusable template. Returns a document flagged template: true with clientId set to the current userId — store it and pass it back via config.templates to make it reappear in the picker (clientId-scoped ones land in "Your templates").

Also fires config.onSaveTemplate and the bubbling eb:save-template event. Pairs with showSaveAsTemplate: true, which adds a toolbar button that calls this.

const doc = builder.saveAsTemplate('Monthly digest');
// → { template: true, name: 'Monthly digest', clientId: 'user_123', blockTree: {...} }
await fetch('/api/templates', { method: 'POST', body: JSON.stringify(doc) });

Returns: SavedTemplate

---

setViewMode(mode)

Switch the canvas between desktop and mobile preview.

builder.setViewMode('mobile');
builder.setViewMode('desktop');

Param	Type	Description
mode	'desktop' | 'mobile'	The viewport to render

---

updateConfig(config)

Hot-update runtime config without remounting the component. Accepts any subset of SdkConfig.

// Switch to dark mode
builder.updateConfig({ theme: 'dark' });

// Update merge tags dynamically
const tags = await fetch('/api/merge-tags').then(r => r.json());
builder.updateConfig({ mergeTags: tags });

Only the provided keys are merged — unset keys are unchanged.

---

captureSnapshot()

Capture a JPEG thumbnail of the current canvas. Returns a Blob suitable for uploading to your own asset storage. Also available as getThumbnail() — the two are aliases.

const blob = await builder.captureSnapshot();
if (blob) {
  const form = new FormData();
  form.append('thumbnail', blob, 'preview.jpg');
  await fetch('/api/templates/123/thumbnail', { method: 'POST', body: form });
}

Returns: Promise<Blob | null>

---

BlockTree shape

interface BlockTree {
  canvas: {
    backgroundColor:        string;
    contentBackgroundColor: string;
    maxWidth:               number;
    fontFamily:             string;
    linkColor:              string;
    customFontUrl?:         string;
    customFonts?:           string[];
  };
  metadata: {
    subject:   string;
    preheader: string;
    title:     string;
  };
  blocks: Block[];
}

Block types: text, image, button, divider, spacer, columns, social, video, html, list. See Block Types for full prop shapes.