Modules

Save groups of rows as reusable content blocks that appear in the modules panel for drag-and-drop insertion.

React

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

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

  const handleReady = async () => {
    const editor = editorRef.current?.editor;

    await editor?.setModules([
      {
        id: 'hero-banner',
        name: 'Hero Banner',
        category: 'Headers',
        thumbnail: 'https://cdn.example.com/thumbs/hero.png',
        design: heroDesignJson, // a saved DesignJson snippet
      },
      {
        id: 'footer-standard',
        name: 'Standard Footer',
        category: 'Footers',
        thumbnail: 'https://cdn.example.com/thumbs/footer.png',
        design: footerDesignJson,
      },
    ]);
  };

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      onReady={handleReady}
      onModuleSave={async (module) => {
        await fetch('/api/modules', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(module),
        });
      }}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    @ready="onReady"
    @module-save="onModuleSave"
  />
</template>

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

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

async function onReady() {
  await editorRef.value?.setModules([
    {
      id: 'hero-banner',
      name: 'Hero Banner',
      category: 'Headers',
      thumbnail: 'https://cdn.example.com/thumbs/hero.png',
      design: heroDesignJson,
    },
  ]);
}

async function onModuleSave(module: any) {
  await fetch('/api/modules', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(module),
  });
}
</script>

Angular

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

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

  async onReady(sdk: PexelizeSDK) {
    this.sdk = sdk;
    await this.sdk.setModules([
      { id: 'hero-banner', name: 'Hero Banner', category: 'Headers', design: heroDesignJson },
    ]);
  }

  async onModuleSave(module: ModuleConfig) {
    await fetch('/api/modules', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(module),
    });
  }
}

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  callbacks: {
    onReady: async () => {
      await pexelize.setModules([
        {
          id: 'hero-banner',
          name: 'Hero Banner',
          category: 'Headers',
          thumbnail: 'https://cdn.example.com/thumbs/hero.png',
          design: heroDesignJson,
        },
      ]);
    },
    onModuleSave: async (module) => {
      await fetch('/api/modules', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(module),
      });
    },
  },
});

Module design JSON

A module's design property uses the same DesignJson format as exportJson(). Export a design, extract the rows you want, and save that subset as a module.

Synced modules

Synced modules stay linked to the source. When you update a synced module, all designs using it reflect the changes on next load:

await pexelize.setModules([
  {
    id: 'legal-footer',
    name: 'Legal Footer',
    category: 'Footers',
    design: legalFooterJson,
    synced: true, // Changes propagate to all designs using this module
  },
]);

Synced module edits

Users cannot edit the content of a synced module inline. They must update the source module. Unsynced modules are fully editable after insertion.

Method reference

Method	Returns	Description
setModules(modules)	Promise<void>	Set the available modules list
addModule(module)	void	Append a single module to the panel
removeModule(id)	void	Remove a module by ID

Next steps

• Header & Footer — lock rows as non-editable header/footer
• Custom Tools — build custom tools to use within modules
• Load & Save Designs — persist designs that reference modules