TypeScript MIT

easy-email-editor

Easy Email Editor is a feature-rich, top open-source SaaS email editor based on React and MJML.

Z

zalify

Dernière activité 13 août 2026
zalify/easy-email-editor

3,1 k

étoiles

430

forks

30

issues ouvertes

email-builderemail-editoremail-template-editorjavascriptmjml-editorreactreact-email-editor

Ce README est souvent en anglais.

Easy email


The most developer-friendly email editor based on MJML


Using TypeScript


💼 Looking for more features? Check out Easy Email Pro with cross-browser support, responsive design, and premium components.


Introduction

Easy email is developed based on the MJML and has very good compatibility. At the same time, it can generate code through drag-and-drop editing.

Video Overview
Overview

🎮 Live Demo

📧 Free Email Templates

Looking for ready-to-use templates? Check out our free collection of MJML and HTML email templates.

🚀 Getting Started

$ npm install --save easy-email-core easy-email-editor easy-email-extensions react-final-form
import React from 'react';
import { BlockManager, BasicType, AdvancedType } from 'easy-email-core';
import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
import { ExtensionProps, SimpleLayout } from 'easy-email-extensions';

import 'easy-email-editor/lib/style.css';
import 'easy-email-extensions/lib/style.css';
import '@arco-themes/react-easy-email-theme/css/arco.css';

const initialValues = {
  subject: 'Welcome to Easy-email',
  subTitle: 'Nice to meet you!',
  content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
};

export default function App() {

  return (
    <EmailEditorProvider
      data={initialValues}
      height={'calc(100vh - 72px)'}
      autoComplete
      dashed={false}
    >
      {({ values }) => {
        return (
          <SimpleLayout>
            <EmailEditor />
          </SimpleLayout>
        );
      }}
    </EmailEditorProvider>
  );
}

⚙️ Configuration

property Type Description
height string / number Set the height of the container
data interface IEmailTemplate { content: IPage; subject: string; subTitle: string; } Source data
children ( props: FormState,helper: FormApi<IEmailTemplate, Partial>) => React.ReactNode ReactNode
onSubmit Config<IEmailTemplate, Partial>['onSubmit']; Called when the commit is triggered manually
fontList { value: string; label: string; }[]; Default font list.
onUploadImage (data: Blob) => Promise; Triggered when an image is pasted or uploaded

📊 Open Source vs Pro Version

Feature Open Source Version Pro Version
Browser Compatibility Only supports Chrome Compatible with various browsers (uses iframe)
React 19 Support ❌ Not supported ✅ Supported
Responsive Design ❌ Not available ✅ Supports different UI for desktop and mobile
AMP block ❌ Not available ✅ Accordion, Carousel, Form, Product, Reviews, Lucky Wheel
Migration ❌ Not available ✅ Seamless migration from Unlayer templates
Advanced Features Basic features only Unsplash library, File Manager, Block Studio, and many more custom blocks
Technical Support Community support Professional technical support with faster response times

Learn more about Easy Email Pro.

📄 License

The MIT License

Projets similaires

Craft beautiful emails effortlessly with Maily, the powerful email editor that ensures impeccable communication across all major clients.

TypeScriptemail-editornexjtsreact
Aarikchakma
4 k étoiles250

A modern email editor, easily create beautiful and responsive email.

TypeScriptmailmjmlreact
Wwzc520pyfm
248 étoiles17

A free and open-source block-based email template builder.

TypeScriptamazonsesdeveloper-toolsemail
Uusewaypoint
1,8 k étoiles750