How to Debug Base64 Images in JSON API Responses

The Problem with Base64 in JSON

Multimodal AI APIs — image generation, OCR, text-to-speech — commonly return media as Base64-encoded strings inside JSON responses. Traditional JSON viewers treat these as plain text, leaving you with walls of encoded characters and no way to see the actual content.

The typical workaround is a multi-step process: locate the Base64 field, copy the string, open a separate decoder website, paste, decode, and download. For a single field that's tedious — for responses with multiple Base64 values, it becomes a real bottleneck.

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 automatically detects Base64-encoded media in your JSON and renders inline previews — images as thumbnails, audio as playable clips, videos as embedded players, and PDFs as document previews.

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 DALL·E / Stable Diffusion output — Image generation APIs often return multiple Base64 variations. ViewJSON lets you see all images side by side to pick the best one without decoding each individually.
• Inspecting OCR crop regions — Batch OCR pipelines return dozens of cropped image regions as Base64. Viewing them inline immediately reveals misaligned or incorrectly cropped areas.
• Comparing TTS voice variations — When testing different voices or speaking styles in speech synthesis APIs, you can play each audio clip directly in the JSON to compare them.
• Reviewing HTTP captures — Paste JSON from Postman or Fiddler request history to see the actual media that was sent or received, instead of scrolling through encoded strings.

Privacy

All processing happens in your browser. Your JSON and Base64 data are never sent to any server, making ViewJSON safe for proprietary API responses and sensitive content.