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 { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

function ValidatedEditor() {
  const editorRef = useRef<PexelizeEditorRef>(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 (
    <>
      <PexelizeEditor
        ref={editorRef}
        editorKey="pk_your_key"
        editorMode="email"
      />
      <button onClick={runAudit}>Validate</button>
    </>
  );
}

Vue

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

<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor } from '@pexelize/vue-editor';

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

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 { PexelizeEditorComponent } from '@pexelize/angular-editor';
import type { PexelizeSDK, AuditResult } from '@pexelize/editor-types';

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

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

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

Vanilla JS

const result = await pexelize.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:

pexelize.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;
});

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 pexelize.validateTemplate(designJson);
// Same AuditResult shape, but no visual indicators in the editor

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