React Email Editor Review

Overview

React Email Editor is Unlayer's official React component for embedding a drag-and-drop email builder inside your own application, and it pays to be precise about what the MIT license covers. The npm package is a thin wrapper whose single runtime dependency is a types package; the editor itself is a hosted service loaded from editor.unlayer.com into an iframe and unlocked with a projectId from Unlayer's developer console. Install is npm install react-email-editor, then mount the component with an onReady callback and call loadDesign, saveDesign, or exportHtml on the ref. Version 2.0.0 (July 2026) modernized the build, requires React 16.8 or newer, and fixed a long-standing unmount leak; 2.1.2 in August 2026 fixed an SSR hydration bug that could leave a blank editor under the Next.js App Router. The hosted engine is a real builder, not a demo. It ships 15 built-in content blocks, custom tools and blocks, merge tags that accept any templating syntax, display conditions, device previews, undo and redo, and inbox previews across real email clients on the top plan. Pricing is public: a free tier, Launch at $250 per month for white-labeling, custom tools, and the Cloud API, Scale at $750 for custom blocks, collaboration, and smart merge tags, and Optimize at $2, 000 for custom CSS, AMP, and inbox previews. AI features are real and metered. An AI Assistant on paid plans streams edits into the design from chat prompts, routes to OpenAI or Anthropic, and draws on a workspace credit balance; AI image generation reached Launch plans in August 2026. There is also a hosted MCP server in beta with 14 documented tools plus agent skills for Claude Code, Codex, and Cursor, unusual for an embedded editor and handy if your users work with AI assistants. The trade is control. Exports return HTML and a design JSON, there is no MJML output, AMP requires the top plan, and self-hosting is Enterprise-only.

AI Capabilities

• AI Assistant chat editing
• AI image generation
• AI Template Importer
• Unlayer MCP server (beta)
• Agent Skills for Claude Code, Codex, and Cursor

Key Integrations

How to install

1. Install the wrapper: npm install react-email-editor --save. Version 2.0.0 (July 2026) raised the floor to React 16.8 or newer and Node 18 or newer.
2. Import EmailEditor, hold a ref with useRef, and render <EmailEditor ref={emailEditorRef} onReady={onReady} />. The published bundle carries a 'use client' directive, so it runs in the Next.js App Router, and 2.1.2 fixed the SSR hydration mismatch that produced a silently blank editor there.
3. Create a project in the Unlayer Developer Console. The component loads editor.unlayer.com/embed.js and needs a projectId to initialize, and the docs tell you to add your production domains under Project > Settings > Deployment so the builder only runs where you allow.
4. Drive the editor through the three documented methods on the ref: loadDesign(object) to load saved JSON, saveDesign(callback) to get it back, and exportHtml(callback) to receive both the design JSON and the HTML.
5. Enable AI with features: { ai: { enabled: true, assistant: true } } in the options prop plus a user id. The docs state that without the user id the assistant stays hidden and AI requests are rejected server-side.
6. Angular and Vue teams do not need this package: Unlayer publishes separate open-source Angular Email Editor and Vue Email Editor components, plus a vanilla JS path through unlayer.init().

Requirements

React 16.8 or newer and Node 18 or newer for the build, a Unlayer project with a projectId, and network access to editor.unlayer.com at runtime, because the editor renders in an iframe served from Unlayer's CDN. Custom tools and blocks are configured through that hosted options model rather than in your bundle.

Best for

SaaS teams that need a white-label drag-and-drop email builder inside their product and would rather buy the editor than spend months building and maintaining one. The React, Angular, and Vue components cover mixed stacks.

Not for

Teams that need the editing engine on their own infrastructure, since on-premise deployment is Enterprise-only. The free tier omits white-labeling, and custom tools, custom blocks, custom CSS, collaboration, AMP, and inbox previews each sit behind a specific paid plan, so map the features you need to a tier before you commit.

Hands-on notes

Assessed from the GitHub repository, Unlayer's docs, and the pricing page rather than an integration. The architecture is the first thing to understand: the npm package is a thin MIT-licensed wrapper whose single runtime dependency is a types package, while the editor is a hosted service loaded from editor.unlayer.com into an iframe and unlocked with a projectId.

The component API is small and stable. Three documented methods cover the data path: loadDesign, saveDesign, and exportHtml, which returns both the design JSON and the HTML. Version 2.0.0 in July 2026 modernized the build and requires React 16.8 or newer, and 2.1.2 in August 2026 fixed an SSR hydration bug that could render a blank editor in the Next.js App Router.

Plan against the pricing tiers rather than the free tier. White-labeling starts at Launch, custom blocks and collaboration at Scale, and custom CSS, AMP, and inbox previews at Optimize, with AI metered through a workspace credit balance. The docs do not describe how Unlayer branding appears on free-plan exports, so test that path before committing to it.

Verdict

The fastest route to a real email builder inside a React app, and an honest one as long as you read the MIT license as covering the wrapper rather than the editor.

Similar Tools