Edit, validate, compare, query and convert — all in one tool.
{{ ex }}
The CalcSI JSON Editor is a free online tool for editing, validating, comparing, querying and converting JSON data. Switch freely between three views — tree, text and table — and use advanced features like JSON repair, schema validation, diff comparison, JSONPath/JMESPath queries and conversion to YAML, CSV, XML or TypeScript interfaces.
All processing happens entirely in your browser — your data never leaves your device. Ideal for developers, API testers, DevOps engineers, and anyone working with JSON.
Yes. All processing — parsing, validating, comparing, converting, querying — runs entirely in your browser. There is no server round-trip and no logging. You can inspect the source code at any time using your browser's developer tools. Even sensitive data like tokens or PII never leaves your device.
Since RFC 8259 (ECMA-404), JSON is the universal exchange format for structured data on the web. Six types — string, number, boolean, null, object, array — and mandatory UTF-8 are enough to power REST APIs, configurations, logs, telemetry and even databases (BSON, JSONB in PostgreSQL). In daily work, however, you rarely start from an empty file: you receive an 800-line response, want to flip a nested key, rename a property or diff two configs — and a plain text editor is too crude. A JSON editor shows the structure as a tree, validates as you type, understands schema constraints and can extract paths via JSONPath or JMESPath.
This editor combines four modes: Edit (Tree/Text/Table) with JSON repair, format and minify; Compare for side-by-side diff with an add/remove/modify path list; Convert between JSON, YAML, CSV, XML and TypeScript interfaces; Query with JSONPath ($.users[?(@.age > 18)].name) or JMESPath (users[?age > `18`].name). Every mode runs fully in the browser — the engines vanilla-jsoneditor, js-yaml, PapaParse, fast-xml-parser, jmespath and jsonpath-plus are loaded as ESM/UMD bundles, no backend is involved.
Anyone who works with JSON eventually hits JSON Schema (Draft 2020-12). Schemas describe types, required fields, value ranges and formats (email, URI, date). The built-in mini validator covers the most common constraints: type, required, properties, items, minLength, minimum/maximum, enum and format: email. For more complex cases such as oneOf or $ref, run Ajv in your own build pipeline.
Five typical workflows cover 90% of real-world use cases:
Load example, paste your own JSON, then switch between Tree, Text and Table views. Arrows expand nested objects, the status bar shows bytes, lines, keys, nodes and depth.Repair. The editor removes trailing commas, adds missing quotes around keys ({name:"x"} → {"name":"x"}) and replaces single quotes with double quotes — the typical mistakes when pasting from JavaScript source code.JSON Schema section, click Schema example and adjust it. Validate shows either "valid" or a list of concrete errors such as address.zip: minLength 5 with the path.Compare tab, load or paste a file on each side, then click Diff. You see red removed, green added and orange modified — perfect for code reviews, migrations or settings audits.Query tab, paste JSON and run e.g. $.users[?(@.active)].email to fetch every active user's e-mail. The suggested examples are clickable.These concrete scenarios occur daily in real projects:
{"user":{"name":"Anna","age":29}} turns into {"user":{"name":"Anna","age":30,"role":"admin"}} — no bracket counting required.$.products[?(@.price < 50)].name returns every product name below 50 EUR from a catalog as a JSON array.length(users[?active]) counts active users right in the browser — faster than firing up jq for a quick answer.Convert → TypeScript the code interface RootObject { name: string; age: number; roles: string[]; } — copy-paste into your .d.ts file.config.json into Compare and the editor shows + logging.level : "debug" and ~ timeout : 30 → 60 in a path list.Despite all conveniences there are pitfalls. First: number precision. JSON numbers are not type-tagged; JavaScript uses IEEE-754 doubles, which causes rounding at values beyond Number.MAX_SAFE_INTEGER (2^53 − 1). If you process large IDs (Twitter IDs, Snowflake IDs), keep them as strings — otherwise 10765432109876543 silently becomes 10765432109876544. Second: JSON repair limits. The heuristic repair fixes the most common typos but cannot reliably reconstruct mangled strings with unescaped line breaks — for severe damage, re-export from the source system. Third: URL import & CORS. The URL import feature runs a fetch() from your browser. Servers without an Access-Control-Allow-Origin header are blocked; only a proxy or local upload helps. Fourth and security-critical: JSON injection and prototype pollution. If you later merge edited JSON server-side with Object.assign(config, JSON.parse(input)), an attacker can use __proto__ or constructor keys to manipulate the global object prototype. Filter these keys server-side or use Map instead of plain objects. Fifth: privacy. Everything runs locally — but if you use URL import, the target server sees your IP. For sensitive endpoints, paste directly into the browser instead.
$.user.address.zip or JMESPath user.address.zip returns the value directly. For filtered arrays: $.users[?(@.active)].email yields every active user's e-mail.2^53 − 1 (9007199254740991) lose precision. Solution: send large IDs as strings, e.g. "id":"10765432109876543", or use BigInt support on the server.$ and is the de-facto standard. JMESPath is more strictly specified as a draft standard, is used in AWS tooling, and offers functions like length() or sort_by(). Both are supported in the browser — pick the one your ecosystem uses.$ref or oneOf?$ref, oneOf, allOf, if/then/else — use Ajv in a Node build or in the browser with ajv-formats.jq into smaller chunks first.