How to Format and Validate JSON Safely in the Browser
The complete guide to prettifying, validating, repairing, and debugging JSON in production workflows — without leaking sensitive API data to remote servers.
Learn JSON Schema basics — types, required properties, common API contract errors — and how to validate payloads in the browser before you commit or deploy.
By codefunc
Valid JSON is not the same as correct JSON. {"price": "9.99"} parses fine and still breaks billing. JSON Schema gives APIs and config files a shared contract: which fields exist, which types they use, and what "required" means under versioning pressure. Teams that only run syntax checks discover shape bugs in production; teams that validate schema in CI and during local review catch them at the PR boundary.
Bottom line: Use JSON Schema to enforce shape, not just parseability. Declare type, required, and additionalProperties deliberately. Validate sample payloads with a schema validator before merge — syntax-only tools will not save you from wrong types.
API authors, frontend consumers of those APIs, and anyone maintaining JSON config (CI, feature flags, CMS exports). If you already format and syntax-check JSON, this is the next layer.
A JSON Schema is a JSON document describing other JSON documents. Minimal example:
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"$id": "https://example.com/schemas/order.json",
"type": "object",
"required": ["id", "items"],
"properties": {
"id": { "type": "string", "minLength": 1 },
"items": {
"type": "array",
"minItems": 1,
"items": {
"type": "object",
"required": ["sku", "quantity"],
"properties": {
"sku": { "type": "string" },
"quantity": { "type": "integer", "minimum": 1 }
},
"additionalProperties": false
}
},
"note": { "type": "string" }
},
"additionalProperties": false
}
| Keyword | Role |
|---|---|
type |
object, array, string, number, integer, boolean, null |
properties |
Declares object fields |
required |
Lists keys that must be present |
items |
Schema for array elements |
enum / const |
Closed sets of values |
additionalProperties |
Whether unknown keys are allowed |
$ref |
Reuse definitions |
Draft versions (draft-07, 2019-09, 2020-12) differ slightly. Pin $schema and use a validator that matches.
| Check | Question | Tool |
|---|---|---|
| Syntax | Is this parseable JSON? | JSON validator |
| Formatting | Can humans read it? | JSON formatter |
| Schema | Does it match the contract? | JSON Schema validator |
Workflow for a failing webhook:
In JSON Schema, required means the key must exist. It does not automatically forbid null unless you say so.
{
"type": "object",
"required": ["email"],
"properties": {
"email": { "type": "string" }
}
}
| Instance | Result |
|---|---|
{} |
Fail — missing email |
{"email": null} |
Fail — wrong type |
{"email": "a@b.co"} |
Pass |
If your API uses null to clear a field, allow it explicitly:
"email": { "type": ["string", "null"] }
Document the difference between omitted, null, and "" — consumers will otherwise guess wrong.
JSON has no decimal type distinct from number. Still, APIs often send money as strings to preserve precision:
{ "amount": "19.99", "currency": "USD" }
If the schema says "type": "number", string amounts fail validation — correctly. Align schema with serialization policy; do not weaken the schema to match a buggy client without a version bump.
"type": "integer" rejects 1.5. JavaScript consumers that JSON-parse everything as number still need server-side integer checks for IDs and counts.
"type": "boolean" rejects "true". Query strings and form posts often need a separate coercion layer before schema validation of JSON bodies.
{ "roles": { "0": "admin", "1": "editor" } }
This is an object, not an array. Schemas with "type": "array" catch the mistake; open-ended {} typing in TypeScript sometimes does not.
additionalProperties and evolving APIs| Setting | Effect |
|---|---|
omitted / true |
Unknown keys allowed |
false |
Unknown keys rejected |
| schema object | Unknown keys must match that schema |
Strict APIs benefit from "additionalProperties": false on request bodies so typos ("emial") fail loudly. Response schemas are often looser so additive fields do not break old clients — or you version responses explicitly.
Additive change (usually safe for responses): new optional property.
Breaking changes: removing a field, tightening types, making a new field required on requests without a version bump.
number for IDs larger than 2^53-1 — use strings for snowflakes / uint64 IDs.minItems — empty items: [] passes until checkout logic explodes.oneOf without clear errors — validators report opaque mismatches; prefer simpler unions.Local loop:
# Example: ajv-cli in a repo
npx ajv validate -s schemas/order.json -d fixtures/order.ok.json
npx ajv validate -s schemas/order.json -d fixtures/order.bad-type.json
PR checklist:
Browser validators are ideal for quick vendor payload checks and for reviewing a schema change without installing tooling — especially on locked-down machines. Keep production customer data out of any tool you do not trust; codefunc schema tools run client-side in your browser.
$id) per resource version$defs for money, addresses, paginationfixtures/ directorydescription fields on non-obvious propertiesExample pagination fragment:
{
"type": "object",
"required": ["items", "nextCursor"],
"properties": {
"items": { "type": "array" },
"nextCursor": { "type": ["string", "null"] }
},
"additionalProperties": false
}
Syntax validation answers "can we parse this?" Schema validation answers "is this the resource we agreed on?" Put type, required, and additionalProperties decisions in versioned schema files, test them with good and bad fixtures, and run the JSON Schema validator before merging contract changes. Keep JSON formatter and JSON validator in the loop for readability and parse errors — then let the schema catch the rest.
The complete guide to prettifying, validating, repairing, and debugging JSON in production workflows — without leaking sensitive API data to remote servers.
Use JSONPath to extract fields, filter arrays, and inspect nested API payloads — with practical expressions and a browser tester workflow.
How to convert between CSV and JSON safely — quoting, nested objects, type coercion, headers, and a workflow that catches breakage before it hits production.
Find a developer tool