Quick start

Quick start

Mount the editor, wire a ref, and read the design back. That's the whole loop.

import { useRef } from "react";
import EmailEditor, { type MailkaroIframeEditorRef } from "react-email-craft";

export function Composer() {
  const editorRef = useRef<MailkaroIframeEditorRef>(null);

  const onReady = () => {
    // Load a saved design (or leave empty for a blank canvas)
    // editorRef.current?.editor.loadDesign(savedDesign);
  };

  const save = () => {
    editorRef.current?.editor.exportHtml(({ design, html }) => {
      // 'design' is JSON you store; 'html' is a preview export
      console.log(design, html);
    });
  };

  return (
    <div style={{ height: "100vh" }}>
      <EmailEditor
        ref={editorRef}
        token="pk_live_xxx"                 // scopes plan + features (optional in dev)
        options={{ mergeTags: {} }}         // field pickers (see Merge tags)
        onReady={onReady}
      />
      <button onClick={save}>Save</button>
    </div>
  );
}

The loop in five steps#

1. Import the editor. Import EmailEditor from react-email-craft and create a ref with useRef.
2. Mount it in a sized container. Render EmailEditor inside an element with a height and pass your pk_live_ token, options and an onReady handler.
3. Load a design or start blank. In onReady, call editor.loadDesign with a saved design, or leave it out for a blank canvas.
4. Read the design back. Call editor.exportHtml in a save handler. You get the design JSON and a preview of the HTML.
5. Store the design JSON. Keep the design JSON in your own database, and render production HTML on your server so merge tags resolve against real data.

What you get back#

• Design JSON, the source of truth; store it and reload it later.
• HTML, a preview export. For production sends, render on the server (see Rendering) so merge tags resolve against real data.

Have existing Unlayer designs? They load automatically.