A world-class email editor for your users. No tiers attached.

<div id="editor" style="height: 80vh"></div>
<script src="https://editor.debloq.io/stable/embed.js"></script>
<script>
  const mount = Debloq.createEmailEditor('#editor', {
    licenseKey: 'dbq_live_...',
    version: 'stable',
    onReady: async (api) => {
      const { html, text, design } = await api.exportHtml()
    },
    onChange: ({ design, html, text }) => saveDraft({ design, html, text })
  })
</script>

import { useRef } from 'react'
import { EmailEditor } from 'debloq-email-editor-react'

export function Designer({ savedDesign }) {
  const editor = useRef(null)

  async function save() {
    const { design, html, text } = await editor.current.exportHtml()
  }

  return (
    <div style={{ height: 700 }}>
      <EmailEditor
        ref={editor}
        licenseKey="YOUR_LICENSE_KEY"
        modelValue={savedDesign}
      />
    </div>
  )
}

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

const editor = ref(null)
const design = ref(null)

async function save() {
  const { design, html, text } = await editor.value.exportHtml()
}
</script>

<template>
  <div style="height: 700px">
    <EmailEditor ref="editor" v-model="design" license-key="YOUR_LICENSE_KEY" />
  </div>
</template>

import { Component, ViewChild } from '@angular/core'
import { DebloqEmailEditorComponent, type EmailDesign } from 'debloq-email-editor-angular'

@Component({
  selector: 'app-designer',
  standalone: true,
  imports: [DebloqEmailEditorComponent],
  template: `
    <debloq-email-editor style="height: 700px"
      licenseKey="YOUR_LICENSE_KEY" [(modelValue)]="design" />
  `
})
export class DesignerComponent {
  @ViewChild(DebloqEmailEditorComponent) editor!: DebloqEmailEditorComponent
  design: EmailDesign | null = null

  async save() {
    const { design, html, text } = await this.editor.exportHtml()
  }
}