Drag and Drop E-mail Editor

screens / live demo here

Installation

# Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

What's included

Props that can be passed to the component:

Prop	Type	Default	Optional	Description
preview	boolean	true	true	show/hide the inbuilt preview button.
showUndoRedo	boolean	true	true	show/hide the inbuilt undo/redo button. You can create your own undoredo functionality with undoredo from api methods below

Editor exposes these api methods

• getHtml - export the design as html content
• getJson - export as json string, this string can then be used with loadJson
• loadJson - load an existing design from json string
• undoredo - undo and redo actions

Usage

• Importing

import Editor from 'dnd-email-editor';

return <Editor />;

• Setup a ref using useRef and pass it to editor

const ref = React.useRef(null);

return <Editor ref={ref} />;

• Using getHtml(), getJson(), loadJson(), undoredo

const logValues = () => {
  if (ref.current) {
    const html = ref.current.getHtml();
    const json = ref.current.getJson();
    console.log(html, json);
  }
};

const loadJson = (json: string) => {
  if (ref.current) {
    ref.current.loadJson(json);
  }
};

const performUndoAction = () => {
  if (ref.current) {
    ref.current.undoActionCallback();

    // to check if undo is possible
    console.log('is undo empty: ', ref.current.isUndoEmpty());
  }
};

const performRedoAction = () => {
  if (ref.current) {
    ref.current.redoActionCallback();

    // to check if redo is possible
    console.log('is redo empty: ', ref.current.isRedoEmpty());
  }
};

• Typescript

Inorder to use typescript and get cool definitions, just pass the type to the ref

import Editor from 'dnd-email-editor';

const ExampleComponent = () => {

- const ref = useRef(null);
+ const ref = useRef<Editor>(null);

  return (
    <Editor ref={ref}/>
  );

}

Purpose

There are soo many drag and drop editors that helps in creating website but not mails, because mails differ a lot from a normal html webpage

• even if there are mail editors available, they are paid and not open-source.

One such example would be unlayer, It claims to be opensource but its not.

• Looking at their source code, they only provide their loader-script and call it as open-source
• later they ask you to pay for its features.

the above reasons and also I was inspired by drag-n-drop editors in general, so I decided to make one.

Features

• Responsive and mobile friendly emails
• Design emails by drag and drop
• Import/Export designs
  • Export/Import as JSON
  • Export as HTML
• Manage Fonts
  • add custom fonts
  • list / add/ deletefonts
• Go back and forth with Undo / Redo
• Preview the design in the browser (Mobile & PC)

Built with

• React
• MJML
• antd

Inspired by

• MailJet
• Unlayer