Skip to main content
Version: Latest

React Quickstart

Get a drag-and-drop email editor running in React in under 2 minutes using the official dragble-react-editor package.

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

Step 1: Install the package​

npm install dragble-react-editor
yarn add dragble-react-editor
pnpm add dragble-react-editor

The Dragble SDK is loaded automatically from the CDN — no script tag required.

Step 2: Add the editor component​

src/EmailEditor.tsx
import { useRef } from "react";
import {
  DragbleEditor,
  type DragbleEditorRef,
  type DesignJson,
  type DragbleSDK,
} from "dragble-react-editor";

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

  const handleReady = (editor: DragbleSDK) => {
    console.log("Editor is ready", editor);
  };

  const handleChange = (data: { design: DesignJson; type: string }) => {
    console.log("Design changed:", data.design);
  };

  const handleExportHtml = async () => {
    const html = await editorRef.current?.editor?.exportHtml();
    console.log("Exported HTML:", html);
  };

  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "8px" }}>
        <button onClick={handleExportHtml}>Export HTML</button>
      </div>
      <DragbleEditor
        ref={editorRef}
        editorKey="YOUR_EDITOR_KEY"
        editorMode="email"
        minHeight="600px"
        onReady={handleReady}
        onChange={handleChange}
        onError={(error) => console.error("Editor error:", error)}
      />
    </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 SDK methods are available on the ref. All exports are Promise-based:

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

Save and load designs​

To persist work and reload it later, use exportJson / loadDesign:

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

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

Hook alternative​

For a slightly more compact setup, the package also exports a useDragbleEditor hook:

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

function MyEditor() {
  const { ref, editor, isReady } = useDragbleEditor();

  return (
    <>
      <button
        onClick={async () => console.log(await editor?.exportHtml())}
        disabled={!isReady}
      >
        Export
      </button>
      <DragbleEditor ref={ref} editorKey="YOUR_EDITOR_KEY" />
    </>
  );
}

Next steps​