Vanilla JavaScript Projects

Project 47, Developer tools

JSON Formatter and Validator

Paste messy JSON and get it clean, checked and easy to read. Mistakes point to the exact line, and big files open in a tree you can fold and search.

{}
Parsing
JSON.parse in a Worker
Views
Text and tree
Dependencies
None
Your browser
Checking

JSON tools

How it works

  1. ParseThe text goes to JSON.parse. Big inputs go to a Worker first so typing stays smooth.
  2. Point to the errorIf parsing fails, the error position is turned into a line and column and the line is shown with a marker.
  3. Build the treeObjects and arrays become folding details elements. Children render only when a branch is opened.
try {
  const data = JSON.parse(text);
  output.textContent = JSON.stringify(data, null, 2);
} catch (err) {
  // "Unexpected token } in JSON at position 812" becomes a line and column
  const pos = +(/position (\d+)/.exec(err.message)?.[1] ?? 0);
  const before = text.slice(0, pos).split("\n");
  showError(err.message, before.length, before.at(-1).length + 1);
}
// Large inputs: parse in a worker so the page never freezes
const worker = new Worker(URL.createObjectURL(new Blob([`onmessage = (e) => postMessage(JSON.parse(e.data))`])));