Skip to main content

React Quickstart

Get a drag-and-drop email editor running in React in under 2 minutes.

Prerequisites

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

Step 1: Install​

npm install @pexelize/react-editor

Step 2: Add the editor component​

src/EmailEditor.tsx
import { useRef } from 'react';
import { PexelizeEditor, type PexelizeEditorRef, type PexelizeSDK } from '@pexelize/react-editor';

export default function EmailEditor() {
  const editorRef = useRef<PexelizeEditorRef>(null);

  const handleReady = (editor: PexelizeSDK) => {
    console.log('Editor is ready', editor);
  };

  const handleExportHtml = async () => {
    const html = await editorRef.current?.editor?.exportHtml();
    console.log('Exported HTML:', html);
  };

  return (
    <div>
      <div style={{ padding: '8px' }}>
        <button onClick={handleExportHtml}>Export HTML</button>
      </div>
      <PexelizeEditor
        ref={editorRef}
        editorKey="YOUR_EDITOR_KEY"
        editorMode="email"
        minHeight="600px"
        onReady={handleReady}
      />
    </div>
  );
}
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 3: Export HTML​

The exportHtml method returns the rendered HTML string:

const handleExportHtml = async () => {
  const html = await editorRef.current?.editor?.exportHtml();
  if (html) {
    // Send to your backend, preview, or download
    console.log(html);
  }
};
Use the hook

@pexelize/react-editor also exports a usePexelizeEditor hook that gives you ref, editor, and isReady in one call:

import { usePexelizeEditor } from '@pexelize/react-editor';

const { ref, editor, isReady } = usePexelizeEditor();

Next steps​