React Email Builder That Ships Faster

import { useEffect, useRef } from 'react';
import grapesjs from 'grapesjs';
import grapesjsNewsletter from 'grapesjs-preset-newsletter';
import 'grapesjs/dist/css/grapes.min.css';

export default function EmailEditor({ onChange }) {
  const editorRef = useRef(null);

  useEffect(() => {
    const editor = grapesjs.init({
      container: editorRef.current,
      plugins: [grapesjsNewsletter],
      pluginsOpts: {
        [grapesjsNewsletter]: {},
      },
      storageManager: false,
    });

    editor.on('change:changesCount', () => {
      onChange?.({
        html: editor.getHtml(),
        css: editor.getCss(),
      });
    });

    return () => editor.destroy();
  }, []);

  return <div ref={editorRef} style={{ height: '600px' }} />;
}