I built a free JSON formatter in a single HTML file (no libraries, no backend)
Title: Tags: 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. The constraints I set for myself One file only. No npm, no bundler, no framework. 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 javascriptfunction highlightJSON(str) { str = str .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 '' + match + ''; } ); } 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 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 Code lives in a public GitHub repo 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 A descriptive None of this required a plugin or a framework. It's all just a few tags in the . What I'd do differently The tool is live here: jameskonzern.github.io If you're thinking of building a micro-tool, the single HTML file constraint is worth trying. It forces simplicity, deploys anywhere for free, and is surprisingly capable.
