DEV Community

Wesley Zhang
Wesley Zhang

Posted on

A Practical JSON “Fix-It” Workflow (and the browser tools I keep open all day)

#webdev #productivity #tooling #api

If you work with APIs, logs, config files, or event payloads, you already know the real JSON pain isn’t “pretty print” — it’s the weird stuff:

  • double-encoded JSON inside strings (hello, escaped quotes)
  • payloads that grew into 8 levels of nesting
  • “what changed?” between two responses
  • “I need a schema… yesterday”
  • “I need a tiny representation for an LLM prompt”

This post is a repeatable workflow you can use every day, using a lightweight in-browser toolbox called NextJSON and a few battle-tested validation tips.

1) Start with the hardest problem: nested / double-encoded JSON

When you see API fields like this:

{
  "user": "{\"name\":\"John\",\"age\":30}",
  "status": "active"
}
Enter fullscreen mode Exit fullscreen mode

…your editor can format it, but it won’t decode the nested JSON string into a real object.

NextJSON’s Nested JSON Parser is built for exactly this: it recursively decodes JSON strings at any depth, so you can instantly see the real structure without manual unescaping.

Where this shows up in real life:

  • logs where JSON is serialized into a string field
  • event buses / queues that wrap payloads multiple times
  • DB records storing JSON blobs as strings

2) Convert JSON to a schema you can actually validate

Once the JSON is readable, the next step is turning “example payload” into a contract.

NextJSON can generate a JSON Schema (draft 2020-12) from a sample JSON document.

Why that’s useful:

  • you can validate incoming requests
  • you can catch breaking changes in upstream APIs
  • you can generate types (depending on your stack)

Example: validate API responses in Node.js with Ajv

  1. Generate the schema in NextJSON (paste a representative payload).
  2. Validate in code: 
import Ajv from "ajv";
import addFormats from "ajv-formats";
import schema from "./payload.schema.json" assert { type: "json" };

const ajv = new Ajv({ allErrors: true, strict: false });
addFormats(ajv);

const validate = ajv.compile(schema);

export function assertValid(payload) {
  const ok = validate(payload);
  if (!ok) {
    throw new Error("Invalid payload:\n" + ajv.errorsText(validate.errors, { separator: "\n" }));
  }
}
Enter fullscreen mode Exit fullscreen mode

Tip: treat the generated schema as a starting point. You’ll usually want to add:

  • required vs optional fields (based on reality, not just one sample)
  • format constraints (email, uri, date-time)
  • additionalProperties: false if you’re strict about contract drift

3) Need mock data fast? Generate JSON from the schema

When you’re writing tests or API docs, you often need a sample object that matches your schema.

NextJSON also supports JSON Schema → JSON (it generates example data based on types and common field names).

Fast workflow:

  • get schema from the producer team (or generate it)
  • generate sample JSON
  • drop it into tests / mocks / docs
  • iterate

4) Debug regressions with JSON Diff (don’t eyeball it)

When a backend deploy ships and your front-end suddenly breaks, the question is:

“What changed between yesterday’s response and today’s response?”

NextJSON’s JSON Diff & Compare highlights added / removed / changed fields and works through nested objects + arrays.

This is especially handy for:

  • comparing staging vs prod payloads
  • verifying “non-breaking change” claims
  • catching subtle array/index changes

5) Minify JSON when you need it inline

Sometimes you need JSON as a single line:

  • env vars
  • query params (careful!)
  • logging compact payloads
  • quickly pasting into tooling that hates whitespace

NextJSON includes a JSON to one line minifier.

6) Bonus: shrink JSON for LLM prompts with TOON

If you’re feeding structured data into an LLM, tokens matter. NextJSON includes a JSON → TOON converter, described as a token-efficient notation for LLM use.

A few TOON design ideas (from the tool’s examples):

  • indentation instead of braces for nesting
  • array lengths like inventory[4]: ...
  • “tabular arrays” for arrays of objects with the same fields

And you can convert back via TOON → JSON (lossless bidirectional conversion per the tool).

When I’d use this:

  • compressing a large JSON context (product catalog, telemetry slice, config) into fewer tokens
  • keeping more structured context inside the model’s window

Privacy note (why I’m okay pasting real payloads)

NextJSON states that processing happens entirely in your browser and that it does not collect/store/transmit the JSON you paste.
(Still: use good judgment with secrets — rotate keys if you ever paste them anywhere.)

My daily JSON workflow cheat sheet

  1. Nested string JSON? → Decode it (recursive)
  2. Need a contract? → JSON → Schema (draft 2020-12)
  3. Need mock payloads? → Schema → JSON
  4. Something broke? → Diff yesterday vs today
  5. Need inline JSON? → Minify to one line
  6. LLM prompt too big? → JSON → TOON (and back if needed)

Top comments (0)