Multiple Editors

Create multiple independent editor instances on a single page, each with its own configuration, design, and lifecycle.

React

import { useRef } from 'react';
import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

function MultiEditorPage() {
  const headerEditor = useRef<PexelizeEditorRef>(null);
  const bodyEditor = useRef<PexelizeEditorRef>(null);

  const saveAll = async () => {
    const [headerJson, bodyJson] = await Promise.all([
      headerEditor.current?.editor?.exportJson(),
      bodyEditor.current?.editor?.exportJson(),
    ]);
    await fetch('/api/designs/save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ header: headerJson, body: bodyJson }),
    });
  };

  return (
    <>
      <h2>Header Section</h2>
      <PexelizeEditor
        ref={headerEditor}
        editorKey="pk_your_key"
        editorMode="email"
        style={{ height: '300px' }}
      />

      <h2>Body Section</h2>
      <PexelizeEditor
        ref={bodyEditor}
        editorKey="pk_your_key"
        editorMode="email"
        style={{ height: '500px' }}
      />

      <button onClick={saveAll}>Save All</button>
    </>
  );
}

Vue

<template>
  <h2>Header Section</h2>
  <PexelizeEditor ref="headerEditor" editor-key="pk_your_key" editor-mode="email" />

  <h2>Body Section</h2>
  <PexelizeEditor ref="bodyEditor" editor-key="pk_your_key" editor-mode="email" />

  <button @click="saveAll">Save All</button>
</template>

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

const headerEditor = ref<InstanceType<typeof PexelizeEditor>>();
const bodyEditor = ref<InstanceType<typeof PexelizeEditor>>();

async function saveAll() {
  const [headerJson, bodyJson] = await Promise.all([
    headerEditor.value?.exportJson(),
    bodyEditor.value?.exportJson(),
  ]);
  await fetch('/api/designs/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ header: headerJson, body: bodyJson }),
  });
}
</script>

Angular

import { Component, ViewChild } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';
import type { PexelizeSDK } from '@pexelize/editor-types';

@Component({
  selector: 'app-multi-editor',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <h2>Header Section</h2>
    <pexelize-editor
      #headerEditor
      editorKey="pk_your_key"
      editorMode="email"
      (ready)="onHeaderReady($event)"
    ></pexelize-editor>

    <h2>Body Section</h2>
    <pexelize-editor
      #bodyEditor
      editorKey="pk_your_key"
      editorMode="email"
      (ready)="onBodyReady($event)"
    ></pexelize-editor>

    <button (click)="saveAll()">Save All</button>
  `,
})
export class MultiEditorComponent {
  private headerSdk: PexelizeSDK | null = null;
  private bodySdk: PexelizeSDK | null = null;

  onHeaderReady(sdk: PexelizeSDK) { this.headerSdk = sdk; }
  onBodyReady(sdk: PexelizeSDK) { this.bodySdk = sdk; }

  async saveAll() {
    const [headerJson, bodyJson] = await Promise.all([
      this.headerSdk?.exportJson(),
      this.bodySdk?.exportJson(),
    ]);
    await fetch('/api/designs/save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ header: headerJson, body: bodyJson }),
    });
  }
}

Vanilla JS

<div id="header-editor" style="height: 300px;"></div>
<div id="body-editor" style="height: 500px;"></div>
<button id="save-all">Save All</button>

<script src="https://sdk.pexelize.com/latest/pexelize-sdk.min.js"></script>
<script>
  const headerInstance = pexelize.createEditor({
    containerId: 'header-editor',
    editorKey: 'pk_your_key',
    editorMode: 'email',
  });

  const bodyInstance = pexelize.createEditor({
    containerId: 'body-editor',
    editorKey: 'pk_your_key',
    editorMode: 'email',
  });

  document.getElementById('save-all').addEventListener('click', async () => {
    const [headerJson, bodyJson] = await Promise.all([
      headerInstance.exportJson(),
      bodyInstance.exportJson(),
    ]);
    await fetch('/api/designs/save', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ header: headerJson, body: bodyJson }),
    });
  });
</script>

Same editorKey supported

Multiple editor instances can share the same editorKey. Each instance runs in its own iframe with fully isolated state (design data, undo/redo, event listeners). The only requirement is a unique containerId per instance, which framework wrappers generate automatically.

Unique containerId required

Each editor instance must have its own DOM container element with a distinct id. Reusing the same container ID will cause the second editor to fail silently. Framework wrappers (React, Vue, Angular) handle this automatically.

Lifecycle management

Destroy editor instances when they are no longer needed to free memory:

// Vanilla JS
headerInstance.destroy();
bodyInstance.destroy();

// React — handled automatically on unmount
// Vue — handled automatically on unmount
// Angular — handled automatically on component destroy

Framework wrappers handle cleanup

React, Vue, and Angular wrappers automatically destroy the editor instance when the component unmounts. You only need to call destroy() manually with the Vanilla JS API.

Method reference

Method	Returns	Description
createEditor(config)	PexelizeInstance	Create a new independent editor instance
destroy()	void	Destroy an editor instance and free resources

Next steps

• Load & Save Designs — save and load each instance independently
• Collaboration — different roles per editor instance
• Header & Footer — alternative to multiple editors for locked sections