Skip to content
Stefano Bagnara edited this page Jul 24, 2015 · 8 revisions

Mosaico is heavily based on Knockout.js for templating and binding. Knockout architecture was ideal to build a flexible Email Editor without compromising performance.

Strong Dependencies

  • Knockout
  • jQuery
  • jQuery-UI
  • Knockout-jQueryUI KO bridge to widgets
  • Knockout-Sortable KO bridge to jQuery sortable
  • Knockout-Undomanager our own undo/redo library for Knockout
  • jQuery-FileUpload (load-image, canvas-to-block...)
  • Mensch - A decent CSS parser

Lighter dependencies

  • Tinymce for text editing
  • Toastr for on screen notifications
  • Evo-Colorpicker to pick colors.
  • jQueryUI-Touch-Punch for touch support

Components and Architecture

  • The main "input" for the library is the html template: loading a template means parsing it, creating the "editors" and creating the "editable blocks".
  • So the input template runs through the "Converter" that outputs a "template definition model" and a set of knockout templates that will be used for the wysiwyg editing and for the preview/output generation.
  • The "template definition model" is also processed by the "editors generator" that will generate knockout templates to be used for editing.
  • The "template definition model" is also processed by the "model generator" that generates the "content model" specific for the original template and a "block model" for each block defined by the template.
Clone this wiki locally