Vue3 Email Template Editor

Installation

npm install vue3-email-template-editor vue@^3.4 mjml-browser@^4.15

Quick Start

<script setup lang="ts">
import { ref } from 'vue'
import { EmailEditor } from 'vue3-email-template-editor'
import 'vue3-email-template-editor/style.css'

const mjml = ref('')
const html = ref('')
const designJson = ref()
</script>

<template>
  <EmailEditor
    ref="editorRef"
    v-model="mjml"
    :design-json="designJson"
    @update:compiled-html="html = $event"
    @update:design-json="designJson = $event"
  />
</template>

That's it. The editor renders a full drag-and-drop email builder with live preview, undo/redo, and HTML export.

Highlights

• 43 blocks — layouts, content, and 30 ready-made composites (hero, pricing, testimonial, FAQ, etc.)
• Inline editing — double-click any text to edit with TipTap (bold, italic, links, colors)
• AI generation — describe an email in plain language, get a production-ready template (BYOAI)
• Merge tags — insert dynamic variables ({{first_name}}) with visual chips
• Conditional content — show/hide sections based on merge tag values
• 22 starter templates — welcome, newsletter, e-commerce, abandoned cart, and more
• ESP export — pre-formatted HTML for Mailchimp, SendGrid, Brevo, AWS SES, Postmark, Resend
• Dark mode preview — simulate email client dark mode in the canvas
• Plugin system — add custom blocks, toolbar actions, sidebar panels
• i18n — English + French included, 175+ label keys for full translation
• Theming — customize colors, fonts, border radius via theme prop
• Undo/Redo — full history with Ctrl+Z / Ctrl+Shift+Z
• Imperative API — getMjml(), getHtml(), selectNode(), deleteNode(), and more via ref

AI Template Generation

Plug in any LLM — OpenAI, Anthropic, Gemini, or your own backend:

<EmailEditor
  v-model="mjml"
  :ai-provider="{
    generateText: async (prompt, ctx) => { /* your API call */ },
    generateTemplate: async (messages, systemPrompt) => { /* your API call */ },
  }"
/>

The editor handles JSON parsing, repair, and retry automatically.

Theming & i18n

<EmailEditor
  :theme="{ primaryColor: '#7C3AED', borderRadius: '8px' }"
  :labels="FR_LABELS"
/>

License

MIT