diff --git a/_includes/head.html b/_includes/head.html
index ec8b47e..a27a560 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -36,7 +36,6 @@
 <script src="/static/js/vue.min.js?{{ site.data['hash'] }}"></script>
 <script src="/static/js/timeago.min.js?{{ site.data['hash'] }}"></script>
 {% endunless %}
-<script src="/static/js/markup.min.js?{{ site.data['hash'] }}"></script>
 <script src="/static/js/webfont.js?{{ site.data['hash'] }}"></script>
 <script src="/static/js/thuhidden.js?{{ site.data['hash'] }}"></script>
 {% if page.legacy %}
diff --git a/_layouts/help.html b/_layouts/help.html
index 3e4122b..acef950 100644
--- a/_layouts/help.html
+++ b/_layouts/help.html
@@ -13,15 +13,6 @@
 </script>
 {% endif %}
 
-<script>
-	window.mirrorId = "{{page.mirrorid}}";
-</script>
-<style>
-	.z-help pre.z-tmpl {
-		display: none;
-	}
-</style>
-
 {% assign help_pages = site.categories["help"] | sort: 'mirrorid' %}
 <div id="help-page">
 	<div class="container">
@@ -56,9 +47,11 @@
 
 	{% include footer.html %}
 </body>
-
-<script src="/static/js/highlight.min.js?{{ site.data['hash'] }}"></script>
-<script src="/static/js/help.js?{{ site.data['hash'] }}"></script>
+<script type="text/x-tuna-help-mirrorid">
+	{{page.mirrorid | jsonify}}
+</script>
+{% capture entry %}{% if page.layout == "helpz" %}helpz{% else %}help{% endif %}{% endcapture %}
+{% include vite_script.html entry=entry %}
 
 </html>
 <!--
diff --git a/_layouts/helpz.html b/_layouts/helpz.html
index 4dffa75..d2ace89 100644
--- a/_layouts/helpz.html
+++ b/_layouts/helpz.html
@@ -2,6 +2,3 @@
 layout: help
 ---
 {{ content }}
