diff --git a/Gruntfile.js b/Gruntfile.js
index e17c9c36..a1ba0823 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -205,11 +205,11 @@ module.exports = function(grunt) {
         options: {
           patterns: [{
               match: /^(.|[\r\n])*<!--body-main-start-->/,
-              replacement: "",
+              replacement: "{% raw %}",
               description : "Remove everything before body-main-start comment"
             },{
               match: /<!--body-main-end-->(.|[\r\n])*$/,
-              replacement: "",
+              replacement: "{% endraw %}",
               description : "Remove everything after body-main-end comment"
             },{
               match: /([\r\n])  /g,
diff --git a/src/js/controller/PalettesListController.js b/src/js/controller/PalettesListController.js
index af70f656..846e4004 100644
--- a/src/js/controller/PalettesListController.js
+++ b/src/js/controller/PalettesListController.js
@@ -51,7 +51,7 @@
     var palettes = this.paletteService.getPalettes();
 
     var html = palettes.map(function (palette) {
-      return pskl.utils.Template.replace('<option value="${id}">${name}</option>', palette);
+      return pskl.utils.Template.replace('<option value="{{id}}">{{name}}</option>', palette);
     }).join('');
     this.colorPaletteSelect_.innerHTML = html;
   };
diff --git a/src/js/controller/dialogs/BrowseLocalController.js b/src/js/controller/dialogs/BrowseLocalController.js
index adbe1d5f..be559f6d 100644
--- a/src/js/controller/dialogs/BrowseLocalController.js
+++ b/src/js/controller/dialogs/BrowseLocalController.js
@@ -47,7 +47,7 @@
     });
 
     keys.forEach((function (key) {
-      var date = pskl.utils.DateUtils.format(key.date, '${Y}/${M}/${D} ${H}:${m}');
+      var date = pskl.utils.DateUtils.format(key.date, '{{Y}}/{{M}}/{{D}} {{H}}:{{m}}');
       html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date});
     }).bind(this));
 
