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

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

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_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>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_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 { PexelizeEditor } from '@pexelize/vue-editor';

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

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

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

  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

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_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),
  },
});

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.

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