Adding a drag-and-drop email builder to a React application used to mean paying for a hosted service like Unlayer or building from scratch. GrapesJS changes that. Combine GrapesJS with the MJML preset and GJS.Market plugins to embed a production-quality email editor directly in your React app — with zero per-send fees and full control.
Browse React email plugins →React + GrapesJS email integration overview
GrapesJS initializes against a DOM element, making it straightforward to wrap in a React component. The MJML preset adds email-specific blocks, responsive templates, and MJML compilation — giving your React app a full-featured email editor without any hosted dependencies.
The pattern is simple: create a container div with a ref, initialize GrapesJS in useEffect, and listen to editor events to sync content into your React state or backend.
React email editor component
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' }} />;
}React-compatible email plugins
MJML Newsletter Preset
React-ready MJML email builder
React Email Wrapper
Drop-in React component for email editing
Email Block Library
Header, footer, CTA, and content blocks
HTML Exporter
Export inlined HTML for any ESP
Responsive Preview
Test at mobile, tablet, and desktop sizes
Dark Mode Emails
Automatic dark mode media query support
GrapesJS email vs react-email-editor (Unlayer)
| Feature | GrapesJS + GJS.Market | Unlayer (react-email-editor) |
|---|---|---|
| Open source | ✓ MIT | ✗ Proprietary |
| Pricing | Free | $149–$2,499/mo |
| MJML support | ✓ | ✗ |
| Self-hosted | ✓ | ✗ Hosted only |
| Custom blocks | Unlimited | Limited |
| White-label | ✓ Free | ✓ Paid plans only |
Use cases
Email SaaS
Build a standalone email template builder as a SaaS product with subscription billing.
CRM platform
Embed an email designer inside your CRM so users can create campaigns without leaving your app.
Marketing platform
Add a template editor to your email marketing tool and let users design their own newsletters.
Community & resources
GrapesJS has an active open-source community. Find examples, ask questions, and contribute on GitHub, the official Discord, and npm. GJS.Market is the dedicated marketplace for GrapesJS plugins — browse, buy, and install in minutes.
Frequently Asked Questions
Add email editing to your React app
Browse React-compatible email plugins on GJS.Market.
Browse email plugins →