Skip to content
J2EEbbesen edited this page Oct 8, 2015 · 11 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 template itself defines what HTML will be present in the resulting email making the library more "future proof". The template author can implement the hacks he wants in the template.

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

Again, the template author defines what blocks are available and how flexible they are: the 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 the block.

Fast

Mosaico, while powerful, does not preclude performance! Editing should be fast and no one likes to wait seconds every time he clicks around or strokes some keys.

Stress proof

We don't like software to ask "are you sure?" because this creates stress: Mosaico don't 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 what editors to show you 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.

Template Language

A language already exists, but we are still making major 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 (e.g: Aviary) by writing a small function in JavaScript.

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. The only other operation we run "server-side" is the "CSS inlining": this could be moved to the client too, but we already had tested code in PHP for that job, so we left this in the backend.

Current Limitations

  • No support for parametrized "conditional comments": your template can use conditional comments (e.g. for Outlook hacks) but you can't let user-defined content/configurations alter their content.
  • 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

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.
Clone this wiki locally