-
-<script src="/static/js/mustache.min.js?{{ site.data['hash'] }}"></script>
-<script src="/static/js/zdocs.js?{{ site.data['hash'] }}"></script>
diff --git a/_src/entrypoints/help.js b/_src/entrypoints/help.js
new file mode 100644
index 0000000..0625441
--- /dev/null
+++ b/_src/entrypoints/help.js
@@ -0,0 +1,86 @@
+import {
+	hide_mirrorz as HideMirrorZ,
+	hostname as SiteHostname,
+	mirrorz_help_link as MirrorzHelpLink,
+} from 'virtual:jekyll-config'
+import {options as globalOptions} from 'virtual:jekyll-data'
+import hljs from 'highlight.js';
+import Mark from 'markup-js';
+import {TUNASYNC_JSON_PATH} from '../lib/consts'
+import {mirrorId} from '../lib/mirrorid'
+import '../styles/help.scss'
+
+document.addEventListener('DOMContentLoaded', () => {
+	Array.from(document.querySelectorAll("#help-content table")).map((el) => {
+		el.classList.add("table", "table-bordered", "table-striped");
+	});
+
+	const update_target = (ev) => {
+		const sel = ev.target;
+		const target_selectors = sel.attributes["data-target"].value.split(",");
+		for (const target_selector of target_selectors) {
+			const target = document.querySelector(target_selector);
+			const template_selector = target.attributes["data-template"].value;
+			const select_selectors = target.attributes["data-select"].value.split(",");
+			let url = "/" + mirrorId
+			if (mirrorId.endsWith(".git")) {
+				url = "/git/" + mirrorId
+			}
+			const template_data = {
+				"mirror": SiteHostname + url,
+			};
+			for (const select_selector of select_selectors) {
+				const opt_attrs = document.querySelector(select_selector).querySelector('option:checked').attributes;
+				for(const attr of opt_attrs) {
+					if(attr.name.startsWith("data-")) {
+						template_data[attr.name.slice(5)] = attr.value;
+					}
+				}
+			}
+			// special hack for case-insensitive
+			if ("sudoe" in template_data) {
+				template_data.sudoE = template_data.sudoe;
+			}
+			const template = document.querySelector(template_selector).textContent.trim();
+			const content = Mark.up(
+				template,
+				template_data
+			);
+			target.innerHTML = content;
+			hljs.highlightElement(target);
+		}
+	};
+
+	Array.from(document.querySelectorAll("select.content-select")).map((el) => {
+		el.addEventListener('change', update_target);
+		el.dispatchEvent(new Event('change'));
+	})
+
+	document.getElementById('help-select').addEventListener('change', (ev) => {
+		let help_url = ev.target.querySelector("option:checked").attributes['data-help-url'].value;
+		window.location = `${window.location.protocol}//${window.location.host}${help_url}`;
+	});
+
+	fetch(TUNASYNC_JSON_PATH).then((resp)=>resp.json()).then((statusData) => {
+		// remove help items for disabled/removed mirrors
+		let availableMirrorIds = new Set(statusData.map(x => x.name));
+		globalOptions.unlisted_mirrors.forEach(elem => {
+			availableMirrorIds.add(elem.name)
+		});
+		if (!availableMirrorIds.has(mirrorId)) {
+			if (HideMirrorZ) {
+				location.href = "/404-help-hidden.html"; // this will break 404 issue submission
+			} else {
+				location.href = MirrorzHelpLink + mirrorId; // TODO: convert this to mirrorz cname
+			}
+		}
+
+		Array.from(document.querySelectorAll("option[id^=\"toc-\"],li[id^=\"toc-\"]")).forEach((elem) => {
+			if (elem.id.startsWith("toc-") && !availableMirrorIds.has(elem.id.slice(4))) {
+				elem.remove();
+			}
+		});
+	});
+});
+
+// vim: ts=2 sts=2 sw=2 noexpandtab
diff --git a/_src/entrypoints/helpz.js b/_src/entrypoints/helpz.js
new file mode 100644
index 0000000..e5128df
--- /dev/null
+++ b/_src/entrypoints/helpz.js
@@ -0,0 +1,103 @@
+import './help'
+import hljs from 'highlight.js';
+import {mirrorId} from '../lib/mirrorid'
+import Mustache from 'mustache'
+
+window.addEventListener('DOMContentLoaded', function () {
+
+function generateFormConfig(form) {
+    const formData = Object.fromEntries(new FormData(form).entries());
+    Array.from(  // FormData ignores unchecked checkboxes, workaround
+        form.querySelectorAll('input[type=checkbox]:not(:checked)')
+    ).forEach((elm) => { formData[elm.name] = '' });
+    let conf = {};
+    for (const x in formData) {
+        conf[x] = formData[x];
+        const varConf = GLOBAL_CONFIG.input[x];
+        if (!varConf) continue;
+        let optConf = null;
+        if ('option' in varConf) optConf = varConf.option[formData[x]];
+        else if ('true' in varConf || 'false' in varConf) {
+            optConf = (formData[x] === 'on') ? varConf.true : varConf.false;
+        }
+        if (typeof optConf === 'object') Object.assign(conf, optConf);
+        if (typeof optConf === 'string') conf[x] = optConf;
+    }
+    return conf
+}
+
+function renderCode(tmpl) {
+    // generate mustache config
+    let conf = {
+        path: (mirrorId.endsWith(".git") ? '/git/' : '/') + mirrorId
+    }
+    Array.from(document.querySelectorAll('form.z-global')).forEach((elm) => {
+        Object.assign(conf, generateFormConfig(elm));
+    })
+    conf.scheme = conf._scheme ? 'https' : 'http';
+    conf.host = conf.host.replace(/^https?:\/\//, '');
+    conf.sudo = conf._sudo ? 'sudo ' : '';
+    if (conf.filter && GLOBAL_CONFIG.filter.scheme) {
+        conf.scheme = GLOBAL_CONFIG.filter.scheme;
+    }
+    // find div.z-wrap
+    const div = tmpl.previousElementSibling;
+    // find form.z-form
+    const form = div.querySelector('form.z-form');
+    // find form.z-code
+    var code = div.querySelector('pre.z-code');
+    if (code === null) {
+        code = document.createElement('pre');
+        code.classList.add('z-code');
+        div.appendChild(code);
+    }
+    if (form) Object.assign(conf, generateFormConfig(form));
+    conf.endpoint = conf.scheme + '://' + conf.host + conf.path;
+
+    // render with mustache
+    let rendered = Mustache.render(
+        tmpl.textContent.trim(), conf, {}, { escape: x => x }
+    )
+    try {
+        const lang = tmpl.attributes.getNamedItem('z-lang');
+        if (lang && hljs.getLanguage(lang.value)) {
+            rendered = hljs.highlight(rendered, { language: lang.value }).value;
+        }
+    } catch (err) {
+        console.error(err);
+    }
+    code.innerHTML = rendered;
+}
+
+function renderForm(event) {
+    if (!event || event.currentTarget.classList.contains('z-global')) {
+        Array.from(document.querySelectorAll('.z-help pre.z-tmpl')).forEach(renderCode);
+    }
+    else {
+        renderCode(event.currentTarget.parentElement.nextElementSibling);
+    }
+}
+
+// Load project config
+const GLOBAL_CONFIG = JSON.parse(atob(document.getElementById('z-config').textContent));
+
+// Hide HTTPS selector if filtered
+if (GLOBAL_CONFIG.filter && GLOBAL_CONFIG.filter.scheme) {
+    document.querySelector('input[name="_scheme"]').parentElement.style.display = 'none';
+}
+
+// Render code
+renderForm(null);
+
+const ignoreEventHandler = (event) => event.preventDefault();
+
+for(const form of document.querySelectorAll('form.z-form')) {
+    form.addEventListener('submit', ignoreEventHandler);
+    if(form.classList.contains('z-global')) {
+        form.addEventListener('change', ()=>renderForm(null));
+    }else{
+        form.addEventListener('change', renderForm);
+    }
+}
+
+});
diff --git a/_src/lib/mirrorid.js b/_src/lib/mirrorid.js
new file mode 100644
index 0000000..bb1984a
--- /dev/null
+++ b/_src/lib/mirrorid.js
@@ -0,0 +1 @@
+export const mirrorId = JSON.parse(Array.from(document.getElementsByTagName("script")).filter((script) => script.type === "text/x-tuna-help-mirrorid")[0]?.textContent || "\"\"");
diff --git a/package.json b/package.json
index b5df1ac..9324faa 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,9 @@
   "devDependencies": {
     "@vitejs/plugin-legacy": "^5.3.2",
     "@vitejs/plugin-vue": "^5.0.4",
+    "highlight.js": "^11.9.0",
+    "markup-js": "^1.5.21",
+    "mustache": "^4.2.0",
     "sass": "^1.74.1",
     "terser": "^5.30.3",
     "unplugin-vue-components": "^0.26.0",