diff --git a/edit.html b/edit.html
index 54e07390..8542773c 100644
--- a/edit.html
+++ b/edit.html
@@ -125,7 +125,7 @@
 				display: none;
 			}
 			#sections > div > button:not(:first-of-type) {
-				margin-left: 0.4rem;
+				margin-left: 0.2rem;
 			}
 			.dirty > label::before {
 				content: "*";
@@ -443,6 +443,71 @@
 			}
 		</style>
 		<link id="cm-theme" rel="stylesheet">
+
+		<template data-id="appliesTo">
+			<li>
+				<select name="applies-type" class="applies-type style-contributor">
+					<option value="url" i18n-text="appliesUrlOption"></option>
+					<option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>
+					<option value="domain" i18n-text="appliesDomainOption"></option>
+					<option value="regexp" i18n-text="appliesRegexpOption"></option>
+				</select>
+				<input name="applies-value" class="applies-value style-contributor">
+				<button class="remove-applies-to" i18n-text="appliesRemove"></button>
+				<button class="add-applies-to" i18n-text="appliesAdd"></button>
+			</li>
+		</template>
+		<template data-id="appliesToEverything">
+			<li class="applies-to-everything" i18n-html="appliesToEverything">
+				<button class="add-applies-to" i18n-text="appliesSpecify"></button>
+			</li>
+		</template>
+		<template data-id="section">
+			<div>
+				<label i18n-text="sectionCode"></label>
+				<textarea class="code"></textarea>
+				<br>
+				<div class="applies-to">
+					<label i18n-text="appliesLabel">
+						<img class="applies-to-help" src="help.png" i18n-alt="helpAlt">
+					</label>
+					<ul class="applies-to-list"></ul>
+				</div>
+				<button class="remove-section" i18n-text="sectionRemove"></button>
+				<button class="add-section" i18n-text="sectionAdd"></button>
+				<button class="beautify-section" i18n-text="styleBeautify"></button>
+			</div>
+		</template>
+		<template data-id="find">
+			<span i18n-text="search">: <input type="text" class="CodeMirror-search-field">
+				<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
+			</span>
+		</template>
+		<template data-id="replace">
+			<span i18n-text="replace">: <input type="text" class="CodeMirror-search-field">
+				<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
+			</span>
+		</template>
+		<template data-id="replaceAll">
+			<span i18n-text="replaceAll">: <input type="text" class="CodeMirror-search-field">
+				<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>
+			</span>
+		</template>
+		<template data-id="replaceWith">
+			<span i18n-text="replaceWith">: <input type="text" class="CodeMirror-search-field">
+			</span>
+		</template>
+		<template data-id="replaceConfirm">
+			<span i18n-text="replace">?
+				<button i18n-text="confirmYes"></button>
+				<button i18n-text="confirmNo"></button>
+				<button i18n-text="confirmStop"></button>
+			</span>
+		</template>
+		<template data-id="jumpToLine">
+			<span i18n-text="editGotoLine">: <input class="CodeMirror-jump-field" type="text"></span>
+		</template>
+
 		<script src="storage.js"></script>
 		<script src="messaging.js"></script>
 		<script src="localization.js"></script>
diff --git a/edit.js b/edit.js
index 7ad00314..4dd08fa9 100644
--- a/edit.js
+++ b/edit.js
@@ -10,79 +10,6 @@ var useHistoryBack;   // use browser history back when "back to manage" is click
 var propertyToCss = {urls: "url", urlPrefixes: "url-prefix", domains: "domain", regexps: "regexp"};
 var CssToProperty = {"url": "urls", "url-prefix": "urlPrefixes", "domain": "domains", "regexp": "regexps"};
 
