Skip to main content
Version: Latest

Vanilla JavaScript Quickstart

Embed a drag-and-drop email editor with a single script tag — no build tools required.

:::info Prerequisites You need an editorKey from the Dragble Dashboard. This authenticates your editor instance. :::

Step 1: Add the script tag and container​

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Dragble Email Editor</title>
    <script src="https://sdk.dragble.com/latest/dragble-sdk.min.js"></script>
  </head>
  <body>
    <div style="padding: 8px">
      <button id="export-btn">Export HTML</button>
    </div>
    <div id="editor-container" style="height: 600px;"></div>

    <script>
      dragble
        .createEditor({
          containerId: "editor-container",
          editorKey: "YOUR_EDITOR_KEY",
          editorMode: "email",
        })
        .then((editor) => {
          editor.addEventListener("ready", function () {
            console.log("Editor is ready");
          });

          document
            .getElementById("export-btn")
            .addEventListener("click", async function () {
              const html = await editor.exportHtml();
              console.log("Exported HTML:", html);
            });
        });
    </script>
  </body>
</html>

:::warning Replace placeholder Replace YOUR_EDITOR_KEY with the editor key from your Dragble Dashboard. :::

You should see a drag-and-drop email editor with a toolbar on the right, content blocks on the left, and a canvas in the center.

Step 2: Export HTML​

document
  .getElementById("export-btn")
  .addEventListener("click", async function () {
    const html = await editor.exportHtml();
    if (html) {
      // Send to your backend, preview, or download
      console.log(html);
    }
  });

Step 3: Save and load designs​

// Save the current design
const design = editor.getDesign();
fetch("/api/designs", {
  method: "POST",
  body: JSON.stringify(design),
  headers: { "Content-Type": "application/json" },
});

// Load a previously saved design
editor.loadDesign(savedDesignJson);

Using callbacks​

You can pass callbacks directly in the config:

dragble
  .createEditor({
    containerId: "editor-container",
    editorKey: "YOUR_EDITOR_KEY",
    editorMode: "email",
    callbacks: {
      onReady: function () {
        console.log("Editor ready");
      },
      onChange: function (data) {
        console.log("Design changed:", data.type);
      },
    },
    mergeTags: {
      customMergeTags: [
        { label: "First Name", value: "{{first_name}}" },
        { label: "Email", value: "{{email}}" },
      ],
    },
  })
  .then((editor) => {
    /* use editor */
  });

Next steps​