debloq-email-editor-vue

Vue Email Editor

The Debloq drag-and-drop email editor as a Vue 3 component. Authors build responsive emails that render in Gmail, Outlook, Apple Mail and mobile clients; you get the HTML, plain text and a JSON design to save.

Installation

npm install debloq-email-editor-vue

Requires Vue 3.4 or later. You need a licence key from your Debloq dashboard, with your site's domain added to its project (localhost always works for development).

Usage

<script setup>
import { ref } from 'vue'
import { EmailEditor } from 'debloq-email-editor-vue'

const editor = ref(null)
const design = ref(null)            // a design you saved earlier, or null for a blank email

function onReady(api) {
  console.log('editor ready')
}

async function save() {
  const { design, html, text } = await editor.value.exportHtml()
  // store `design` to reopen the email later, send `html` and `text`
}
</script>

<template>
  <button @click="save">Save</button>
  <div style="height: 700px">
    <EmailEditor
      ref="editor"
      v-model="design"
      license-key="YOUR_LICENSE_KEY"
      @ready="onReady"
    />
  </div>
</template>

The editor fills its parent, so give the parent a height. It starts when the component mounts and is removed when it unmounts. In Nuxt, wrap it in <ClientOnly>.

Methods

Call these on the component ref. Each returns a Promise.

The ref also has api (the full editor API once ready), devices and controls. See the full method list.

Properties

• licenseKey String your licence key (required)
• modelValue Object | String the design to open; use v-model to keep it in sync
• version String editor version: 'latest' (default), 'stable' or an exact release such as '2.0.4'
• theme String | Object editor colours: 'light', 'dark', 'auto' or { mode, accent, fontFamily, radius, tokens }
• brandLogo String | Object | false your name or logo in the toolbar
• brand Object brand colours and fonts offered in every picker
• fonts Array extra fonts for the font picker
• chrome Boolean show the editor's top toolbar (default true)
• canvasToolbar Boolean show the small toolbar above the canvas
• mergeTags Array personalization tags, e.g. [{ label: 'First name', value: '{{ first_name }}' }]
• specialLinks Array ready-made links such as Unsubscribe
• utm Object UTM parameters added to every link
• templates Array your own template gallery
• customComponents Array your own blocks (see below)
• imageUpload Function async (file) => url to store uploads on your server
• imageLibrary, stockSearch, onStockSelect Function your media library and stock photos
• savedBlocksStore, brandSwatchStore, assetStore Object { load, save } to keep author libraries on your server
• onSendTest Function adds a Send test action
• autosaveKey String recovers unsaved work after the tab closes

See the Integration & Customization Guide for every option with examples.

Events

Customization

<EmailEditor
  license-key="YOUR_LICENSE_KEY"
  :theme="{ mode: 'auto', accent: '#0f766e' }"
  brand-logo="Acme Mail"
  :merge-tags="[{ label: 'First name', value: '{{ first_name }}' }]"
  :image-upload="uploadImage"
/>

async function uploadImage(file) {
  const body = new FormData()
  body.append('file', file)
  const res = await fetch('/api/uploads', { method: 'POST', body })
  return (await res.json()).url
}

Custom Components

Add your own blocks to the palette, such as a product card. Define them as data with an HTML template; authors edit the fields you list.

const customComponents = [{
  type: 'product-card',
  label: 'Product',
  defaults: { title: 'Running shoe', url: 'https://acme.com/shoe' },
  fields: [
    { key: 'title', label: 'Title', type: 'text' },
    { key: 'url', label: 'Link', type: 'linkurl' }
  ],
  template: '<h3>{{ props.title }}</h3><a >Buy now</a>'
}]

<EmailEditor license-key="YOUR_LICENSE_KEY" :custom-components="customComponents" />

Learn more

Troubleshooting

The editor area is blank. Give the parent element a height. If your site sends a Content Security Policy, allow frame-src https://editor.debloq.io.

locked fires instead of ready. The author sees a message and the event gives the reason:

A method rejects with "Editor is not ready". Wait for the ready event before calling methods.

An option has no effect. Some options belong to specific plans; the editor ignores options your plan doesn't include.

Also available

• React: debloq-email-editor-react
• Angular: debloq-email-editor-angular