Skip to content
No description, website, or topics provided.
Branch: 2.x
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
CRM/Mosaico Merge pull request #281 from totten/2.x-img Dec 13, 2018
ang Merge branch 'CIVICRM-886' of… Jun 12, 2018
css Rename CSS/SCSS files to follow a clearer convention Feb 14, 2018
js/tinymce-plugins/civicrmtoken "Insert Token" Dialog - Adapt size to 50%x66% Nov 22, 2017
sass Rename CSS/SCSS files to follow a clearer convention Feb 14, 2018
settings Declare "mosaico_graphics" setting Nov 20, 2018
sql MosaicoTemplate.xml - Add column `msg_tpl_id` Nov 30, 2017
tests Image filtering - Move from mosaico.php to CRM_Mosaico_ImageFilter. A… Nov 21, 2018
xml Revert "Update Mosaico admin form for 5.8" Dec 13, 2018
.gitignore Add dependency "intervention/image" Nov 20, 2018 Update Dec 5, 2017
LICENSE.txt towards extension Jan 7, 2016 SHOR-4: PR feedback - Update testing instructions Jul 19, 2018
composer.lock Add dependency "intervention/image" Nov 20, 2018
gulpfile.js SHOR-42: PR feedback - Update directory structure Jul 11, 2018
info.xml Revert "Update Mosaico admin form for 5.8" Dec 13, 2018
mosaico.civix.php mosaico.civix.php - Update template Nov 14, 2017
mosaico.php Image filtering - Move from mosaico.php to CRM_Mosaico_ImageFilter. A… Nov 21, 2018
package.json SHOR-4: Remove semistandard and lint-staged from node package depende… Jul 11, 2018
phpunit.xml.dist phpunit - Add skeletal code Dec 10, 2016

This extension integrates a responsive email template editor, Mosaico, with CiviCRM.



A CiviCRM extensions folder (In new sites since CiviCRM v4.7.0, this defaults to files/civicrm/ext. For older systems, see the wiki.)

Option 1: Download via Web

The official download URLs for Mosaico and related extensions are published on the Extension Directory. Download the latest releases of these extensions:

  1. Shoreditch Theme
  2. FlexMailer
  3. Mosaico CiviCRM Integration

TIP: downloads are intended for normal installations, and downloads are intended for development. Downloads on and are often the same -- but not always.

Option 2: Download via CLI

This option requires command line tool cv.

To download the current alpha/beta versions of Mosaico and its dependencies, run this one command:

cv dl --dev flexmailer shoreditch mosaico

Alternatively, you can download the latest nightly:

cv dl --dev flexmailer shoreditch
cv dl

TIP: If you're using v4.6.x with backports, then cv dl will require an extra argument: "--filter-ver=4.7.16". This enables it to download the latest extensions intended for v4.7.x (even if they aren't officially compatible with v4.6.x).

Option 3: Download via Git (preferred for development)

This option requires several command-line tools:

Once these are installed, you should:

## Navigate to your extension directory, e.g.
cd sites/default/files/civicrm/ext

## Download the extensions
git clone
git clone
git clone

## Download additional dependencies
./bin/ -D

Getting started (Usage)

If you haven't used Mosaico before, consult the the demo and tutorial materials from

To send a new mailing, simply navigate to "Mailings => New Mailing". The CiviMail-Mosaico UI should appear.

Optionally, you may design reusable templates by navigating to "Mailings => Mosaico Templates".

When composing a new mailing with Mosaico, the screen may be configured as a three-step wizard or as a single-step form. To choose a layout, navigate to "Administer => CiviMail => Mosaico Settings".

If you would like to compose mailings with the old CiviMail screen, navigate to "Mailings => New Mailing (Traditional)".

Having issues with this extension?

Please make sure you have followed installation instructions.

Open issues on github with:

  • screenshot of failure with any possible errors in firebug or js console
  • any related logs or backtrace from civicrm
  • tell us what version of CiviCRM and extension, you using.
  • tell us the browser you are using (name and version) and test at least a second browser to tell us if this happen in both or only one (tell us the details about the second browser too).


The script bin/ handles various build activities:

## Download dependencies
./bin/ -D

## Regenerate DAOs
./bin/ -g

## Build zip archive
./bin/ -z

Styling Changes

We use Gulp and Sass for styling and handle different running tasks. Firstly, you should install node packages using npm package manager:

npm install

Styling changes should go into sass directory and compiled to CSS using the following command:

gulp sass

Once you are done making your changes, please use BackstopJS (see TESTING.MD to check for any possible visual regression issues


When moving CiviCRM to a new domain, you must update the template paths in the CiviCRM database with a MySQL query such as:

UPDATE civicrm_mosaico_template SET metadata = replace(metadata, '', '');

Patching Mosaico

This extensions ships with a patched version of Mosaico. The patches are maintained as a fork in using Twigflow (Rebase).





Whenever a change is merged or pushed to, a bot automatically builds a new zip archive and publishes

The build/publish process has a few properties:

  • It combines, civicrm/mosaico, and any other runtime dependencies into one zip file.
  • The version number is determined by reading info.xml (<version>) and appending the current Unix timestamp.
    • Example: If the version is declared as 1.0.beta1, then it will be published as 1.0.beta1.1478151288.
  • Three files are published:
    • The zip archive
    • The new info.xml file
    • A JSON document describing the build.
  • An alias is provided under the folder latest.

The bot does not publish the new version to To do this, take the new info.xml file and manually upload it. Since provides a directory of past and current versions, be sure to specify the download-URL for a specific version number (e.g. 1.0.beta1.1478151288) rather than an alias (latest).

You can’t perform that action at this time.