Validation

Run audits on designs to catch missing links, empty content, accessibility issues, and custom business rules before sending.

React

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

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

  const runAudit = async () => {
    const result = await editorRef.current?.editor?.audit();
    if (result?.status === "PASS") {
      console.log("Design is valid — ready to send");
    } else {
      console.warn("Audit failed:", result?.errors);
      // [{ type: 'MISSING_UNSUBSCRIBE', message: '...', severity: 'error', rowId: '...' }]
    }
  };

  return (
    <>
      <DragbleEditor
        ref={editorRef}
        editorKey="db_your_key"
        editorMode="email"
      />
      <button onClick={runAudit}>Validate</button>
    </>
  );
}

Vue

<template>
  <DragbleEditor ref="editorRef" editor-key="db_your_key" editor-mode="email" />
  <button @click="runAudit">Validate</button>
</template>

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

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

async function runAudit() {
  const result = await editorRef.value?.audit();
  if (result?.status === "PASS") {
    console.log("Design is valid");
  } else {
    console.warn("Issues found:", result?.errors);
  }
}
</script>

Angular

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

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

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

  async runAudit() {
    const result: AuditResult | undefined = await this.sdk?.audit();
    console.log(result?.status, result?.errors);
  }
}

Vanilla JS

const result = await dragble.audit();

if (result.status === "PASS") {
  console.log("All checks passed");
} else {
  result.errors.forEach((err) => {
    console.warn(`[${err.severity}] ${err.type}: ${err.message}`);
  });
}

Custom validators

Add your own validation rules with setValidator(). The validator function receives the design JSON and returns an array of errors:

dragble.setValidator(async (design) => {
  const errors = [];

  // Check for subject line
  if (!design.metadata?.subject) {
    errors.push({
      type: "MISSING_SUBJECT",
      message: "Email subject line is required",
      severity: "error",
    });
  }

  // Check minimum content
  if (design.rows.length < 2) {
    errors.push({
      type: "INSUFFICIENT_CONTENT",
      message: "Design should have at least 2 content rows",
      severity: "warning",
    });
  }

  return errors;
});

:::tip Severity levels Use 'error' for issues that must be fixed before sending, and 'warning' for suggestions. Only error severity causes audit() to return status: 'FAIL'. :::

Validate without UI

Use validateTemplate() for server-side or headless validation that does not highlight errors in the editor:

const result = await dragble.validateTemplate(designJson);
// Same AuditResult shape, but no visual indicators in the editor

:::info Built-in checks The default audit checks for: missing unsubscribe link, empty alt text on images, broken merge tags, empty content rows, and oversized images. Custom validators run in addition to these. :::

AuditResult type

interface AuditResult {
  status: "PASS" | "FAIL";
  errors: Array<{
    type: string;
    message: string;
    severity: "error" | "warning";
    rowId?: string;
  }>;
}

Method reference

Method	Returns	Description
audit()	Promise<AuditResult>	Run all validators and highlight issues in the editor
setValidator(fn)	void	Register a custom validation function
validateTemplate(json)	Promise<AuditResult>	Validate a design JSON without editor UI

Next steps

• Collaboration — combine validation with reviewer workflows
• Export HTML — validate before exporting
• Special Links — ensure required links are present