Local JSON workspace

Read raw JSON like it belongs in an IDE

CodePrettify formats raw API responses and local JSON files directly in the browser tab, then adds folding, search, JSONPath, schema validation, diagnostics, table view, comparison, conversion, and export without asking you to paste the payload into a remote formatter.

  • Automatic formatting
  • JSON and JSONC
  • Local processing
  • No account
A formatted JSON API response with folding, syntax highlighting, line numbers, and a minimap in CodePrettify
A dense deployment response becomes a structured document with folding, links, timestamps, and navigation.
Workflow

From response body to useful answer

Formatting is the first step. The rest of the workflow helps you understand what the payload contains, verify it, and take the result into the next tool.

1

Open the JSON

Visit a raw JSON URL, open a local file from the launcher, or use the Windows app. The extension recognizes JSON by URL and HTTP content type.

2

Inspect the structure

Fold nested objects, search values, jump by line, use the minimap, open Document Navigator, or switch an array into Table View.

3

Validate or reuse it

Run a JSONPath query, validate against a pasted schema, compare another payload, convert formats, generate typed code, copy, or export.

Example

The same payload, without the wall of text

CodePrettify preserves the data. It changes the presentation and layers useful tools around the exact document you opened.

Raw response

Hard to scan and harder to debug

A minified response hides the boundary between services, releases, metrics, and incident details.

{"services":[{"id":"svc_api_gateway","status":"healthy","metrics":{"p95LatencyMs":91,"errorRate":0.0008}},{"id":"svc_insights","status":"degraded","metrics":{"p95LatencyMs":144,"errorRate":0.0124}}]}
Prettified view

The hierarchy becomes visible

Indentation, syntax color, folding, and line references make the same values easier to compare.

{
  "services": [
    {
      "id": "svc_api_gateway",
      "status": "healthy",
      "metrics": {
        "p95LatencyMs": 91,
        "errorRate": 0.0008
      }
    }
  ]
}
Hands-on tutorial

Investigate a slow service response from start to finish

Use the deployment payload shown on this page as the scenario: several services report status and latency, and you need to find the unhealthy entry, understand its location, and decide whether the response still follows its contract.

  1. Open the response in Prettified view

    Visit the raw API URL, drag the saved response onto the extension launcher, or open it in the Windows app. Confirm that the top-right view toggle says Prettified. If you opened a local file:// URL directly and nothing happens, use the launcher or enable file URL access for the extension.

  2. Learn the shape before searching values

    Collapse the document, then expand only the root and services array. This tells you whether the response is an object, which top-level sections exist, and where repeated service records begin. For a large document, open Document Navigator and filter its paths instead of scrolling.

  3. Find the symptom in context

    Press Ctrl+F and search for degraded. Move through the result count and inspect the surrounding service name, metrics, and release data. Ordinary search is the fastest choice when you know a value but not its exact JSON path.

  4. Ask a repeatable structural question

    Open More Actions → JSON Path Inspector, enter $.services[*].name, and run the query. The result list should contain one value for every service name. Select a result to connect the extracted value to its source line, then copy either an individual value or the complete result.

  5. Check the response against a small contract

    Open Schema Validator and paste a schema that requires every service to have an owner and a healthy status. Run validation and read each result as path → rule → source line. A useful validator result tells you both what rule failed and where the offending value lives.

    {
      "type": "object",
      "required": ["services"],
      "properties": {
        "services": {
          "type": "array",
          "items": {
            "type": "object",
            "required": ["id", "owner"],
            "properties": {
              "status": { "enum": ["healthy"] }
            }
          }
        }
      }
    }
  6. Switch perspective when the array behaves like a table

    Open Table View for the service array. Search a region or owner, sort the latency column descending, and compare records without repeatedly expanding objects. Return to the structured viewer when you need nested values that do not fit naturally into columns.

  7. Separate real changes from formatting noise

    Copy a second response, open Compare, and choose semantic JSON comparison when key order or whitespace changed. Review additions, removals, and changed values, then copy or export only after you understand which representation—original, formatted, or transformed—you need.

Practice checkpoint

