vue-email-craft

vue-email-craft

A white-label drag-and-drop email editor for Vue 3, a drop-in for vue-email-editor and a developer-friendly Unlayer alternative. The editor loads from a hosted iframe, so no editor code ships in your bundle (this package is ~3 KB), and your backend renders send-ready, email-safe HTML + MJML via email-craft-sdk.

Install

npm install vue-email-craft

Usage

<template>
  <EmailEditor ref="editor" token="pk_live_your_key" @ready="onReady" style="height: 100vh" />
  <button @click="save">Save</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { EmailEditor } from "vue-email-craft";

const editor = ref();

const onReady = () => {
  // editor.value.editor is the Unlayer-compatible handle
};

const save = () =>
  editor.value.editor.exportHtml(({ design, html }) => {
    // store `design` (JSON) + `html` (email-safe HTML)
  });
</script>

• Get a publishable pk_live_… token from your MailKaro dashboard (free tier includes the full editor).
• The ref.editor handle mirrors vue-email-editor / Unlayer: loadDesign, saveDesign, exportHtml, exportPlainText, setMergeTags, …
• Exports called without a callback return a promise: const { html } = await editor.exportHtml(). registerCallback takes Unlayer's image (upload; done({ error }) on failure), selectImage (your own image library) and previewHtml (change what Preview shows).
• Unlayer's displayConditions option and setDisplayConditions work (a row picker; the chosen before / after wrap the row in the export), and so does features.textEditor.customButtons (onAction({ text }, done) runs on your page).
• Custom tools: editor.registerTool({ name, label, options, values, renderer: { Viewer: editor.createViewer({ render }), exporters: { email } } }) (Unlayer's call, e.g. in @ready). The tool shows in the Content panel; its code runs on your page and each block keeps its exported HTML, so exports do not wait for it. Tools are registered again when a changed prop re-creates the editor. See Custom tools.
• vue-email-editor's component methods work too: this.$refs.emailEditor.loadDesign(design), saveDesign(cb), exportHtml(cb).
• Events: @load (alias @loaded) when the editor is created, then @ready when it has loaded (both with the handle; calls made from @load are queued until ready), @updated on every edit, and @error when the editor is not running as it was set up ({ code, message }: invalid_embed_token, domain_not_allowed, token_expired or runtime_unreachable (the editor then runs on the free plan), or editor_not_started (the frame did not answer in 20 seconds: a wrong embedUrl, or the frame was refused)).
• Props: vue-email-editor's editor-id, min-height (default 500px), options (reads displayMode, locale, mergeTags, fonts), locale, project-id, tools, appearance, script-url (the last four are accepted and ignored), plus token, display-mode, embed-url, runtime-url, connector-headers, merge-tags, fonts, inbox-preview, s3, google-drive, on-image-upload, design. Changing an init prop after mount re-creates the editor and carries the current design over. Like vue-email-editor, the editor element (id = editor-id, class unlayer-editor) is min-height tall; class and style apply to it, so style="height: 100vh" or style="flex: 1" sizes it.

Coming from vue-email-editor

Change the package and the import (import { EmailEditor } from "vue-email-craft"), nothing else. Saved Unlayer designs load as they are.

Building a PDF, letter, landing page, or popup

display-mode picks the canvas type: "email" (default, email-width), "document" (US Letter, use this for PDFs and printed letters), "web" (landing pages), "popup" (narrow modals). For PDFs or letters you also want inbox-preview="false" so the Gmail / Apple Mail preview strip is hidden.

<EmailEditor token="pk_live_..." display-mode="document" :inbox-preview="false" />

Learn more

• Docs · React + Node guide · Render MJML on the server
• Also available: react-email-craft (React), angular-email-craft, vanilla-email-craft, email-craft-sdk (Node).