Skip to main content
Version: 1.0.0

React Quickstart

Get a drag-and-drop email editor running in React in under 2 minutes.

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

Step 1: Add the script tag​

Add the Dragble SDK script to your index.html:

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

Step 2: Add the editor component​

src/EmailEditor.tsx
import { useRef, useEffect, useState } from "react";

export default function EmailEditor() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [editor, setEditor] = useState<DragbleSDK | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const pexEditor = dragble.createEditor({
      containerId: "editor-container",
      editorKey: "YOUR_EDITOR_KEY",
      editorMode: "email",
    });

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

    setEditor(pexEditor);

    return () => {
      pexEditor.destroy();
    };
  }, []);

  const handleExportHtml = async () => {
    if (!editor) return;
    const html = await editor.exportHtml();
    console.log("Exported HTML:", html);
  };

  return (
    <div>
      <div style={{ padding: "8px" }}>
        <button onClick={handleExportHtml}>Export HTML</button>
      </div>
      <div
        id="editor-container"
        ref={containerRef}
        style={{ height: "600px" }}
      />
    </div>
  );
}

:::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 3: Export HTML​

The exportHtml method returns the rendered HTML string:

const handleExportHtml = async () => {
  if (!editor) return;
  const html = await editor.exportHtml();
  if (html) {
    // Send to your backend, preview, or download
    console.log(html);
  }
};

Next steps​