Version: 1.0.0

Vanilla JS Reference

The Dragble SDK is available via CDN and works in any JavaScript environment without a framework.

Loading the SDK

Add the script tag to your HTML:

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

Quick Start

<!DOCTYPE html>
<html>
  <head>
    <style>
      #editor-container {
        height: 100vh;
      }
    </style>
    <script src="https://sdk.dragble.com/latest/dragble-sdk.min.js"></script>
  </head>
  <body>
    <div id="editor-container"></div>
    <script>
      dragble
        .createEditor({
          containerId: "editor-container",
          user: { id: "user-1", name: "Jane", email: "jane@example.com" },
          appearance: { theme: "light" },
        })
        .then((editor) => {
          editor.addEventListener("ready", () => {
            console.log("Editor ready");
          });

          editor.addEventListener("change", (design) => {
            console.log("Changed", design);
          });
        });
    </script>
  </body>
</html>

API

`createEditor()`

Creates an editor instance inside the given container element.

dragble.createEditor(config: DragbleConfig): Promise<DragbleEditorInstance>;

Parameter	Type	Description
`config`	`DragbleConfig`	Full editor configuration. See Configuration.

`init()`

Initializes the Dragble SDK. Most browsers handle this automatically when using createEditor.

dragble.init(config: DragbleConfig): void;

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.
`showPreview`	`() => void`	Open preview.
`hidePreview`	`() => void`	Close preview.
`destroy`	`() => void`	Destroy the editor.
`isReady`	`() => boolean`	Check ready state.
`addEventListener`	`(event: string, handler: Function) => void`	Subscribe to events.
`removeEventListener`	`(event: string, handler: Function) => void`	Unsubscribe from events.

DragbleConfig

The full configuration object passed to createEditor:

interface DragbleConfig {
  containerId: string;
  editorKey?: string;
  editorMode?: "email" | "web";
  user?: { id: string; name: string; email: string };
  locale?: string;
  translations?: Record<string, Record<string, string>>;
  textDirection?: "ltr" | "rtl";
  mergeTags?: MergeTag[];
  designTags?: Record<string, string>;
  specialLinks?: SpecialLink[];
  modules?: Module[];
  displayConditions?: DisplayCondition[];
  appearance?: AppearanceConfig;
  tools?: ToolsConfig;
  customTools?: CustomTool[];
  fonts?: FontDefinition[];
  bodyValues?: BodyValues;
  header?: DesignJson;
  footer?: DesignJson;
  editor?: { minRows?: number; maxRows?: number };
  features?: FeaturesConfig;
  assetStorage?: AssetStorageConfig;
  ai?: AIConfig;
  callbacks?: DragbleCallbacks;
  onReady?: () => void;
  onImageUpload?: (
    file: File,
    done: (result: { progress: number; url?: string }) => void,
  ) => void;
}

See Configuration for the full reference of every option.

Complete Example

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
      }
      .toolbar {
        padding: 8px;
        display: flex;
        gap: 8px;
      }
      #editor-container {
        height: calc(100vh - 48px);
      }
    </style>
    <script src="https://sdk.dragble.com/latest/dragble-sdk.min.js"></script>
  </head>
  <body>
    <div class="toolbar">
      <button id="btn-export">Export HTML</button>
      <button id="btn-undo">Undo</button>
      <button id="btn-redo">Redo</button>
      <button id="btn-save">Save</button>
    </div>
    <div id="editor-container"></div>

    <script>
      let editor = null;

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

          document
            .getElementById("btn-export")
            .addEventListener("click", async () => {
              const { html } = await editor.exportHtml();
              console.log(html);
            });

          document
            .getElementById("btn-undo")
            .addEventListener("click", () => editor.undo());
          document
            .getElementById("btn-redo")
            .addEventListener("click", () => editor.redo());

          document.getElementById("btn-save").addEventListener("click", () => {
            const design = editor.getDesign();
            fetch("/api/designs", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(design),
            });
          });
        });
    </script>
  </body>
</html>

warning

Always call editor.destroy() before removing the container element from the DOM to prevent memory leaks.

tip

For SPAs without a framework, call createEditor/destroy per route transition.

Loading the SDK​

Quick Start​

API​

createEditor()​

init()​

Editor Instance Methods​

DragbleConfig​

Complete Example​