React Reference

The Dragble editor can be embedded in React using the CDN-based SDK.

Adding the SDK

Add the script tag to your index.html:

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

Usage with React

Since React runs on the client side, use useEffect to initialize the editor:

import { useRef, useEffect, useState } from "react";

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

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

    const pexEditor = dragble.createEditor({
      containerId: "editor-container",
      user: { id: "user-1", name: "Jane", email: "jane@example.com" },
      appearance: { theme: "light" },
    });

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

    pexEditor.addEventListener("change", (design: any) => {
      console.log("Changed", design);
    });

    setEditor(pexEditor);

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

  return (
    <div id="editor-container" ref={containerRef} style={{ height: "100vh" }} />
  );
}

Editor Instance Methods

Method	Signature	Description
loadDesign	(design: DesignJson) => void	Load a design.
getDesign	() => DesignJson	Get the current design JSON.
exportHtml	() => Promise<ExportHtmlData>	Export as HTML.
exportImage	(options?: ExportImageOptions) => Promise<ExportImageData>	Export as image.
exportPdf	(options?: ExportPdfOptions) => Promise<ExportPdfData>	Export as PDF.
undo	() => void	Undo last action.
redo	() => void	Redo last action.
setViewMode	(mode: ViewMode) => void	Switch desktop/tablet/mobile.
setTheme	(theme: ThemeMode) => void	Switch light/dark theme.
showPreview	() => void	Open preview modal.
hidePreview	() => void	Close preview modal.
destroy	() => void	Destroy the editor instance.
addEventListener	(event: string, handler: Function) => void	Subscribe to events.
removeEventListener	(event: string, handler: Function) => void	Unsubscribe from events.

Event Types

Event	Handler	Description
ready	() => void	Editor is fully initialized.
change	(design: DesignJson) => void	Design changed.
load	(design: DesignJson) => void	Design loaded.
error	(error: any) => void	Error occurred.

TypeScript

To use with TypeScript, declare the global:

declare const dragble: {
  createEditor(config: DragbleConfig): DragbleEditorInstance;
};

interface DragbleConfig {
  containerId: string;
  editorKey?: string;
  editorMode?: "email" | "web";
  user?: { id: string; name: string; email: string };
  appearance?: { theme?: "light" | "dark"; accentColor?: string };
}

interface DragbleEditorInstance {
  loadDesign(design: DesignJson): void;
  getDesign(): DesignJson;
  exportHtml(): Promise<ExportHtmlData>;
  // ... other methods
  addEventListener(event: string, handler: Function): void;
  destroy(): void;
}

warning

Always set an explicit height on the editor container. The editor fills its parent and won't render without a defined height.