Repeat the workflow with one of your own API responses. You are finished when you can answer these questions without manually reading every line.

  • What is the root type and which arrays contain repeated records?
  • Which source line contains the first degraded status?
  • What does $.services[*].name return?
  • Which schema rule produces each reported violation?
  • Which service has the highest latency in Table View?
  • Which values truly changed between two responses?
Query and validate

Ask targeted questions without uploading the document

JSONPath extracts the values you care about. JSON Schema checks whether the current document follows the contract you expect. Both workflows stay attached to the open source document.

JSON Path Inspector returning the names of three services from a nested JSON document
$.services[*].name returns three matching values with copy and Go to Line actions.
JSON Schema Validator listing six schema violations with JSON paths and line numbers
A local schema flags an environment mismatch, a short array, missing owners, and an unexpected status.
The query and schema stay on your device.

CodePrettify does not fetch remote schema references. Paste the schema you intend to trust, use local # references, and validate the current document in place.

Decision guide

Choose the smallest tool that answers the question

Several tools can inspect JSON, but they solve different problems. Start with the least complex option and move to a structural tool only when the question demands it.

Your questionStart withWhat a useful result looks like
“Where does this text or identifier appear?”Find with Ctrl+FA highlighted value with match count and surrounding fields.
“Give me the same field from every record.”JSON Path InspectorA repeatable path such as $.services[*].name and a list of matched values.
“Does this payload follow our expected contract?”Schema ValidatorZero violations, or precise paths and line numbers for every failed rule.
“Which rows are slow, missing, or out of order?”Table ViewA filtered or sorted array where differences are visible by column.
“What changed between releases?”Semantic CompareChanged data values without whitespace and key-order noise.
“Is the payload unusually deep or structurally suspicious?”Statistics & DiagnosticsDepth, counts, syntax status, duplicate-key warnings, and other structural evidence.

The extension did not activate

Confirm the resource is raw JSON rather than an HTML page, check that JSON is enabled in Settings, and reload. For a local file, use the launcher when direct file URL permission is unavailable.

The query returns no values

Inspect the root shape and spelling first. A document rooted at an array needs a different starting path than an object containing a services property.

Schema results look overwhelming

Begin with one required field or one enum rule, validate, then add constraints gradually. This separates a wrong schema assumption from a genuinely invalid payload.

The formatted result should not replace the source

Formatting changes presentation, not the original response. Choose the original, formatted, converted, or transformed representation explicitly when copying or exporting.

Learning outcome: you should be able to move from “this response is too large to read” to a specific path, source line, validation rule, or changed value—and explain how you found it.

What you can do

A JSON viewer that continues past “pretty print”

Navigate large payloads

  • Fold objects and arrays
  • Search text or regular expressions
  • Jump by line, outline, minimap, or JSON path

Understand the data

  • Syntax and structural diagnostics
  • Statistics, depth, and duplicate-key warnings
  • Timestamp, Base64, JWT, URL, and color helpers

Work with rows

  • Sortable and searchable Table View
  • Per-column filters and column reordering
  • CSV, JSON, and HTML table exports

Compare changes

  • Text or semantic JSON comparison
  • Ignore formatting and key-order noise
  • Jump through real additions and removals

Repair and transform

  • Recover common JSON-like input
  • Build filter, select, rename, sort, and group recipes
  • Keep the original document unchanged

Move to code

  • Generate TypeScript, Pydantic, C#, Java, Go, Rust, and more
  • Convert JSON to YAML, XML, CSV, or TSV
  • Copy, export, or open the result as a document
FAQ

JSON formatter questions

Does CodePrettify upload my JSON?

No. Formatting, search, JSONPath, schema validation, comparison, conversion, and code generation are performed locally by the browser extension or Windows app.

Does it work with API URLs that do not end in .json?

Yes. The extension also recognizes supported response content types, so an API route can activate the JSON viewer without a file extension.

Can it open local JSON files?

Yes. Drag a file onto the extension launcher or use its file picker. That workflow does not require general file:// access.

What about comments and trailing commas?

JSONC is supported separately from strict JSON, including common comment and trailing-comma patterns used by files such as tsconfig.json.

Continue the workflow

Make the next raw response readable

Install CodePrettify, open a JSON response, and keep the complete inspection workflow in the tab where the data already lives.