Repolode
Submit
unlayer

unlayer/react-email-editor

React component that embeds Unlayer's drag-and-drop email builder in a React app, with APIs to load, save and export designs as HTML.

Open-source alternative to:MailchimpStripo

View on GitHubWebsite
Stars
5,246
Forks
803
Open issues
247
Last commit
6 hours ago

What is it?

react-email-editor is the official React wrapper for Unlayer's drag-and-drop email editor. Add the component to a React app and users get a visual email builder without you building one from scratch.

The component exposes a ref to the underlying editor instance, so you can call methods such as loadDesign, saveDesign and exportHtml. Designs are stored as JSON, and exportHtml returns both the design and responsive HTML. Options such as minHeight, style and editor configuration are passed through props, and custom content blocks can be added through Unlayer's custom tools.

The package requires React 16.8 or later and Node 18 or later, and it can be imported directly from Next.js Client Components. Its README lists Gmail, Apple Mail, Outlook and Yahoo! Mail as tested clients.

Key features

  • 01Embeds a drag-and-drop email builder as a single React component.
  • 02Loads and saves email designs as JSON.
  • 03Exports responsive HTML alongside the design data.
  • 04Exposes editor methods and events through a ref and callbacks.
  • 05Supports custom content blocks via custom tools.
  • 06Works in Next.js App Router Client Components without extra dynamic-import workarounds.

Use cases

  • Adding a template builder to a SaaS email marketing product.
  • Letting end users create newsletters or transactional email layouts inside your app.
  • Generating email HTML from stored JSON designs in a back-office workflow.

Quick start

  1. 1

    Install the package from NPM

    npm install react-email-editor --save
  2. 2

    Import EmailEditor and render it with a ref and onReady callback in your React app

Things to know

  • Requires React 16.8 or newer and Node 18 or newer.
  • The editor is client-only and renders into the DOM, so it cannot run on the server.
  • Full editor features and AI Assistant depend on an Unlayer account and configuration.

Topics

#react#email-builder#drag-and-drop#html-email#email-template#react-component#ai-assistant#ai-email#ai-email-assistant#ai-email-builder

FAQ

What is react-email-editor?
React component that embeds Unlayer's drag-and-drop email builder in a React app, with APIs to load, save and export designs as HTML. react-email-editor is the official React wrapper for Unlayer's drag-and-drop email editor. Add the component to a React app and users get a visual email builder without you building one from scratch.
Is react-email-editor free to use? What license does it have?
react-email-editor is open source under the MIT license. Check the license terms before using it in commercial products.
Is react-email-editor still maintained?
Actively maintained. The last commit to react-email-editor was on Oct 21, 2026.
What can I use react-email-editor for?
Adding a template builder to a SaaS email marketing product. Letting end users create newsletters or transactional email layouts inside your app. Generating email HTML from stored JSON designs in a back-office workflow.
How do I install react-email-editor?
Install the package from NPM: npm install react-email-editor --save Import EmailEditor and render it with a ref and onReady callback in your React app
Where can I get react-email-editor?
The source code and installation instructions are on GitHub: https://github.com/unlayer/react-email-editor

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects