Email Export

Quick start

If you use the standalone EmailEditor component, you can access the email HTML and plain text through ref methods.

import { EmailEditor, type EmailEditorRef } from '@react-email/editor';
import { useRef, useState } from 'react';

export function MyEditor() {
  const ref = useRef<EmailEditorRef>(null);
  const [html, setHtml] = useState('');

  const handleExport = async () => {
    if (!ref.current) return;
    const html = await ref.current.getEmailHTML();
    setHtml(html);
  };

  return (
    <div>
      <EmailEditor ref={ref} content="<p>Edit me</p>" />
      <button onClick={handleExport}>Export HTML</button>
      {html && <textarea readOnly value={html} />}
    </div>
  );
}

The ref exposes three export methods:

Method	Returns	Description
`getEmailHTML()`	`Promise<string>`	Email-ready HTML
`getEmailText()`	`Promise<string>`	Plain text version
`getEmail()`	`Promise<{ html, text }>`	Both in a single call

All three use composeReactEmail under the hood.

Using without EmailEditor

Use composeReactEmail directly to convert editor content into email-ready HTML and plain text without EmailEditor.

import { composeReactEmail } from '@react-email/editor/core';
import { StarterKit } from '@react-email/editor/extensions';
import { EmailTheming } from '@react-email/editor/plugins';
import { BubbleMenu } from '@react-email/editor/ui';
import { EditorProvider, useCurrentEditor } from '@tiptap/react';
import { useState } from 'react';

const extensions = [StarterKit, EmailTheming];

const content = `
  <h1>My Email Newsletter</h1>
  <p>Edit this content, then click <strong>Export HTML</strong> to see the generated email markup.</p>
  <p>The exported HTML uses React Email components and is ready to send.</p>
`;

function ExportPanel() {
  const { editor } = useCurrentEditor();
  const [html, setHtml] = useState('');
  const [exporting, setExporting] = useState(false);

  const handleExport = async () => {
    if (!editor) return;
    setExporting(true);
    const result = await composeReactEmail({ editor, preview: null });
    setHtml(result.html);
    setExporting(false);
  };

  return (
    <div>
      <button onClick={handleExport} disabled={exporting}>
        {exporting ? 'Exporting...' : 'Export HTML'}
      </button>
      {html && (
        <textarea readOnly value={html} rows={16} style={{ width: '100%', fontFamily: 'monospace' }} />
      )}
    </div>
  );
}

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu />
      <ExportPanel />
    </EditorProvider>
  );
}

How it works

The composeReactEmail function follows this pipeline:

Read the editor’s JSON document
Traverse each node and mark in the document tree
Call renderToReactEmail() on each EmailNode and EmailMark extension
Apply theme styles via the SerializerPlugin (if EmailTheming is configured)
Wrap the content in a BaseTemplate component
Renders to an HTML string and plain text version using render

The return value is:

const { html, text } = await composeReactEmail({ editor, preview: null });

// html  — Full HTML email string, ready to send
// text  — Plain text version for email clients that don't support HTML

Preview text

The preview parameter sets the email preview text. Email preview text is the snippet shown in inbox list views before the email is opened.

const result = await composeReactEmail({
  editor,
  preview: 'Check out our latest updates!',
});

Pass null to omit preview text.

Using with theming

When the EmailTheming extension is in your extensions array, theme styles are automatically injected into the exported HTML. The serializer uses the SerializerPlugin provided by EmailTheming to resolve styles for each node based on the current theme and depth in the document tree.

const extensions = [StarterKit, EmailTheming.configure({ theme: 'basic' })];

// Later, when exporting:
const { html } = await composeReactEmail({ editor, preview: null });
// ...the html includes all theme styles inline

Full example with export panel

Here’s a complete editor with theming and an export panel.

import { composeReactEmail } from '@react-email/editor/core';
import { StarterKit } from '@react-email/editor/extensions';
import { EmailTheming } from '@react-email/editor/plugins';
import {
  BubbleMenu,
  defaultSlashCommands,
  SlashCommand,
} from '@react-email/editor/ui';
import { EditorProvider, useCurrentEditor } from '@tiptap/react';
import { useState } from 'react';

type EditorTheme = 'basic' | 'minimal';

function ControlPanel() {
  const { editor } = useCurrentEditor();
  const [html, setHtml] = useState('');
  const [exporting, setExporting] = useState(false);

  const handleExport = async () => {
    if (!editor) return;
    setExporting(true);
    const result = await composeReactEmail({ editor, preview: null });
    setHtml(result.html);
    setExporting(false);
  };

  return (
    <div>
      <button onClick={handleExport} disabled={exporting}>
        {exporting ? 'Exporting...' : 'Export HTML'}
      </button>
      {html && (
        <textarea
          readOnly
          value={html}
          rows={16}
          style={{ width: '100%', fontFamily: 'monospace', fontSize: '12px' }}
        />
      )}
    </div>
  );
}

export function FullEmailBuilder() {
  const [theme, setTheme] = useState<EditorTheme>('basic');
  const extensions = [StarterKit, EmailTheming.configure({ theme })];

  const content = `
    <h1>Weekly Newsletter</h1>
    <p>Edit this content, then click <strong>Export HTML</strong> to see the generated email markup.</p>
  `;

  return (
    <div>
      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
        <button onClick={() => setTheme('basic')}>Basic Theme</button>
        <button onClick={() => setTheme('minimal')}>Minimal Theme</button>
      </div>
      <EditorProvider key={theme} extensions={extensions} content={content}>
        <BubbleMenu hideWhenActiveNodes={['button']} hideWhenActiveMarks={['link']} />
        <BubbleMenu.LinkDefault />
        <BubbleMenu.ButtonDefault />
        <SlashCommand items={defaultSlashCommands} />
        <ControlPanel />
      </EditorProvider>
    </div>
  );
}

Quick start

Using without EmailEditor

How it works

Preview text

Using with theming

Full example with export panel

Examples

Email Export

Full Email Builder

​Quick start

​Using without EmailEditor

​How it works

​Preview text

​Using with theming

​Full example with export panel

​Examples

Email Export

Full Email Builder

Quick start

Using without EmailEditor

How it works

Preview text

Using with theming

Full example with export panel

Examples