Loading page
About this tool
Convert HTML to JavaScript template code and convert JavaScript markup back into clean HTML placeholders.
The HTML JS Converter turns a block of HTML into a JavaScript template literal — escaping backticks, backslashes and ${ so the markup survives, rewriting {{ mustache }} placeholders into ${escapeHtml(variableName)}, and emitting the variable declarations, an escapeHtml helper and the innerHTML mount code alongside it. Run it the other way and it pulls the template literal back out of a const html = `…`, .innerHTML = `…` or return `…` assignment and turns every ${expression} back into a readable {{ placeholder }}. It is for front-end developers moving markup between a static file and generated JS without hand-escaping every character.
Open HTML JS Converter on AltFTool — it loads instantly in your browser.
Choose HTML to JS or JS to HTML, then type into Source code, press Load sample, or Upload code from a .html, .htm, .js, .jsx or .txt file.
Switch the toggles you need — Escape helper, Mount code, Base-path assets, Template variables, Strip script tags — and the output rebuilds as you type.
Read the Generated JS pane with its warnings, press Copy, or Download the file as converted.js — converted.html when running the reverse direction.
Backticks, backslashes and ${ are escaped going into the literal and decoded coming back out, which is exactly the part that breaks when done by hand.
Placeholders are wrapped in a generated escapeHtml helper that encodes &, <, >, " and ', instead of dropping raw values straight into innerHTML.
Strip script tags, add the mount code, route root-relative asset paths through a basePath variable or convert JS comments to HTML notes — each is independently switchable.
Paste it and switch to HTML to JS: the markup is wrapped in a template literal as const html = `…`, with backticks, backslashes and ${ escaped so the string stays valid. You also get the mount snippet that assigns it to document.querySelector("#app").innerHTML.
Each {{ key }} becomes ${escapeHtml(key)} with the key camel-cased into a valid identifier — {{user.name}} turns into ${escapeHtml(userName)} — and a const declaration is generated for every unique placeholder so the output runs as-is. Going the other way, ${escapeHtml(userName)} converts back to {{ user.name }}.
The strip script tags option is on by default, because inline <script> blocks inside a template string are a common source of broken quoting and are re-executed on every innerHTML assignment. Turn the option off if you need them preserved, and the count of removed blocks is reported in the warnings either way.
It looks for the first template literal assigned to a variable named html, markup or template, then for a .innerHTML = `…` assignment, then for a return `…`. If none of those match, the whole input is treated as markup and a warning says so — so wrap the markup in one of those three forms for a clean extraction.
Add the HTML JS Converter widget to your blog or website — free, responsive, no signup. Just keep the “Widget by AltFTool” credit link visible.
<iframe src="https://www.altftool.com/embed/widget/html-js-converter"
title="HTML JS Converter — free AltFTool widget"
width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden"
loading="lazy" referrerpolicy="no-referrer-when-downgrade" allow="clipboard-write"></iframe>
<p style="font-size:12px;margin:4px 0 0">Widget by <a href="https://www.altftool.com/tools/all/html-js-converter?utm_source=embed&utm_medium=widget" rel="nofollow">AltFTool — free online tools</a></p>