The drag-and-drop email builder for Vue
Theme it, register your own blocks and inspector panels, and delegate every save and upload to your backend — all in one self-contained component.
npm i vue-mail-editorThis is the real editor, running right here
Drag a block from the rail, click to edit, tweak it in the inspector. No video, no mockup — the actual component embedded in this page.
Everything you need, nothing you don't
A complete email-building experience that stays out of your app's way.
Fully self-contained
No Pinia, no global setup, no directive registration. Mount several independent editor instances on one page.
Extensible blocks
Register your own blocks with a render component, an inspector schema, and an email-safe HTML exporter.
Themeable
Per-instance light/dark tokens via props or --cvee-* CSS variables. Multiple themes coexist on one page.
Bring your own backend
storage="none" hands persistence to you — onLoad / onSave / onImageUpload plus change & export events.
Email-safe export
Table-based HTML with inlined styles, Outlook (MSO) conditionals, and mobile media queries.
Customizable top bar
Show/hide actions, rename labels, swap the logo, push your own buttons, or replace the bar entirely.
Six layouts, nine content blocks
Responsive column layouts that stack on mobile, plus a full set of content blocks — and you can register your own.
Up and running in a minute
Install the package, drop in the component, and bind a v-model. That's a working email editor — drag, drop, style, and export.
- 1.
npm i vue-mail-editor - 2. Import the component and its stylesheet
- 3. Give it a sized container — it fills 100% height
<script setup lang="ts">
import { ref } from 'vue'
import { EmailEditor } from 'vue-mail-editor'
import 'vue-mail-editor/style.css'
import type { Design } from 'vue-mail-editor'
const design = ref<Design>()
</script>
<template>
<div style="height: 100vh">
<EmailEditor v-model="design" />
</div>
</template>Built for real products
Theming, merge variables, and a standalone editor — all in the same package.
Deep theming
A 28-token --cvee-* system with per-instance light/dark. Override from your app and survive hostile host CSS.
Template variables
Type {{ to insert merge-tag chips. Read & write the registry via the API and resolve tokens or fallbacks on export.
Standalone TextEditor
The same rich-text engine, exported separately — a lightweight editor with no extra package to install.
Drive it from your own UI
Grab the API from @ready or a template ref and wire up custom toolbars, autosave, or server rendering.
getDesign()loadDesign(design)newDesign()exportHtml(mode?)getVariables()setVariables(vars)save()export()undo()redo()registerBlock(def)selectBody()Ship an email builder this afternoon
Open source, MIT licensed, and Vue 3 native. Install it and you're building.