diff --git a/src/js/controller/settings/ImportController.js b/src/js/controller/settings/ImportController.js
index 1f06ee6a..d144efc9 100644
--- a/src/js/controller/settings/ImportController.js
+++ b/src/js/controller/settings/ImportController.js
@@ -32,7 +32,7 @@
     var previousInfo = pskl.app.backupService.getPreviousPiskelInfo();
     if (previousInfo) {
       var previousSessionTemplate_ = pskl.utils.Template.get('previous-session-info-template');
-      var date = pskl.utils.DateUtils.format(previousInfo.date, '${H}:${m} - ${Y}/${M}/${D}');
+      var date = pskl.utils.DateUtils.format(previousInfo.date, '{{H}}:{{m}} - {{Y}}/{{M}}/{{D}}');
       previousSessionContainer.innerHTML = pskl.utils.Template.replace(previousSessionTemplate_, {
         name : previousInfo.name,
         date : date
diff --git a/src/js/controller/settings/exportimage/GifExportController.js b/src/js/controller/settings/exportimage/GifExportController.js
index 0d697eaf..5c46e69b 100644
--- a/src/js/controller/settings/exportimage/GifExportController.js
+++ b/src/js/controller/settings/exportimage/GifExportController.js
@@ -153,7 +153,7 @@
   // FIXME : JD : HORRIBLE COPY/PASTA (JD later : where???)
   ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
-      var linkTpl = '<a class="image-link" href="${link}" target="_blank">${shortLink}</a>';
+      var linkTpl = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
       var linkHtml = pskl.utils.Template.replace(linkTpl, {
         link : imageUrl,
         shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
diff --git a/src/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js
index 19ace4f0..12ee1268 100644
--- a/src/js/controller/settings/exportimage/PngExportController.js
+++ b/src/js/controller/settings/exportimage/PngExportController.js
@@ -98,7 +98,7 @@
 
   ns.PngExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
-      var linkTpl = '<a class="image-link" href="${link}" target="_blank">${shortLink}</a>';
+      var linkTpl = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
       var linkHtml = pskl.utils.Template.replace(linkTpl, {
         link : imageUrl,
         shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
diff --git a/src/js/devtools/DrawingTestSuiteController.js b/src/js/devtools/DrawingTestSuiteController.js
index 96ad5606..483929bd 100644
--- a/src/js/devtools/DrawingTestSuiteController.js
+++ b/src/js/devtools/DrawingTestSuiteController.js
@@ -21,7 +21,7 @@
 
     var testSuiteStatus = document.createElement('li');
     testSuiteStatus.innerHTML = pskl.utils.Template.replace(
-      '<b>Test Suite [${path}]</b>',
+      '<b>Test Suite [{{path}}]</b>',
       {path : this.shortenPath_(this.suitePath)}
     );
     this.testListElt.appendChild(testSuiteStatus);
@@ -51,7 +51,7 @@
     var testCaseStatus = document.createElement('li');
 
     testCaseStatus.innerHTML = pskl.utils.Template.replace(
-      '[${path}] finished : <b style="color:${color}">${status}</b>',
+      '[{{path}}] finished : <b style="color:{{color}}">{{status}}</b>',
       {path : this.shortenPath_(testPath), status : status ? 'OK' : 'KO', color : status ? 'green' : 'red'}
     );
     this.testListElt.appendChild(testCaseStatus);
@@ -64,7 +64,7 @@
 
     var testSuiteStatus = document.createElement('li');
     testSuiteStatus.innerHTML = pskl.utils.Template.replace(
-      '<b>Test finished : ${status}</b> (${elapsed} seconds)',
+      '<b>Test finished : {{status}}</b> ({{elapsed}} seconds)',
       {status : status, elapsed : elapsed}
     );
     this.testListElt.appendChild(testSuiteStatus);
diff --git a/src/js/service/storage/FileDownloadStorageService.js b/src/js/service/storage/FileDownloadStorageService.js
index 6ee5aea0..87814f1a 100644
--- a/src/js/service/storage/FileDownloadStorageService.js
+++ b/src/js/service/storage/FileDownloadStorageService.js
@@ -10,7 +10,7 @@
 
     pskl.utils.BlobUtils.stringToBlob(serialized, function(blob) {
       var piskelName = piskel.getDescriptor().name;
-      var timestamp = pskl.utils.DateUtils.format(new Date(), '${Y}${M}${D}-${H}${m}${s}');
+      var timestamp = pskl.utils.DateUtils.format(new Date(), '{{Y}}{{M}}{{D}}-{{H}}{{m}}{{s}}');
       var fileName = piskelName + '-' + timestamp + '.piskel';
 
       try {
diff --git a/src/js/utils/Template.js b/src/js/utils/Template.js
index c5b2e413..ade063b3 100644
--- a/src/js/utils/Template.js
+++ b/src/js/utils/Template.js
@@ -49,7 +49,7 @@
               value = '';
             }
           }
-          template = template.replace(new RegExp('\\$\\{' + key + '\\}', 'g'), value);
+          template = template.replace(new RegExp('\\{\\{' + key + '\\}\\}', 'g'), value);
         }
       }
       return template;
diff --git a/src/templates/dialogs/browse-local.html b/src/templates/dialogs/browse-local.html
index b6f80bac..b3582537 100644
--- a/src/templates/dialogs/browse-local.html
+++ b/src/templates/dialogs/browse-local.html
@@ -21,9 +21,9 @@
 
 <script type="text/template" id="local-storage-item-template">
   <tr class="local-piskel-item">
-    <td class="local-piskel-name">${name}</td>
-    <td class="local-piskel-save-date">${date}</td>
-    <td><button type="button" data-action="load" data-name="${name}" class="button button-primary local-piskel-load-button">Load</button></td>
-    <td><button type="button" data-action="delete" data-name="${name}" class="button local-piskel-delete-button">Delete</button></td>
+    <td class="local-piskel-name">{{name}}</td>
+    <td class="local-piskel-save-date">{{date}}</td>
+    <td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
+    <td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
   </tr>
 </script>
\ No newline at end of file
diff --git a/src/templates/dialogs/cheatsheet.html b/src/templates/dialogs/cheatsheet.html
index 6d2191d8..bcbec7a4 100644
--- a/src/templates/dialogs/cheatsheet.html
+++ b/src/templates/dialogs/cheatsheet.html
@@ -41,9 +41,9 @@
 </script>
 
 <script type="text/template" id="cheatsheet-shortcut-template">
-  <li class="cheatsheet-shortcut ${className}" data-shortcut-id="${id}">
-    <div class="cheatsheet-icon ${icon}"></div>
-    <span class="cheatsheet-key" rel="tooltip" data-placement="top" title="${title}">${key}</span>
-    <span class="cheatsheet-description">${description}</span>
+  <li class="cheatsheet-shortcut {{className}}" data-shortcut-id="{{id}}">
+    <div class="cheatsheet-icon {{icon}}"></div>
+    <span class="cheatsheet-key" rel="tooltip" data-placement="top" title="{{title}}">{{key}}</span>
+    <span class="cheatsheet-description">{{description}}</span>
   </li>
 </script>
\ No newline at end of file
diff --git a/src/templates/dialogs/create-palette.html b/src/templates/dialogs/create-palette.html
index cae390df..31f8842c 100644
--- a/src/templates/dialogs/create-palette.html
+++ b/src/templates/dialogs/create-palette.html
@@ -75,10 +75,10 @@
 
 <script type="text/template" id="create-palette-color-template">
   <li
-    class="create-palette-color ${:selected} ${:light-color}"
-    style="background:${color}"
-    data-palette-index="${index}"
-    data-palette-color="${color}">
+    class="create-palette-color {{:selected}} {{:light-color}}"
+    style="background:{{color}}"
+    data-palette-index="{{index}}"
+    data-palette-color="{{color}}">
     <div class="create-palette-remove-color">X</div>
   </li>
 </script>
\ No newline at end of file
diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html
index 5b29661b..e50de90e 100644
--- a/src/templates/drawing-tools.html
+++ b/src/templates/drawing-tools.html
@@ -35,6 +35,6 @@
 
   <!-- Drawing tool icon-button -->
   <script type="text/template" id="drawingTool-item-template">
-    <li rel="tooltip" data-placement="${tooltipposition}" class="${cssclass}" data-tool-id="${toolid}" title="${title}"></li>
+    <li rel="tooltip" data-placement="{{tooltipposition}}" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
   </script>
 </div>
\ No newline at end of file
diff --git a/src/templates/layers-list.html b/src/templates/layers-list.html
index 3bc8a824..36b83856 100644
--- a/src/templates/layers-list.html
+++ b/src/templates/layers-list.html
@@ -34,6 +34,6 @@
   <ul class="layers-list"></ul>
 
   <script type="text/template" id="layer-item-template">
-    <li class="layer-item ${isselected:current-layer-item}" data-layer-index="${layerindex}">${layername}</li>
+    <li class="layer-item {{isselected:current-layer-item}}" data-layer-index="{{layerindex}}">{{layername}}</li>
   </script>
 </div>
diff --git a/src/templates/misc-templates.html b/src/templates/misc-templates.html
index a1c0c829..41fc2c00 100644
--- a/src/templates/misc-templates.html
+++ b/src/templates/misc-templates.html
@@ -1,32 +1,32 @@
 <div style="display:none">
   <script type="text/template" id="progress-bar-template">
     <div class="progress-bar-container">
-      <div class="progress-bar-name">${name}</div>
+      <div class="progress-bar-name">{{name}}</div>
       <div class="progress-bar-item progress-bar"></div>
-      <div class="progress-bar-item progress-bar-status">${status}%</div>
+      <div class="progress-bar-item progress-bar-status">{{status}}%</div>
     </div>
   </script>
 
   <!-- Tooltip container -->
   <script type="text/template" id="tooltip-container-template">
     <div class='tooltip-container'>
-      <div>${helptext} <span class='tooltip-shortcut'>${shortcut}</span></div>
-      ${descriptors}
+      <div>{{helptext}} <span class='tooltip-shortcut'>{{shortcut}}</span></div>
+      {{descriptors}}
     </div>
   </script>
 
   <!-- Tooltip description with modifier -->
   <script type="text/template" id="tooltip-modifier-descriptor-template">
     <div class='tooltip-descriptor'>
-      <span class='tooltip-descriptor-button'>${key}</span>
-      ${description}
+      <span class='tooltip-descriptor-button'>{{key}}</span>
+      {{description}}
     </div>
   </script>
 
   <!-- Simple tooltip description -->
   <script type="text/template" id="tooltip-simple-descriptor-template">
     <div class='tooltip-descriptor'>
-      ${description}
+      {{description}}
     </div>
   </script>
 </div>
\ No newline at end of file
diff --git a/src/templates/palettes-list.html b/src/templates/palettes-list.html
index 02fdde2f..ef7824b1 100644
--- a/src/templates/palettes-list.html
+++ b/src/templates/palettes-list.html
@@ -11,8 +11,8 @@
   </div>
   <div class="palettes-list-colors"></div>
   <script type="text/template" id="palette-color-template">
-    <div class="palettes-list-color" data-color="${color}" data-color-index="${index}" title="${color}">
-      <div data-color="${color}" style="background:${color}"></div>
+    <div class="palettes-list-color" data-color="{{color}}" data-color-index="{{index}}" title="{{color}}">
+      <div data-color="{{color}}" style="background:{{color}}"></div>
     </div>
   </script>
 
diff --git a/src/templates/settings/import.html b/src/templates/settings/import.html
index b23ec91c..87c26877 100644
--- a/src/templates/settings/import.html
+++ b/src/templates/settings/import.html
@@ -45,7 +45,7 @@
 
 <script type="text/template" id="previous-session-info-template">
   <div>
-    Restore a backup of <span style="color:gold">${name}</span>, saved at <span style="color:white">${date}</span> ?
+    Restore a backup of <span style="color:gold">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
     <div style="margin-top:10px;">
       <button type="button" class="button  button-primary restore-session-button">Restore</button>
     </div>