Title:
I built a free JSON formatter in a single HTML file (no libraries, no backend)
Tags:
javascript webdev beginners opensource
Content:
I've used a lot of JSON formatters online. Most of them require an account, show aggressive ads, or send your data to a server. So I built one that does none of that — a single HTML file, no dependencies, runs entirely in the browser.
Here's what's inside it and how I built it.
The constraints I set for myself
One file only. No npm, no bundler, no framework.
Zero backend. Everything runs client-side.
No login, no tracking, no data leaves the browser.
Must work on any device without installing anything.
These constraints actually made it easier to build, not harder. When you remove the option of adding dependencies, you stop debating which library to use and just write the code.
Syntax highlighting without a library
This was the part I expected to be painful. It turned out to be a single regex replace:
javascriptfunction highlightJSON(str) {
str = str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>');
return str.replace(
/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?|[{}\[\],:])/g,
function(match) {
let cls = 'j-num';
if (/^"/.test(match)) {
cls = /:$/.test(match) ? 'j-key' : 'j-str';
} else if (/true|false/.test(match)) {
cls = 'j-bool';
} else if (/null/.test(match)) {
cls = 'j-null';
} else if (/[{}\[\],:]/.test(match)) {
cls = 'j-punct';
}
return '<span class="' + cls + '">' + match + '</span>';
}
);
}
It escapes HTML first to prevent XSS, then pattern-matches each token type and wraps it in a span with a CSS class. Keys, strings, numbers, booleans, nulls, and punctuation all get their own color. No library needed.
Live validation as you type
I didn't want to hammer the parser on every keystroke, so I debounced it with a 300ms delay:
javascriptlet liveTimer;
function liveValidate() {
clearTimeout(liveTimer);
liveTimer = setTimeout(() => {
const raw = document.getElementById('input').value.trim();
if (!raw) return;
try {
JSON.parse(raw);
setInputStatus('valid', '✓ Valid JSON');
} catch(e) {
setInputStatus('invalid', '✗ ' + e.message);
}
}, 300);
}
The status bar updates in real time — green dot for valid, red dot with the exact error message for invalid. JSON.parse throws a detailed error by default so you get the line number and description for free.
Deploying for free
The entire thing — hosting, SSL, CDN — costs nothing:
Code lives in a public GitHub repo
Deployed via GitHub Pages, which gives you a free yourusername.github.io URL instantly
SSL is handled automatically by GitHub, zero configuration needed
Go to repo → Settings → Pages → select main branch → save. It goes live in under 2 minutes. No account needed beyond a free GitHub account.
SEO for a tool like this
Since the tool targets developers searching things like "free json formatter no login", I added:
A descriptive