'use client'; import { EmailEditor, type EmailEditorRef } from '@react-email/editor'; import { useRef, useState } from 'react'; import { ExampleShell } from '../example-shell'; const content = { type: 'doc', content: [ { type: 'heading', attrs: { level: 1 }, content: [{ type: 'text', text: 'Welcome to the Newsletter' }], }, { type: 'paragraph', content: [ { type: 'text', text: 'Edit this content, then use the buttons below to export or inspect the editor output. Try switching themes to see how the editor adapts.', }, ], }, ], }; export function StandaloneEditorFull() { const editorRef = useRef(null); const [theme, setTheme] = useState<'basic' | 'minimal'>('basic'); const [output, setOutput] = useState(''); const handleExportHtml = async () => { if (!editorRef.current) return; const html = await editorRef.current.getEmailHTML(); setOutput(html); }; const handleGetJson = () => { if (!editorRef.current) return; setOutput(JSON.stringify(editorRef.current.getJSON(), null, 2)); }; return (

{output && (

      )}
    </ExampleShell>
  );
}
</article></body></html>

Standalone editor

Full features