JSON Formatter & Validator — Free HTML CSS JS Snippet

Malformed JSON is one of the most common time-sinks in web development — a trailing comma, an unquoted key, or a stray comment breaks an entire config file, and the browser's native error message ("Unexpected token in JSON at position 214") tells you almost nothing about where to look. This snippet builds a real formatter and validator entirely on top of the browser's built-in JSON.parse and JSON.stringify, but adds the missing piece: translating that raw character position into a human-readable line and column number.

Turning a byte offset into a line and column

V8-based engines (Chrome, Edge, Node) append position N to their JSON parse error messages. locateError() extracts that number with a regular expression, slices the original input up to that offset, and counts how many newline characters appear before it — that count plus one is the line number. The column is the offset minus the index of the most recent newline. This is exactly the technique a real IDE's JSON linter uses under the hood, just without a full recursive-descent parser.

Format vs minify are the same operation with a different indent

Both buttons call JSON.parse followed by JSON.stringify(parsed, null, indent). Format passes the currently selected indent width (2, 4, or a literal tab character); minify passes no third argument at all, which tells JSON.stringify to omit whitespace entirely. Round-tripping through parse and stringify also normalizes the input — inconsistent spacing, mixed indentation, and even key ordering (which JSON.stringify preserves as insertion order per the spec) all come out consistent.

Syntax highlighting with one regular expression

Rather than writing a second JSON parser just to colorize tokens, highlight() runs a single regex over the already-valid, already-formatted JSON string that matches strings (including one that is immediately followed by a colon, marking it as a key rather than a value), booleans, null, and numbers including exponents and decimals. Because the string only reaches the highlighter after a successful JSON.parse, the regex never has to handle malformed input — it only needs to distinguish between five well-defined token categories.

Recursively computing key count and max nesting depth

countKeys() walks the parsed value tree recursively: for a plain value it contributes zero, for an object it adds the count of its own keys plus the same recursive count for every value, and for an array it recurses into every element without adding to the key count (arrays have no keys of their own). A shared depthState object is threaded through the recursion so the deepest level reached anywhere in the tree is tracked without a separate traversal.

Why errors and stats are mutually exclusive

The stats row (character count, key count, max depth, root type) only ever renders for JSON that parsed successfully — there's no meaningful key count for a document that failed to parse. The moment format() catches an exception, the stats row and formatted output are cleared and only the error message renders, keeping the UI honest about what state the document is actually in.