Bago edited this page Jan 6, 2017 · 7 revisions

Welcome to the Mosaico wiki!

What is Mosaico?

Mosaico is the FIRST OpenSource Email Editor. The first library of its kind. Mosaico lets you create Responsive Emails with an easy Drag & Drop interface, editing Images and Contents inline.

What makes Mosaico Great?

Mosaico library doesn't force any HTML

The "master-template" itself defines what HTML will be present in the resulting email making the library more "future proof". The master template author implements the hacks he wants in the resulting output.

Mosaico doesn't define what is editable and what is "styleable"

Again, the master-template author defines which blocks are available and how flexible they are: the master-template defines what are the editable texts, what are the editable images, what styles are available to be changed and what are the variants for each block.


Mosaico, while powerful, does not preclude performance! Editing should be fast and no one likes to wait seconds after each click or key stroke.

Stress proof

We don't like software to ask "are you sure?" because this creates stress: Mosaico will not ask you if you are sure about what you are doing because everything you do is undoable and redoable!

Automatic editors "dependency tracking"

Mosaico automatically tracks which "editing widgets" to show in the toolbox based on the current configuration: let's say you have an option to hide or show a section of a block and you have a button inside that section then Mosaico will automatically show or hide the button style editors when you switch the flag to hide or show that section. No need to write this manually: real magic! :-)

Template Language

A complete language already exists, even if we are looking at making changes to it, in order to make it easy to use for basic cases and flexible enough when needed. Our idea is that any html email template should be adaptable to Mosaico by just adding some attribute in your tags, some special <style> and some special CSS properties: we name this "progressive editability".

Extension / Customization

Image editing is pluggable: we use MoxieManager commercial image editor, but you can plug another plugin by writing a small function in JavaScript (just make sure the library you want to integrate is GPL compatible).

Minimal Backend

We try to do most things on the client, using JavaScript: this way the library is more portable and less dependent on server side technologies. We use PHP as our backend. At this time we use FileUpload PHP backend to upload images or browser uploaded images. There are opensource options for PHP and Python and creating a new backend is a "small task".

Current Limitations

  • Single dropzone and single level block list: You can currently have a single dropzone (named "mainBlocks") and this dropzone will contain a list of blocks.
  • No nested content: you can't drop blocks inside other blocks. This is by design because when you introduce "recursive" nesting you need a lot of selection tools that make the editors more complex. BTW we think a two-level solution could work and maybe a future version will implement it!

Browser Support

Currently supports any modern browser.

  • Google Chrome >= 30
  • Mozilla Firefix >= 20
  • Apple Safari >= 5
  • Internet Explorer >= 10
  • Microsoft Edge >= 11

Best in:

  • Google Chrome >= 40
  • Mozilla Firefix >= 35
  • Apple Safari >= 8
  • Microsoft Edge >= 13

What about older Internet Explorer versions?

In the early stages we tried to make Mosaico compatible with IE8+ but we soon ditched that choice and moved to IE10+

  • We had to add a lot of custom code only to support IE8
  • We had to limit the dependencies to libraries compatible with IE8
  • After working around every issue IE8 was too slow to support Mosaico Editing in a way that we consider "acceptable", also because it is usually installed on slow computers.