Skip to content
JSON tools

JSON formatter, validator and JSON to TypeScript

Format, validate, minify, sort keys and generate TypeScript interfaces from your JSON. Everything in your browser: no server upload, no size limit beyond your tab memory.

Input JSON

Output

How to use the formatter

  1. 1

    Paste the JSON

    Paste the payload in the left pane. Works with any valid JSON: API responses, configuration files, database dumps, JSON Lines converted to an array.

  2. 2

    Pick the indent

    2 spaces (the JavaScript ecosystem default), 4 spaces (PEP-8 style, easier to read on big monitors), tab (matches many.editorconfig files). Indent only matters for pretty-print, it has no effect on minify.

  3. 3

    Run an action

    Format for pretty-print, Minify to strip whitespace, Validate for a syntax-only check with stats, Sort keys to get a deterministic canonical output, JSON to TypeScript for type inference.

  4. 4

    Copy or download

    Click Copy to push the output to your system clipboard. Download saves a.json file in your browser download folder. Nothing goes through a server.

Why one more JSON formatter

Operational privacy on the payload. The JSON you paste is parsed, validated and rendered directly in the browser: for anyone working with sensitive payloads (database dumps with customer emails, API responses with session tokens, configs with credentials, B2B request samples) this is non-negotiable. The content stays in tab memory and does not transit through third-party backends.

Error reporting that tells you where to look. When the JSON is malformed, the browser engine returns either a byte offset or a line/column depending on the engine. The tool intercepts the message and reformulates it into a consistent line N, col M indicator that lets you jump straight to the issue in your editor. No more context-free "Unexpected token".

JSON to TypeScript built-in. Converting a JSON payload into a set of TypeScript interfaces is something most developers do dozens of times a week. Inference here is native: the tool recursively walks the structure, detects optional fields (keys present in some array elements but not in others), produces union types for heterogeneous arrays, and names interfaces in PascalCase resolving collisions with numeric suffixes. Output ready to drop into a types.ts file.

How JSON to TypeScript inference works

The algorithm is a recursive walk over the JSON tree, accumulating nominal interfaces in a global dictionary.

  • Primitives (string, number, boolean, null) map 1:1 to the corresponding TypeScript types.
  • Object: each object produces a nominal interface named in PascalCase from the parent key (root: Root). Keys that are not valid JavaScript identifiers (with spaces, dashes, special characters) are quoted in the output.
  • Array: if all elements are objects with compatible shapes, the tool merges the keys and produces a single interface; keys present only in some elements become optional (? suffix). If the elements are heterogeneous, the output is a union (A | B | C)[].
  • Name collisions: if multiple levels share a key (e.g. address inside user and inside billing), the tool appends a numeric suffix (Address2, Address3) to disambiguate.
  • Empty arrays: inferred as unknown[] (preferred over any[] to match TypeScript strict mode 5.x).

Known limitations: the inference does not recognize semantic patterns like ISO 8601 dates or URLs (mapped to string), does not distinguish integer vs float (both number), and does not generate TSDoc comments from samples. For more refined type-aware generation (Date, BigInt, branded types) the right approach is a formal schema (JSON Schema or Zod) as source of truth, not sample-based inference.

Glossary

Technical terms used on this page, briefly explained.

Pretty-print #
Formatting JSON with indentation and newlines, human-readable. The opposite of minify.
Minify #
Removal of all non-significant whitespace (spaces, tabs, newlines between tokens). Typically -20-40% of bytes vs the pretty-printed form.
Canonical JSON #
JSON with object keys sorted alphabetically, deterministic output suitable for diff, hashing and signing. RFC 8785 (JCS) defines a formal standard.
Type inference #
Technique to derive types from one or more samples without an explicit schema. Approximate but pragmatic for bootstrapping TypeScript types.
Optional field #
In TypeScript, a field declared with ? after the name (name?: string) may be absent. Different from name: string | undefined which requires explicit assignment.
Union type #
Type that admits multiple alternatives: string | number, 'a' | 'b' | 'c'. Models heterogeneous arrays and polymorphic parameters.

Frequently asked questions

Can I paste a 10 MB JSON?
Yes, as long as the browser tab has enough memory. JSON.parse() in V8 handles tens of MB comfortably; past 100 MB you should switch to a streaming parser (jq, simdjson) on the CLI. The tool has no rate limit nor size limit imposed: if the browser handles it, the tool processes it.
Does it support JSON5 or JSONC (JSON with comments)?
No, only RFC 8259 strict JSON. JSON5 admits comments, trailing commas, unquoted identifiers: useful for config files but not the standard wire format. Native JSON.parse() rejects both. For JSONC we recommend stripping comments via regex before pasting.
How is the 'depth' stat in the status bar computed?
It is the maximum depth of nested objects/arrays. A flat JSON has depth 1, {a:{b:1}} has depth 2, a tree structure 10 levels deep has depth 10. Useful to spot over-nested GraphQL queries or API responses with bloated shapes.
Does the key sort follow JCS (RFC 8785)?
Mostly: it sorts keys alphabetically as JCS prescribes, but it does not normalize numbers (JCS also requires a canonical number representation: stripping trailing zeros, normalizing exponent, etc.). For strict JCS compliance use a dedicated library (canonicalize on npm). For most use cases plain key sort is enough.
Are the generated TypeScript interfaces production-ready?
Yes, with caveats. Sample-based inference is a starting point, not a formal spec. If your sample is not representative (e.g. the API returns an optional field that your sample does not include), the generated interface will miss that field. Best practice: generate a draft, then refine by hand with optional flags, literal unions (status: 'active' | 'inactive' instead of string), and ISO 8601 dates as string with an inline comment.
Why does the tool flag a string with single quotes as an error?
Because the JSON spec only allows double quotes as string delimiters. {'a':1} is not valid JSON, it is a JavaScript object literal. If your payload comes from JavaScript and uses single quotes, you have to convert it first (e.g. via JSON.stringify(eval('('+s+')')) in a controlled context) before pasting.
Can I use this tool offline (PWA)?
Not as an installable PWA. But once the page loads, the tool works offline: all the JS it needs is already in the browser, no fetch goes back to the server. Bookmark the page and it keeps working through flaky networks or restricted VPNs.
How does it handle very large numbers (BigInt JSON)?
JavaScript JSON.parse does not natively support BigInt: numbers above Number.MAX_SAFE_INTEGER (2^53 - 1) lose precision. If your payload has 64-bit integer IDs (Twitter snowflake, Discord IDs), they usually arrive as strings already from the API; otherwise they silently lose precision. For these cases use a dedicated parser like json-bigint at runtime.
Does it work on mobile?
Yes. Responsive layout with the dual-pane stacked under 1024px. The textarea has vertical auto-resize and scroll on both axes. Keyboard shortcuts (Tab, Shift+Tab) for manual indentation respect the mobile OS behavior.
Is there a REST API to call this tool from a script?
No, and that's by design. The tool runs only in the browser so that the payload does not transit through third-party backends. For scriptable workflows from the terminal: jq (formatter, query, transform), jsonlint (validator), CLI TypeScript generator. If you need a self-hosted integration with a custom frontend, that is one of the projects I tackle as a consultant.

Who builds these tools?

Maurizio Fonte, senior IT consultant with 20+ years in PHP, Laravel, unmanaged Linux infrastructure, applied cybersecurity and AI/LLM integration. Production backends, legacy code modernization, security audits, custom AI agents and MCP servers: the work behind every tool published here.

About Maurizio Fonte