Clone this wiki locally
Mosaico is heavily based on Knockout.js for templating and binding. Knockout architecture was ideal to build a flexible Email Editor without compromising performance.
These are used a lot in the code, so I don't think they will get replaced anytime soon. Some components (like the template parser/converter) have lighter dependencies (it can be run on the server side, too)
- Knockout-jQueryUI KO bridge to widgets
- Knockout-Sortable KO bridge to jQuery sortable
- Mensch - A decent CSS parser
These dependencies could be replaced with others, if you have enough time and determination ;-)
- Tinymce for text editing: We already added a lot of tweaks for TinyMCE "inline", so I don't suggest anyone to try using "Inline CKEditor", but it should be feasible.
- Toastr for on screen notifications: easy to replace.
- Evo-Colorpicker to pick colors: could be replaced, but we liked this more than other colorpickers.
- jQueryUI-Touch-Punch for touch support: if you want to "touch" anything you need this because Mosaico doesn't deal with touch events.
- jQuery-FileUpload (load-image, canvas-to-block...): this could be replaced with a lightweight upload library, but we already had implemented this one when we still supported IE8 and it works fine, so we never decided to move further
- Knockout-Undomanager our own undo/redo library for Knockout: you can remove this if you don't need the undo/redo feature.
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" specifically for the original template and a "block model" for each block defined by the template.
- Grunt for the build
- Bower for the dependencies
- Browserify for the client bundle
- LESS and Autoprefixer for the CSS
- Jasmine for testing (well, we need a lot more tests!!!)
- PhantomJS for the template thumbnails generation process