Skip to main content

Vanilla JavaScript Quickstart

Embed a drag-and-drop email editor with a single script tag — no build tools required.

Prerequisites

You need an editorKey from the Pexelize Dashboard. This authenticates your editor instance.

Step 1: Add the script tag and container​

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Pexelize Email Editor</title>
  <script src="https://sdk.pexelize.com/latest/pexelize-sdk.min.js"></script>
</head>
<body>
  <div style="padding: 8px">
    <button id="export-btn">Export HTML</button>
  </div>
  <div id="editor-container" style="height: 600px;"></div>

  <script>
    pexelize.init({
      containerId: 'editor-container',
      editorKey: 'YOUR_EDITOR_KEY',
      editorMode: 'email',
    });

    pexelize.addEventListener('editor:ready', function () {
      console.log('Editor is ready');
    });

    document.getElementById('export-btn').addEventListener('click', async function () {
      const html = await pexelize.exportHtml();
      console.log('Exported HTML:', html);
    });
  </script>
</body>
</html>
Replace placeholder

Replace YOUR_EDITOR_KEY with the editor key from your Pexelize Dashboard.

You should see a drag-and-drop email editor with a toolbar on the right, content blocks on the left, and a canvas in the center.

Step 2: Export HTML​

document.getElementById('export-btn').addEventListener('click', async function () {
  const html = await pexelize.exportHtml();
  if (html) {
    // Send to your backend, preview, or download
    console.log(html);
  }
});

Step 3: Save and load designs​

// Save the current design
pexelize.saveDesign(function (design) {
  // Send design JSON to your backend
  fetch('/api/designs', {
    method: 'POST',
    body: JSON.stringify(design),
    headers: { 'Content-Type': 'application/json' },
  });
});

// Load a previously saved design
pexelize.loadDesign(savedDesignJson);

Using callbacks​

You can pass callbacks directly in the init config:

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'YOUR_EDITOR_KEY',
  editorMode: 'email',
  callbacks: {
    onReady: function () {
      console.log('Editor ready');
    },
    onChange: function (data) {
      console.log('Design changed:', data.type);
    },
  },
  options: {
    mergeTags: {
      customMergeTags: [
        { name: 'First Name', value: '{{first_name}}' },
        { name: 'Email', value: '{{email}}' },
      ],
    },
  },
});

Using as an ES module​

If you have a bundler, install from npm instead:

npm install @pexelize/editor-sdk
src/editor.ts
import pexelize from '@pexelize/editor-sdk';

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'YOUR_EDITOR_KEY',
  editorMode: 'email',
});

pexelize.addEventListener('editor:ready', () => {
  console.log('Editor is ready');
});

const exportBtn = document.getElementById('export-btn')!;
exportBtn.addEventListener('click', async () => {
  const html = await pexelize.exportHtml();
  console.log(html);
});
Multiple editors

Use createEditor to run multiple editor instances on the same page:

import { createEditor } from '@pexelize/editor-sdk';

const emailEditor = createEditor({
  containerId: 'email-editor',
  editorKey: 'YOUR_EDITOR_KEY',
  editorMode: 'email',
});

const pageEditor = createEditor({
  containerId: 'page-editor',
  editorKey: 'YOUR_EDITOR_KEY',
  editorMode: 'web',
});

Next steps​