react-email-studio

Visual email editor for React — drag-and-drop layouts and blocks, rich text, images, buttons, tables, and more. Designs save as JSON (email_document); use jsonToHtml() to generate HTML for preview and your ESP (SendGrid, SES, Mailgun, …).

Release notes

Version history and migration hints: CHANGELOG.md (also included in the published npm tarball under node_modules/react-email-studio/CHANGELOG.md).

Features

• Multi-column layout rows and content blocks (heading, text/HTML, image, button, link, divider, spacer, social, video, menu, timer, table, nested layouts)
• Page & content backgrounds (solid, gradient, image), responsive preview
• Undo / redo, zoom, device preview modal
• Internationalized UI strings (en, fr, de, es)
• Template placeholders (e.g. {{first_name}}) can be typed directly in HTML / text blocks
• Tree-shakeable ESM + CJS, TypeScript types

Installation

npm install react-email-studio

pnpm add react-email-studio
yarn add react-email-studio

Peer dependencies

Install these in your application (versions should satisfy peerDependencies in this package):

react, react-dom, lucide-react, and TipTap v3 (@tiptap/react, @tiptap/core, @tiptap/starter-kit, @tiptap/extension-link, @tiptap/extension-placeholder, @tiptap/extension-text-align, @tiptap/extension-text-style, @tiptap/extension-underline).

Quick start

import { useRef } from "react";
import {
  ReactEmailEditor,
  type ReactEmailEditorRef,
  jsonToHtml,
} from "react-email-studio";

export function App() {
  const editorRef = useRef<ReactEmailEditorRef>(null);

  return (
    <>
      <button
        type="button"
        onClick={() =>
          editorRef.current?.exportJson((json) => {
            // Persist JSON (API / database)
            fetch("/api/save-email", { method: "POST", body: json });
          }, true)
        }
      >
        Save design
      </button>

      <ReactEmailEditor
        ref={editorRef}
        hideTemplates
        onReady={(api) => {
          /* api.loadJson(existingDesign); */
        }}
        onUpload={async (file) => {
          const url = await uploadToYourStorage(file); // must return a public URL
          return url;
        }}
        options={{ locale: "en" }}
      />
    </>
  );
}

// Generate HTML for sending (server or client)
const html = jsonToHtml(savedDesignJson, {
  customCSS: `/* optional extra styles */`,
});

Implement onUpload so image/video uploads return URLs your recipients can load (HTTPS recommended).

Package exports

| Export | Description | |--------|-------------| | ReactEmailEditor | Main editor component (forwardRef). | | ReactEmailEditorProps | Component props type. | | ReactEmailEditorRef | Imperative API: loadJson, exportJson. | | jsonToHtml | (design, opts?) => string — full HTML email document. | | utf8ToBase64, base64ToUtf8 | Encoding helpers. | | EmailPreviewModal | Standalone responsive preview modal. | | emailPreviewDevices | Device presets for preview. | | EmailPreviewModalProps, MobilePreviewVariant | TypeScript types. | | ReactEmailEditorOptions, JsonToHtmlOptions, EmailHtmlOptions | Editor options and HTML generation options. | | EmailDocument, EmailDocumentSettings, … | JSON schema types for stored designs. |

For framework setup (Next.js client/SSR), props tables, and troubleshooting, see TUTORIAL.md.

Documentation in this package

| File | Audience | |------|----------| | USER_README.md | User guide — editor UI, workflows, options overview, troubleshooting. | | TUTORIAL.md | Integration tutorial — peers, save/load, Next.js/Vite, APIs, TypeScript. | | README.md (this file) | npm landing page — install, quick start, exports. |

Deployment (hosting, CSP, publishing), deeper integration notes, and monorepo DEPLOYMENT.md live in the source repository alongside this package—clone or browse the repo for the full file.

License

MIT