Methods (via ref)

Accessed by mounting the component with ref:

<template>
  <EmailBuilder ref="builder" v-model:design="design" />
  <button @click="handleExport">Export</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { EmailBuilder } from '@naturaldevcr/vue-mail-designer'

const builder = ref<InstanceType<typeof EmailBuilder>>()

function handleExport() {
  const html = builder.value?.exportHtml()
  // ...
}
</script>

Method	Signature	Description
exportHtml	(): string	Full email HTML, ready for your sending provider.
exportJson	(): string	The current EmailDocument, serialized to JSON.
getDesign	(): EmailDocument	The current EmailDocument, unserialized.
loadDesign	(doc: EmailDocument): void	Replaces the current document with doc — resets the undo/redo history.
getAutosaveStatus	(): AutosaveStatus	Current autosave lifecycle state: 'disabled', 'idle', 'restoring', 'saving', 'saved', or 'error'.
exportImage	(): Promise<string>	PNG of the design, as a data URL. Limitation: cross-origin images (CORS) can prevent the capture.

The right rail's Export tab exposes the same HTML, JSON, import, PNG, and version workflows for users who prefer the built-in UI. Use the ref methods when the host application needs to save or load designs from its own backend.

Versions

From the Export → Versions… menu, the user can save, load, and delete named versions of the design — in memory for the session, not persisted by the library (save them yourself if you need them across sessions).

Autosave status

Use getAutosaveStatus() when your host UI needs a synchronous status read in addition to the autosave events:

<script setup lang="ts">
import { ref } from 'vue'
import { EmailBuilder, type AutosaveStatus } from '@naturaldevcr/vue-mail-designer'

const builder = ref<InstanceType<typeof EmailBuilder>>()

function readAutosaveStatus(): AutosaveStatus | undefined {
  return builder.value?.getAutosaveStatus()
}
</script>

Pair it with autosave-status when you want reactive updates. See Autosave for the full lifecycle.