Basic Email Editor

This page shows a complete, copy-paste-ready React email editor with save, load, and HTML export.

src/App.jsx

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

const EDITOR_KEY = 'your-editor-key';

export default function App() {
  const editorRef = useRef(null);

  const onReady = useCallback(() => {
    console.log('Editor is ready');
  }, []);

  const saveDesign = useCallback(() => {
    editorRef.current?.exportJson((json) => {
      localStorage.setItem('saved-design', JSON.stringify(json));
      alert('Design saved');
    });
  }, []);

  const loadDesign = useCallback(() => {
    const raw = localStorage.getItem('saved-design');
    if (!raw) {
      alert('No saved design found');
      return;
    }
    editorRef.current?.loadDesign(JSON.parse(raw));
  }, []);

  const exportHtml = useCallback(() => {
    editorRef.current?.exportHtml((data) => {
      const { html } = data;
      console.log('Exported HTML length:', html.length);
      // Send `html` to your email API
      const blob = new Blob([html], { type: 'text/html' });
      const url = URL.createObjectURL(blob);
      window.open(url, '_blank');
    });
  }, []);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div style={{ padding: 12, display: 'flex', gap: 8, borderBottom: '1px solid #ddd' }}>
        <button onClick={saveDesign}>Save</button>
        <button onClick={loadDesign}>Load</button>
        <button onClick={exportHtml}>Export HTML</button>
      </div>
      <div style={{ flex: 1 }}>
        <PexelizeEditor
          ref={editorRef}
          editorKey={EDITOR_KEY}
          onReady={onReady}
          minHeight="100%"
        />
      </div>
    </div>
  );
}

Installation

npm install @pexelize/react-editor

What this does

1. Renders a full-height drag-and-drop email editor.
2. Save serialises the design to JSON and stores it in localStorage.
3. Load reads that JSON back and restores the editor state.
4. Export HTML generates production-ready HTML you can send through any ESP.

Replace EDITOR_KEY with the value from your Pexelize dashboard.

CodeSandbox

A runnable version of this example is available on CodeSandbox: Open in CodeSandbox