Load & Save Designs

Export the editor's design as JSON, persist it to your backend, and load it back later.

React

import { useRef } from "react";
import {
  DragbleEditor,
  DragbleEditorRef,
  DesignJson,
} from "dragble-react-editor";

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

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

  const handleLoad = async () => {
    const res = await fetch("/api/designs/123");
    const { design } = await res.json();
    editorRef.current?.editor?.loadDesign(design);
  };

  return (
    <>
      <DragbleEditor
        ref={editorRef}
        editorKey="db_your_key"
        editorMode="email"
        onReady={() => handleLoad()}
      />
      <button onClick={handleSave}>Save</button>
    </>
  );
}

Vue

<template>
  <DragbleEditor
    ref="editorRef"
    editor-key="db_your_key"
    editor-mode="email"
    @ready="handleLoad"
  />
  <button @click="handleSave">Save</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DragbleEditor } from "dragble-vue-editor";

const editorRef = ref<InstanceType<typeof DragbleEditor>>();

async function handleSave() {
  const design = await editorRef.value?.exportJson();
  await fetch("/api/designs/123", {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ design }),
  });
}

async function handleLoad() {
  const res = await fetch("/api/designs/123");
  const { design } = await res.json();
  editorRef.value?.loadDesign(design);
}
</script>

Angular

import { Component, ViewChild } from "@angular/core";
import { DragbleEditorComponent } from "dragble-angular-editor";
import type { DragbleSDK, DesignJson } from "dragble-types";

@Component({
  selector: "app-email-editor",
  standalone: true,
  imports: [DragbleEditorComponent],
  template: `
    <dragble-editor
      #editor
      editorKey="db_your_key"
      editorMode="email"
      (ready)="onReady($event)"
    ></dragble-editor>
    <button (click)="handleSave()">Save</button>
  `,
})
export class EmailEditorComponent {
  @ViewChild("editor") editorComp!: DragbleEditorComponent;
  private sdk: DragbleSDK | null = null;

  async onReady(sdk: DragbleSDK) {
    this.sdk = sdk;
    await this.handleLoad();
  }

  async handleSave() {
    const design = await this.sdk?.exportJson();
    await fetch("/api/designs/123", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ design }),
    });
  }

  async handleLoad() {
    const res = await fetch("/api/designs/123");
    const { design } = await res.json();
    this.sdk?.loadDesign(design);
  }
}

Vanilla JS

<div id="editor-container" style="height: 600px;"></div>
<button id="save-btn">Save</button>

<script src="https://sdk.dragble.com/latest/dragble-sdk.min.js"></script>
<script>
  dragble.init({
    containerId: "editor-container",
    editorKey: "db_your_key",
    editorMode: "email",
    callbacks: {
      onReady: () => handleLoad(),
    },
  });

  async function handleSave() {
    const design = await dragble.exportJson();
    await fetch("/api/designs/123", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ design }),
    });
  }

  async function handleLoad() {
    const res = await fetch("/api/designs/123");
    const { design } = await res.json();
    dragble.loadDesign(design);
  }

  document.getElementById("save-btn").addEventListener("click", handleSave);
</script>

:::tip Save JSON, not HTML Always persist the design JSON from exportJson(). It contains the full editor state (structure, styles, content) and can be loaded back with loadDesign(). HTML is a one-way render — you cannot load HTML back into the editor. :::

Load a design at init

Pass the design JSON directly as a prop or config option instead of calling loadDesign() manually:

React

<DragbleEditor
  ref={editorRef}
  editorKey="db_your_key"
  design={savedDesignJson}
/>

Vue

<DragbleEditor
  ref="editorRef"
  editor-key="db_your_key"
  :design="savedDesignJson"
/>

Angular

<dragble-editor
  #editor
  editorKey="db_your_key"
  [design]="savedDesignJson"
></dragble-editor>

Vanilla JS

dragble.init({
  containerId: "editor-container",
  editorKey: "db_your_key",
  design: savedDesignJson,
});

Load a blank canvas

Call loadBlank() to reset the editor to an empty design:

React

editorRef.current?.editor?.loadBlank();

Vue

editorRef.value?.loadBlank();

Angular

this.sdk?.loadBlank();

Vanilla JS

dragble.loadBlank();

Auto-save with debounce

Listen to design:updated events and debounce to avoid hammering your API:

