How to Debug Base64 Images in JSON API Responses

The Problem with Base64 in JSON

If you work with multimodal AI APIs like DALL·E image generation, Google Cloud Vision, or Stable Diffusion, you've probably hit this wall: the API returns a massive JSON response, and somewhere buried inside is a field like "b64_json" or "image_data" containing thousands of characters of seemingly random text.

You can't tell what that string actually contains just by looking at it. Is it a valid PNG? A corrupted JPEG? A blank image? The raw Base64 string tells you nothing.

Traditional JSON viewers, whether it's a browser extension, VS Code, or an online formatter, treat every string value the same way: as plain text. They'll format your JSON with perfect indentation, but that 50,000-character Base64 string just sits there, unreadable.

The Manual Decode Workflow (And Why It's Painful)

The typical workflow goes like this:

1. Copy the JSON response from your terminal or API client
2. Paste it into a JSON formatter to find the Base64 field
3. Carefully select and copy just the Base64 string (without the surrounding quotes)
4. Open a separate Base64 decoder website
5. Paste the string, click "Decode", and download the file
6. Open the downloaded file in an image viewer

That's six steps for a single field. If your API response contains multiple Base64 values, say a DALL·E API returning three image variations, or a batch OCR API returning 20 cropped images, you're repeating this process for each one.

What a Typical AI API Response Looks Like

Here's a simplified DALL·E image generation response with multiple image variations:

{
  "created": 1709055842,
  "data": [
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgAAA...",
      "revised_prompt": "A serene mountain landscape at sunset"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgBBB...",
      "revised_prompt": "A serene mountain landscape at sunrise"
    },
    {
      "b64_json": "iVBORw0KGgoAAAANSUhEUgCCC...",
      "revised_prompt": "A serene mountain landscape at noon"
    }
  ]
}

Each "b64_json" field contains a complete PNG image encoded as Base64. In a normal JSON viewer, you'd see three walls of text. You can't view them, compare them, or even confirm they're valid images without decoding each one individually.

A Better Way: Auto-Detect and Preview Inline

ViewJSON takes a different approach. When you paste JSON into the editor, it scans every string value and checks whether it's a Base64-encoded file. If it is, an inline preview appears right next to the value: images render as thumbnails, audio files become playable mini-players, videos get embedded players, and PDFs show a document preview.

This is the workflow in action:

No copying, no pasting into external decoders, no downloading files. You paste once and see everything.

How Does the Detection Work?

ViewJSON doesn't guess based on field names or string length. Instead, it uses magic number detection, the same technique that operating systems use to identify file types.

The process is straightforward:

1. For each string value in your JSON, ViewJSON decodes only the first 64 bytes of the Base64 content
2. It compares those bytes against a library of known file format signatures (magic numbers)
3. If a match is found (e.g., 89 50 4E 47 for PNG, or FF D8 FF for JPEG), it renders the appropriate preview

This approach is fast. Even a 100MB Base64 string is identified in under a millisecond because only the first 64 bytes are decoded for detection. The full content is only decoded when you actually expand the preview.

Supported Formats

ViewJSON currently detects and previews over 15 media formats:

Step-by-Step: Debug Your API Response

1. Open ViewJSON — Go to viewjson.net
2. Paste your JSON — Copy the full API response from your terminal, Postman, or code, and paste it into the editor. Malformed JSON (trailing commas, comments, unquoted keys) is automatically repaired.
3. View the previews — Base64 fields are detected automatically. Click the eye icon (👁) next to any detected media field to toggle its inline preview.
4. Compare outputs — With all previews visible, you can scroll through the JSON to compare multiple images side by side, no extra tools needed.
5. Share with your team — Use the share button to generate a compressed URL containing the JSON structure. Note that very large Base64 payloads may be truncated in the shared link due to URL length limits.

When Is This Most Useful?

• Validating image generation — DALL·E or Stable Diffusion API returns Base64 images. You want to verify they match your prompt before saving to disk.
• Reviewing OCR crops — Batch OCR pipelines return dozens of cropped image regions. Viewing them inline tells you immediately which crops are off.
• Comparing TTS voice outputs — When testing multiple voices or speaking styles, you need to hear each clip quickly to pick the best one.
• Debugging Postman/Fiddler captures — HTTP capture tools save request histories, but Base64 payloads show up as raw strings. Paste the captured JSON into ViewJSON to see the actual media.

Privacy: Everything Stays in Your Browser

Your pasted content never leaves your browser. Not the JSON, not the Base64 data, nothing. The site uses Google Analytics for page-view statistics, but it has zero visibility into what you paste. This makes ViewJSON safe for debugging proprietary API responses, internal test data, or any payload that contains sensitive content.