-var template = {
-appliesTo: '\
-	<li>\
-		<select name="applies-type" class="applies-type style-contributor">\
-			<option value="url" i18n-text="appliesUrlOption"></option>\
-			<option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>\
-			<option value="domain" i18n-text="appliesDomainOption"></option>\
-			<option value="regexp" i18n-text="appliesRegexpOption"></option>\
-		</select>\
-		<input name="applies-value" class="applies-value style-contributor">\
-		<button class="remove-applies-to" i18n-text="appliesRemove"></button>\
-		<button class="add-applies-to" i18n-text="appliesAdd"></button>\
-	</li>\
-	',
-appliesToEverything: '\
-	<li class="applies-to-everything" i18n-html="appliesToEverything")>\
-		<button class="add-applies-to" i18n-text="appliesSpecify"></button>\
-	</li>\
-	',
-section: '\
-	<div>\
-		<label i18n-text="sectionCode"></label>\
-		<textarea class="code"></textarea>\
-		<br>\
-		<div class="applies-to">\
-			<label i18n-text="appliesLabel">\
-				&nbsp;<img class="applies-to-help" src="help.png" i18n-alt="helpAlt">\
-			</label>\
-			<ul class="applies-to-list"></ul>\
-		</div>\
-		<button class="remove-section" i18n-text="sectionRemove"></button>\
-		<button class="add-section" i18n-text="sectionAdd"></button>\
-		<button class="beautify-section" i18n-text="styleBeautify"></button>\
-	</div>\
-	',
-find: '\
-	<span i18n-text="search">:&nbsp;\
-		<input type="text" class="CodeMirror-search-field"/>&nbsp;\
-		<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>\
-	</span>\
-	',
-replace: '\
-	<span i18n-text="replace">:&nbsp;\
-		<input type="text" class="CodeMirror-search-field"/>&nbsp;\
-		<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>\
-	</span>\
-	',
-replaceAll: '\
-	<span i18n-text="replaceAll">:&nbsp;\
-		<input type="text" class="CodeMirror-search-field"/>&nbsp;\
-		<span class="CodeMirror-search-hint">(<span i18n-text="searchRegexp"></span>)</span>\
-	</span>\
-	',
-replaceWith: '\
-	<span i18n-text="replaceWith">:&nbsp;\
-		<input type="text" class="CodeMirror-search-field"/>\
-	</span>\
-	',
-replaceConfirm: '\
-	<span i18n-text="replace">?&nbsp;\
-		<button i18n-text="confirmYes"></button>&nbsp;\
-		<button i18n-text="confirmNo"></button>&nbsp;\
-		<button i18n-text="confirmStop"></button>\
-	</span>\
-	',
-jumpToLine: '\
-	<span i18n-text="editGotoLine">:&nbsp;\
-		<input class="CodeMirror-jump-field" type="text"/>\
-	</span>\
-	'
-}
-Object.keys(template).forEach(function(name) { template[name] = tHTML(template[name]); });
-
 // make querySelectorAll enumeration code readable
 ["forEach", "some", "indexOf"].forEach(function(method) {
 	NodeList.prototype[method]= Array.prototype[method];
diff --git a/localization.js b/localization.js
index e758fdc2..23871ab6 100644
--- a/localization.js
+++ b/localization.js
@@ -1,3 +1,4 @@
+var template = {};
 tDocLoader();
 
 function t(key, params) {
@@ -35,6 +36,11 @@ function tNodeList(nodes) {
 		if (node.nodeType != 1) { // not an ELEMENT_NODE
 			continue;
 		}
+		if (node.localName == "template") {
+			tNodeList(node.content.querySelectorAll("*"));
+			template[node.dataset.id] = node.content.firstElementChild;
+			continue;
+		}
 		for (var a = node.attributes.length - 1; a >= 0; a--) {
 			var attr = node.attributes[a];
 			var name = attr.nodeName;
diff --git a/manage.html b/manage.html
index 58da0dec..735b3056 100644
--- a/manage.html
+++ b/manage.html
@@ -46,9 +46,6 @@
 			.applies-to, .actions {
 				padding-left: 15px;
 			}
-			.actions > * {
-				margin-right: 5px;
-			}
 			.applies-to-extra {
 				font-weight: bold;
 			}
@@ -129,6 +126,23 @@
 			}
 
 		</style>
+
+		<template data-id="style">
+			<div>
+				<h2 class="style-name"></h2>
+				<p class="applies-to"></p>
+				<p class="actions">
+					<a class="style-edit-link" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a>
+					<button class="enable" i18n-text="enableStyleLabel"></button>
+					<button class="disable" i18n-text="disableStyleLabel"></button>
+					<button class="delete" i18n-text="deleteStyleLabel"></button>
+					<button class="check-update" i18n-text="checkForUpdate"></button>
+					<button class="update" i18n-text="installUpdate"></button>
+					<span class="update-note"></span>
+				</p>
+			</div>
+		</template>
+
 		<script src="localization.js"></script>
 		<script src="health.js"></script>
 		<script src="storage.js"></script>
diff --git a/manage.js b/manage.js
index 3e67b9d4..2814ba6e 100644
--- a/manage.js
+++ b/manage.js
@@ -1,19 +1,3 @@
-var styleTemplate = tHTML('\
-	<div>\
-		<h2 class="style-name"></h2>\
-		<p class="applies-to"></p>\
-		<p class="actions">\
-			<a class="style-edit-link" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a>\
-			<button class="enable" i18n-text="enableStyleLabel"></button>\
-			<button class="disable" i18n-text="disableStyleLabel"></button>\
-			<button class="delete" i18n-text="deleteStyleLabel"></button>\
-			<button class="check-update" i18n-text="checkForUpdate"></button>\
-			<button class="update" i18n-text="installUpdate"></button>\
-			<span class="update-note"></span>\
-		</p>\
-	</div>\
-');
-
 var lastUpdatedStyleId = null;
 var installed;
 
@@ -44,7 +28,7 @@ function showStyles(styles) {
 }
 
 function createStyleElement(style) {
-	var e = styleTemplate.cloneNode(true);
+	var e = template.style.cloneNode(true);
 	e.setAttribute("class", style.enabled == "true" ? "enabled" : "disabled");
 	e.setAttribute("style-id", style.id);
 	if (style.updateUrl) {
diff --git a/popup.html b/popup.html
index 0c04796b..1ca5579d 100644
--- a/popup.html
+++ b/popup.html
@@ -61,7 +61,7 @@
 				text-decoration: line-through;
 			}
 			#installed .actions a {
-				margin-right: 0.5em;
+				margin-right: 0.2em;
 			}
 			body > .actions {
 				margin-top: 0.5em;
@@ -115,7 +115,7 @@
 			.breadcrumbs > .write-style-link:last-child::before {content: "\200b/"}
 			.breadcrumbs > .write-style-link:last-child:first-child::before,
 			.breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {content: none}
-			
+
 				/* suppress TLD-only link */
 			.breadcrumbs > .write-style-link[subdomain=""] {display: none}
 
@@ -130,6 +130,23 @@
 			}
 		</style>
 
+		<template data-id="style">
+			<div>
+				<div class="left-gutter">
+					<input class="checker" type="checkbox">
+				</div>
+				<div class="main-controls">
+					<label class="style-name"></label>
+					<div class="actions">
+						<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
+						<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
+						<a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>
+						<a href="#" class="delete" i18n-text="deleteStyleLabel"></a>
+					</div>
+				</div>
+			</div>
+		</template>
+
 		<script src="localization.js"></script>
 		<script src="health.js"></script>
 		<script src="storage.js"></script>
diff --git a/popup.js b/popup.js
index 761b25ec..7b02eeda 100644
--- a/popup.js
+++ b/popup.js
@@ -1,20 +1,3 @@
-var styleTemplate = tHTML('\
-	<div>\
-		<div class="left-gutter">\
-			<input class="checker" type="checkbox">\
-		</div>\
-		<div class="main-controls">\
-			<label class="style-name"></label>\
-			<div class="actions">\
-				<a href="#" class="enable" i18n-text="enableStyleLabel"></a>\
-				<a href="#" class="disable" i18n-text="disableStyleLabel"></a>\
-				<a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>\
-				<a href="#" class="delete" i18n-text="deleteStyleLabel"></a>\
-			</div>\
-		</div>\
-	</div>\
-');
-
 var writeStyleTemplate = document.createElement("a");
 writeStyleTemplate.className = "write-style-link";
 
@@ -102,7 +85,7 @@ function showStyles(styles) {
 }
 
 function createStyleElement(style) {
-	var e = styleTemplate.cloneNode(true);
+	var e = template.style.cloneNode(true);
 	var checkbox = e.querySelector(".checker");
 	checkbox.id = "style-" + style.id;
 	checkbox.checked = style.enabled == "true";