Integration guide/ v2.0.4

Embedded in an afternoon.

One script tag or a first-class component for React, Vue and Angular. Three steps, then your users have a full email designer.

Get a project key Jump to code

01
Create a project
Sign up in the dashboard and add your production domain. You get one permanent project key. localhost always works for free.
02
Add the editor
Drop in the script tag, or install the React, Vue or Angular component from npm.
03
Mount and listen
Create the editor in a container, then save designs and exported HTML from the onChange and export callbacks.

Install

Pick your stack.

Every package wraps the same hosted editor, so features and fixes reach you the moment they ship.

Sandboxed iframe Your CSS and ours never collide.
Free on localhost Develop without a key or a card.
Versioned builds Use stable, latest or pin an exact release.
Domain-locked keys Keys only work on your production domain.

Any website or framework

<script src="https://editor.debloq.io/stable/embed.js"></script>

<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>

React 18 or later

npm install debloq-email-editor-react

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>
  )
}

Vue 3.4 or later

npm install debloq-email-editor-vue

<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>

Angular 21

npm install debloq-email-editor-angular

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()
  }
}

Reference / options

Configure it.

Pass these to Debloq.createEmailEditor(selector, options) or as props to the framework component.

licenseKeystring: Your project key from the dashboard.
version'stable' | 'latest' | '2.0.4': Which hosted editor build to load. Pin a version for full control.
theme'light' | 'dark' | 'auto': Editor chrome. Accent colour can be set too.
customComponentsarray: Register your own blocks, rendered and sanitized by the editor.
onReady(editor) => void: Fires once the editor has loaded and is ready for calls.
onChange(design) => void: Fires on every edit with the current design JSON.

Reference / methods

Control it.

The editor instance from onReady exposes 8 groups of methods, so you can build your own toolbar around it.

loadDesign(design): Opens a design, as an object or JSON string.
getDesign(): Returns the current design JSON.
exportHtml(): Returns { html, text, design }.
exportAmp(): Returns { html, text, design, amp } for AMP for Email.
openTemplates() · openPreflight() · openExport(): Opens the template gallery, preflight checks or export dialog from your own UI.
setDevice(id): Switches between 'desktop', 'tablet' and 'mobile'.
undo() · redo() · togglePreview(): Editing controls for a toolbar you build yourself.
setTheme(theme): Updates light, dark or auto chrome and the accent colour at runtime.

Reference / images

Bring your own images.

Connect any stock provider, DAM or CDN. Your users search and upload inside the editor, and every file goes through your API. You can swap hooks at runtime with setStockSearch, setStockPick andsetImageLibrary.

stockSearch(query) => ImageAsset[]: Search Unsplash, Pexels, your own DAM or any stock API.
onStockSelect(asset) => void: Runs when an image is picked. Log attribution or copy it to your CDN.
imageLibrary() => ImageAsset[]: List the images your user already owns.
imageUpload(file) => string: Send uploads to your storage and return the public URL.
assetStore{ load, save }: Keep the asset list wherever you like.

image-hooks.js

Debloq.createEmailEditor('#editor', {
  licenseKey: 'YOUR_KEY',

  // Your stock provider, DAM or internal library
  stockSearch: async (q) =>
    (await myApi.search(q)).map((p) => ({
      id: p.id, url: p.full, thumb: p.small, alt: p.alt
    })),

  // Uploads land in your bucket, not ours
  imageUpload: async (file) => (await myCdn.put(file)).url
});

Your key is one sign-up away.

Start the trial, add your domain and paste the snippet. Localhost is free forever.

Start your 7-day trial Read the integration guide

Create a project

Add the editor

Mount and listen

Pick your stack.

Configure it.

Control it.

Bring your own images.

Your key is one sign-up away.