Header & Footer

Lock rows at the top and bottom of a design as non-editable header and footer sections that users cannot modify, reorder, or delete.

React

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

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

  return (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_your_key"
      editorMode="email"
      options={{
        features: {
          header: {
            enabled: true,
            design: headerDesignJson, // DesignJson for the header rows
            locked: true,
          },
          footer: {
            enabled: true,
            design: footerDesignJson,
            locked: true,
          },
        },
      }}
      onHeaderRowClick={(rowId) => {
        console.log("Header row clicked:", rowId);
      }}
      onFooterRowClick={(rowId) => {
        console.log("Footer row clicked:", rowId);
      }}
    />
  );
}

Vue

<template>
  <DragbleEditor
    ref="editorRef"
    editor-key="db_your_key"
    editor-mode="email"
    :features="featuresConfig"
    @header-row-click="onHeaderClick"
    @footer-row-click="onFooterClick"
  />
</template>

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

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

const featuresConfig = {
  header: { enabled: true, design: headerDesignJson, locked: true },
  footer: { enabled: true, design: footerDesignJson, locked: true },
};

function onHeaderClick(rowId: string) {
  console.log("Header row clicked:", rowId);
}

function onFooterClick(rowId: string) {
  console.log("Footer row clicked:", rowId);
}
</script>

Angular

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

@Component({
  selector: "app-branded-editor",
  standalone: true,
  imports: [DragbleEditorComponent],
  template: `
    <dragble-editor
      #editor
      editorKey="db_your_key"
      editorMode="email"
      [features]="featuresConfig"
      (headerRowClick)="onHeaderClick($event)"
      (footerRowClick)="onFooterClick($event)"
    ></dragble-editor>
  `,
})
export class BrandedEditorComponent {
  @ViewChild("editor") editorComp!: DragbleEditorComponent;

  featuresConfig = {
    header: { enabled: true, design: headerDesignJson, locked: true },
    footer: { enabled: true, design: footerDesignJson, locked: true },
  };

  onHeaderClick(rowId: string) {
    console.log("Header row clicked:", rowId);
  }

  onFooterClick(rowId: string) {
    console.log("Footer row clicked:", rowId);
  }
}

Vanilla JS

dragble.init({
  containerId: "editor-container",
  editorKey: "db_your_key",
  editorMode: "email",
  options: {
    features: {
      header: { enabled: true, design: headerDesignJson, locked: true },
      footer: { enabled: true, design: footerDesignJson, locked: true },
    },
  },
  callbacks: {
    onHeaderRowClick: (rowId) => console.log("Header clicked:", rowId),
    onFooterRowClick: (rowId) => console.log("Footer clicked:", rowId),
  },
});

:::info Locked vs. unlocked Set locked: true to make the header/footer fully read-only. Set locked: false to display the rows in the header/footer position but allow content editing. :::

Editable header/footer fields

For partially editable headers, set locked: false and lock individual tool properties instead:

features: {
  header: {
    enabled: true,
    design: headerDesignJson,
    locked: false, // Row is editable
  },
}

Combine this with locked tool properties in Configure Tools to allow text changes but prevent layout or color changes.

:::warning Header/footer in exported HTML Header and footer rows are included in the exported HTML from exportHtml(). They render as standard rows at the top and bottom of the email. :::

Method reference

Method	Returns	Description
setHeader(config)	void	Update header configuration at runtime
setFooter(config)	void	Update footer configuration at runtime

Next steps

• Modules — reusable content blocks for the editable body
• Branding Colors — enforce brand colors across the design
• Configure Tools — lock specific properties within editable rows