Email editor

Drag & drop email editor built for developer

Try demo Contact us

EmailEditor by Persefone is a drag & drop email editor script in javascript Jquery and php built for developer. You can simply integrate this script in your web project and create custom email template with drag & drop.

Installation and configuration

Server requirements

It's necessary a web server that support php (for example Apache). It can be Windows or linux server. There aren't special libraries to load, just a server with php support. 


Upload all files and folders with FTP software like filezilla in your website and set chmod 777 to "tmp" and "images" folder. 


Exist a config file called "config.php". let it point to the installation folder or leave it blank if it's installed in the root path 

$path = "";

Html and js structure

  • config.php it's the configuration file.
  • save-drop-img.php php file to save in "images" folder the image dropped to image element
  • select.php read elements from "elements" folder and populate the sidebar
  • save_source.php it's file that saves all code without css.
  • save.php it's file that saves all code (html + css) of email created.
  • videotoimg.php return a image with the preview of youtube video
  • media-popup.php list image of "images" folder
  • index.php it's the main file that contain html, javascript and css files.
  • template.html it contains the css style and a tag {body} that will be replaced with the body of created template email

JavaScript Libraries

  • js/jquery.min.js
  • jquery-ui.min.js
  • jquery.ui.touch-punch.min.js
  • bootstrap.min.js
  • tinymce/tinymce.min.js
  • colpick.js

Where are stored the templates and previews saved?

In "tmp" folder. The final template with complete css is saved in files called with "template_" prefix. The only body of email without css is saved in files called with "body_" prefix. 


contains all html template included css


contains all html template except css 

Re-edit the templates stored

It's possible. You can call index.php in this way


where 1451200148.html it's the file name of body contents saved 

Create custom element

You can create a custom element of following type:









image / image+text 


in the "elements" folder there are 6 folders

in every folder there are one or more html files with the blocks to add at the editor.

if you want add a custom element, you must create a new html file with this structure:


Image preview

to set the preview image of element that appear when user click on sidebar menu, you must insert the path of images in preview class div

Html content

The content of block it's in view class div. Every element must stay inside a table. this table has how class "main".

Every element can be one or these type:

  • data-type=“image”
  • data-type=“title”
  • data-type=“line”
  • data-type=“text-block”
  • data-type=“button”
  • data-type="imgtxt"
  • data-type=“imgtxtcol”
  • data-type=“imgtxtincol”
  • data-type=“social-links"
  • data-type=“video”

in this example i have used  data-type="imgtxt"


Upgrade from vs 1 to vs 2

Substitute all files except "tmp" and config.php.
if you have images in "images" folder, please backup and recopy in images folder

Which browsers are compatible with this editor?

Chrome, Safari, Firefox, Opera e Internet Explorer

Examples of template email created with different email clients

... Gmail
... Office 365
... Yahoo

... Outlook 2007
... Outlook 2010
... Outlook 2011
... Outlook 2013

... Aol
... Apple Mail 7
... Apple Mail 8

... Gmail Mobile App
... Android 2.3
... Android 4.2

Example of integration with mail sender software


Contact us
Accetto privacy legge 196/03. Maggiori informazioni sul trattamento dei dati

Developed in Italy by