Export HTML

Render the current design as production-ready HTML. Use it for sending emails, publishing web pages, or displaying popups.

React

import { useRef } from "react";
import { DragbleEditor, DragbleEditorRef } from "dragble-react-editor";

function EmailEditor() {
  const editorRef = useRef<DragbleEditorRef>(null);

  const handleExportHtml = async () => {
    const html = await editorRef.current?.editor?.exportHtml();
    // Send to your email API
    await fetch("/api/emails/send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ html, to: "user@example.com" }),
    });
  };

  return (
    <>
      <DragbleEditor
        ref={editorRef}
        editorKey="db_your_key"
        editorMode="email"
      />
      <button onClick={handleExportHtml}>Send Email</button>
    </>
  );
}

Vue

<template>
  <DragbleEditor ref="editorRef" editor-key="db_your_key" editor-mode="email" />
  <button @click="handleExportHtml">Send Email</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DragbleEditor } from "dragble-vue-editor";

const editorRef = ref<InstanceType<typeof DragbleEditor>>();

async function handleExportHtml() {
  const html = await editorRef.value?.exportHtml();
  await fetch("/api/emails/send", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ html, to: "user@example.com" }),
  });
}
</script>

Angular

import { Component, ViewChild } from "@angular/core";
import { DragbleEditorComponent } from "dragble-angular-editor";
import type { DragbleSDK } from "dragble-types";

@Component({
  selector: "app-email-editor",
  standalone: true,
  imports: [DragbleEditorComponent],
  template: `
    <dragble-editor
      #editor
      editorKey="db_your_key"
      editorMode="email"
      (ready)="onReady($event)"
    ></dragble-editor>
    <button (click)="handleExportHtml()">Send Email</button>
  `,
})
export class EmailEditorComponent {
  @ViewChild("editor") editorComp!: DragbleEditorComponent;
  private sdk: DragbleSDK | null = null;

  onReady(sdk: DragbleSDK) {
    this.sdk = sdk;
  }

  async handleExportHtml() {
    const html = await this.sdk?.exportHtml();
    await fetch("/api/emails/send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ html, to: "user@example.com" }),
    });
  }
}

Vanilla JS

<div id="editor-container" style="height: 600px;"></div>
<button id="send-btn">Send Email</button>

<script src="https://sdk.dragble.com/latest/dragble-sdk.min.js"></script>
<script>
  dragble.init({
    containerId: "editor-container",
    editorKey: "db_your_key",
    editorMode: "email",
  });

  document.getElementById("send-btn").addEventListener("click", async () => {
    const html = await dragble.exportHtml();
    await fetch("/api/emails/send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ html, to: "user@example.com" }),
    });
  });
</script>

:::info One-way export HTML is a one-way export. You cannot load HTML back into the editor. Always persist the design JSON for round-trip editing. :::

Export options

Pass options to exportHtml() to control the output:

const html = await editor.exportHtml({
  title: "My Landing Page", // Sets <title> tag (web/popup mode only, ignored in email)
  minify: true, // Minified output (plan-gated)
});

Option	Type	Default	Description
title	string	undefined	Page <title> for web and popup mode. Ignored in email mode.
minify	boolean	false	Request minified HTML (plan-gated feature).

Export plain text

For email campaigns, you need a plain-text fallback. exportPlainText() strips all HTML and returns the text content:

React

const handleSendEmail = async () => {
  const editor = editorRef.current?.editor;
  const [html, plainText] = await Promise.all([
    editor?.exportHtml(),
    editor?.exportPlainText(),
  ]);

  await fetch("/api/emails/send", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ html, plainText, to: "user@example.com" }),
  });
};

Vue

async function handleSendEmail() {
  const editor = editorRef.value;
  const [html, plainText] = await Promise.all([
    editor?.exportHtml(),
    editor?.exportPlainText(),
  ]);

  await fetch("/api/emails/send", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ html, plainText, to: "user@example.com" }),
  });
}

Angular

async handleSendEmail() {
  const [html, plainText] = await Promise.all([
    this.sdk?.exportHtml(),
    this.sdk?.exportPlainText(),
  ]);

  await fetch('/api/emails/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, plainText, to: 'user@example.com' }),
  });
}

Vanilla JS

const [html, plainText] = await Promise.all([
  dragble.exportHtml(),
  dragble.exportPlainText(),
]);

await fetch("/api/emails/send", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ html, plainText, to: "user@example.com" }),
});

Download HTML as a file

Trigger a browser download of the exported HTML:

React

const handleDownload = async () => {
  const html = await editorRef.current?.editor?.exportHtml();
  if (!html) return;

  const blob = new Blob([html], { type: "text/html" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "email-template.html";
  a.click();
  URL.revokeObjectURL(url);
};

Vue

async function handleDownload() {
  const html = await editorRef.value?.exportHtml();
  if (!html) return;

  const blob = new Blob([html], { type: "text/html" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "email-template.html";
  a.click();
  URL.revokeObjectURL(url);
}

Angular

async handleDownload() {
  const html = await this.sdk?.exportHtml();
  if (!html) return;

  const blob = new Blob([html], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'email-template.html';
  a.click();
  URL.revokeObjectURL(url);
}

Vanilla JS

async function handleDownload() {
  const html = await dragble.exportHtml();

  const blob = new Blob([html], { type: "text/html" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "email-template.html";
  a.click();
  URL.revokeObjectURL(url);
}

Method reference

Method	Returns	Description
exportHtml(options?)	Promise<string>	Export the design as a complete HTML document string
exportPlainText()	Promise<string>	Export the design as plain text (no HTML tags)

Next steps

• Export PDF, Image & ZIP — server-side rendering for images and PDFs
• Load & Save Designs — persist designs for round-trip editing
• Merge Tags — add dynamic personalization to exported HTML