Skip to main content
Version: Latest

Basic Email Editor

This page shows a complete, copy-paste-ready email editor with save, load, and HTML export.

HTML Setup​

Add the SDK script to your index.html:

<script src="https://sdk.dragble.com/latest/dragble-sdk.min.js"></script>

JavaScript Implementation​

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Dragble Email Editor</title>
    <script src="https://sdk.dragble.com/latest/dragble-sdk.min.js"></script>
    <style>
      body {
        margin: 0;
        font-family: sans-serif;
      }
      .toolbar {
        padding: 12px;
        display: flex;
        gap: 8px;
        border-bottom: 1px solid #ddd;
      }
      #editor {
        height: calc(100vh - 50px);
      }
    </style>
  </head>
  <body>
    <div class="toolbar">
      <button id="btn-save">Save</button>
      <button id="btn-load">Load</button>
      <button id="btn-export">Export HTML</button>
    </div>
    <div id="editor"></div>

    <script>
      const EDITOR_KEY = "your-editor-key";
      let editor = null;

      dragble
        .createEditor({
          containerId: "editor",
          editorKey: EDITOR_KEY,
          editorMode: "email",
        })
        .then((pexEditor) => {
          editor = pexEditor;

          pexEditor.addEventListener("ready", () => {
            console.log("Editor is ready");
          });

          pexEditor.addEventListener("change", (design) => {
            console.log("Design changed");
          });
        });

      document.getElementById("btn-save").addEventListener("click", () => {
        if (!editor) return;
        const design = editor.getDesign();
        localStorage.setItem("saved-design", JSON.stringify(design));
        alert("Design saved");
      });

      document.getElementById("btn-load").addEventListener("click", () => {
        if (!editor) return;
        const raw = localStorage.getItem("saved-design");
        if (!raw) {
          alert("No saved design found");
          return;
        }
        editor.loadDesign(JSON.parse(raw));
      });

      document
        .getElementById("btn-export")
        .addEventListener("click", async () => {
          if (!editor) return;
          const data = await editor.exportHtml();
          const { html } = data;
          console.log("Exported HTML length:", html.length);
          const blob = new Blob([html], { type: "text/html" });
          const url = URL.createObjectURL(blob);
          window.open(url, "_blank");
        });
    </script>
  </body>
</html>

What this does​

  1. Renders a full-height drag-and-drop email editor.
  2. Save serialises the design to JSON and stores it in localStorage.
  3. Load reads that JSON back and restores the editor state.
  4. Export HTML generates production-ready HTML you can send through any ESP.

Replace EDITOR_KEY with the value from your Dragble dashboard.