:::warning Debounce auto-save The design:updated event fires on every keystroke and drag. Without debouncing, you'll send hundreds of requests per minute. Use at least a 1-second debounce. :::

React

import { useRef, useCallback } from "react";
import {
  DragbleEditor,
  DragbleEditorRef,
  DesignJson,
} from "dragble-react-editor";

function AutoSaveEditor() {
  const editorRef = useRef<DragbleEditorRef>(null);
  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();

  const handleChange = useCallback(() => {
    clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(async () => {
      const design = await editorRef.current?.editor?.exportJson();
      await fetch("/api/designs/123", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ design }),
      });
    }, 1000);
  }, []);

  return (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_your_key"
      onChange={handleChange}
    />
  );
}

Vue

<template>
  <DragbleEditor
    ref="editorRef"
    editor-key="db_your_key"
    @change="handleChange"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DragbleEditor } from "dragble-vue-editor";

const editorRef = ref<InstanceType<typeof DragbleEditor>>();
let timeout: ReturnType<typeof setTimeout>;

function handleChange() {
  clearTimeout(timeout);
  timeout = setTimeout(async () => {
    const design = await editorRef.value?.exportJson();
    await fetch("/api/designs/123", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ design }),
    });
  }, 1000);
}
</script>

Angular

import { Component, ViewChild, OnDestroy } from "@angular/core";
import { DragbleEditorComponent } from "dragble-angular-editor";
import type { DragbleSDK } from "dragble-types";

@Component({
  selector: "app-autosave-editor",
  standalone: true,
  imports: [DragbleEditorComponent],
  template: `
    <dragble-editor
      #editor
      editorKey="db_your_key"
      (ready)="onReady($event)"
      (change)="handleChange()"
    ></dragble-editor>
  `,
})
export class AutoSaveEditorComponent implements OnDestroy {
  @ViewChild("editor") editorComp!: DragbleEditorComponent;
  private sdk: DragbleSDK | null = null;
  private timeout?: ReturnType<typeof setTimeout>;

  onReady(sdk: DragbleSDK) {
    this.sdk = sdk;
  }

  handleChange() {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(async () => {
      const design = await this.sdk?.exportJson();
      await fetch("/api/designs/123", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ design }),
      });
    }, 1000);
  }

  ngOnDestroy() {
    clearTimeout(this.timeout);
  }
}

Vanilla JS

let saveTimeout: ReturnType<typeof setTimeout>;

dragble.init({
  containerId: "editor-container",
  editorKey: "db_your_key",
  callbacks: {
    onChange: () => {
      clearTimeout(saveTimeout);
      saveTimeout = setTimeout(async () => {
        const design = await dragble.exportJson();
        await fetch("/api/designs/123", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ design }),
        });
      }, 1000);
    },
  },
});

Load with validation

Use loadDesignAsync() to get validation feedback when loading a design:

React

const result = await editorRef.current?.editor?.loadDesignAsync(design);
console.log(
  `Loaded ${result?.validRowsCount} rows, ${result?.invalidRowsCount} invalid`,
);
if (result?.errors) {
  console.warn("Validation errors:", result.errors);
}

Vue

const result = await editorRef.value?.editor?.loadDesignAsync(design);
console.log(
  `Loaded ${result?.validRowsCount} rows, ${result?.invalidRowsCount} invalid`,
);

Angular

const result = await this.sdk?.loadDesignAsync(design);
console.log(
  `Loaded ${result?.validRowsCount} rows, ${result?.invalidRowsCount} invalid`,
);

Vanilla JS

const result = await dragble.loadDesignAsync(design);
console.log(
  `Loaded ${result.validRowsCount} rows, ${result.invalidRowsCount} invalid`,
);

Method reference

Method	Returns	Description
exportJson()	Promise<DesignJson>	Export the current design as a JSON object
loadDesign(json, options?)	void	Load a design JSON into the editor
loadDesignAsync(json, options?)	Promise<{ success, validRowsCount, invalidRowsCount, errors? }>	Load a design with validation feedback
loadBlank(options?)	void	Reset to an empty canvas
getDesign()	Promise<{ html, json }>	Get both HTML and JSON in one call
save()	void	Trigger the save event (emits save on the event bus)

Next steps

• Export HTML — render the design as production-ready HTML
• Export PDF, Image & ZIP — server-side rendering exports
• Customize Appearance — themes and accent colors