API Methods

All methods are accessed via a template ref on the <EmailEditor> component.

<script setup>
const editor = ref()
// editor.value.getMjml()
</script>

<template>
  <EmailEditor ref="editor" />
</template>

Export

Method	Returns	Description
getDocument()	EmailDocument	Get the current document tree
setDocument(doc)	void	Replace the entire document
getMjml()	string	Serialize as MJML string
getHtml()	string	Get compiled HTML output
getDesignJson()	EmailDesignJson	Get the persisted design format
loadTemplate(doc)	void	Load an EmailDocument, resetting history

History

Method	Returns	Description
undo()	void	Undo the last change
redo()	void	Redo the last undone change
canUndo()	boolean	Whether undo is available
canRedo()	boolean	Whether redo is available

Selection

Method	Returns	Description
selectNode(nodeId)	void	Select a node by its ID
getSelectedNode()	EmailNode | null	Get the currently selected node
clearSelection()	void	Deselect the current node

Manipulation

Method	Returns	Description
deleteNode(nodeId)	void	Remove a node from the document
duplicateNode(nodeId)	NodeId | null	Clone a node, returns new ID
insertBlock(block, parentId, index?)	NodeId | null	Insert a block definition
updateNodeAttribute(nodeId, key, value)	void	Update a single MJML attribute

Events

Method	Returns	Description
on(event, handler)	void	Subscribe to an editor event
off(event, handler)	void	Unsubscribe from an event

TypeScript Interface

interface EmailEditorAPI {
  getDocument: () => EmailDocument
  setDocument: (doc: EmailDocument) => void
  getMjml: () => string
  getHtml: () => string
  getDesignJson: () => EmailDesignJson
  undo: () => void
  redo: () => void
  canUndo: () => boolean
  canRedo: () => boolean
  selectNode: (nodeId: NodeId) => void
  getSelectedNode: () => EmailNode | null
  clearSelection: () => void
  deleteNode: (nodeId: NodeId) => void
  duplicateNode: (nodeId: NodeId) => NodeId | null
  insertBlock: (block: BlockDefinition, parentId: NodeId, index?: number) => NodeId | null
  updateNodeAttribute: (nodeId: NodeId, key: string, value: string) => void
  loadTemplate: (template: EmailDocument) => void
  on: <K extends keyof EditorEventMap>(event: K, handler: (payload: EditorEventMap[K]) => void) => void
  off: <K extends keyof EditorEventMap>(event: K, handler: (payload: EditorEventMap[K]) => void) => void
}