Modules

Save groups of rows as reusable content blocks that appear in the modules panel for drag-and-drop insertion.

React

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

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

  const handleReady = async () => {
    const editor = editorRef.current?.editor;

    await editor?.setModules([
      {
        id: "hero-banner",
        name: "Hero Banner",
        category: "Headers",
        thumbnail: "https://cdn.example.com/thumbs/hero.png",
        design: heroDesignJson, // a saved DesignJson snippet
      },
      {
        id: "footer-standard",
        name: "Standard Footer",
        category: "Footers",
        thumbnail: "https://cdn.example.com/thumbs/footer.png",
        design: footerDesignJson,
      },
    ]);
  };

  return (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_your_key"
      editorMode="email"
      onReady={handleReady}
      onModuleSave={async (module) => {
        await fetch("/api/modules", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(module),
        });
      }}
    />
  );
}

Vue

<template>
  <DragbleEditor
    ref="editorRef"
    editor-key="db_your_key"
    editor-mode="email"
    @ready="onReady"
    @module-save="onModuleSave"
  />
</template>

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

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

async function onReady() {
  await editorRef.value?.setModules([
    {
      id: "hero-banner",
      name: "Hero Banner",
      category: "Headers",
      thumbnail: "https://cdn.example.com/thumbs/hero.png",
      design: heroDesignJson,
    },
  ]);
}

async function onModuleSave(module: any) {
  await fetch("/api/modules", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(module),
  });
}
</script>

Angular

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

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

  async onReady(sdk: DragbleSDK) {
    this.sdk = sdk;
    await this.sdk.setModules([
      {
        id: "hero-banner",
        name: "Hero Banner",
        category: "Headers",
        design: heroDesignJson,
      },
    ]);
  }

  async onModuleSave(module: ModuleConfig) {
    await fetch("/api/modules", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(module),
    });
  }
}

Vanilla JS

dragble.init({
  containerId: "editor-container",
  editorKey: "db_your_key",
  editorMode: "email",
  callbacks: {
    onReady: async () => {
      await dragble.setModules([
        {
          id: "hero-banner",
          name: "Hero Banner",
          category: "Headers",
          thumbnail: "https://cdn.example.com/thumbs/hero.png",
          design: heroDesignJson,
        },
      ]);
    },
    onModuleSave: async (module) => {
      await fetch("/api/modules", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(module),
      });
    },
  },
});

:::tip Module design JSON A module's design property uses the same DesignJson format as exportJson(). Export a design, extract the rows you want, and save that subset as a module. :::

Synced modules

Synced modules stay linked to the source. When you update a synced module, all designs using it reflect the changes on next load:

await dragble.setModules([
  {
    id: "legal-footer",
    name: "Legal Footer",
    category: "Footers",
    design: legalFooterJson,
    synced: true, // Changes propagate to all designs using this module
  },
]);

:::warning Synced module edits Users cannot edit the content of a synced module inline. They must update the source module. Unsynced modules are fully editable after insertion. :::

Method reference

Method	Returns	Description
setModules(modules)	Promise<void>	Set the available modules list
addModule(module)	void	Append a single module to the panel
removeModule(id)	void	Remove a module by ID

Next steps

• Header & Footer — lock rows as non-editable header/footer
• Custom Tools — build custom tools to use within modules
• Load & Save Designs — persist designs that reference modules