I built a free JSON formatter in a single HTML file (no libraries, no backend)

There's A Website For That — Wed, 29 Apr 2026 04:26:55 +0000

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, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');

  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

and with exact long-tail keywords
FAQ schema markup so Google can pull answers directly into search results
A sitemap.xml submitted to Google Search Console and Bing Webmaster Tools
Open Graph tags so the link looks clean when shared on Slack or Reddit

None of this required a plugin or a framework. It's all just a few tags in the

What I'd do differently
I'd add a shareable URL earlier — something like encoding the JSON in the URL hash so users can share a pre-loaded formatter link. It's a small feature but it gives people a reason to send the link to teammates, which is free distribution.

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.

DEV Community: There's A Website For That

I built a free JSON formatter in a single HTML file (no libraries, no backend)