DEV Community

Cover image for I Built an AI-Powered JSON Error Fixer — Here's How It Works
Fenil Panwala
Fenil Panwala

Posted on

I Built an AI-Powered JSON Error Fixer — Here's How It Works

#webdev #tutorial #javascript #opensource

Every developer has seen this error… 

SyntaxError: Unexpected token } in JSON at position 127
Enter fullscreen mode Exit fullscreen mode

And that’s it.

No context.
No hint.
Just vibes.

You end up staring at 200 lines of JSON trying to find one missing comma like it’s a Where’s Waldo puzzle.

😤 The Problem

JSON errors are painfully unhelpful:

  • No line numbers (most of the time)
  • No explanation of what actually went wrong
  • Just a position index that means nothing in real life

So debugging turns into:

“Let me just scroll… scroll… scroll… oh wait… nope… still broken.”

💡 So I built a tool

👉 Paste broken JSON → get it fixed instantly

🔧 https://alljsontools.com/fix-json-error

⚡ What It Does

🧠 Client-side fixes (instant, no API)

Handles most common issues right in the browser:

  • Trailing commas
    {"a": 1,} → {"a": 1}

  • Single quotes
    {'a': 1} → {"a": 1}

  • Unquoted keys
    {name: "John"} → {"name": "John"}

  • JS-style comments
    {"a": 1 // note} → {"a": 1}

  • Invalid values
    undefined, NaN → null

  • Control characters
    Raw newlines → escaped \n

  • Mismatched brackets
    [1, 2, 3} → [1, 2, 3]

🤖 AI fixes (for complex cases)

When regex hits its limits, AI steps in.

You also get a human-readable explanation:

Line 5: Trailing comma before } — JSON doesn't allow commas after the last property. Removed.

⚙️ How It Works (Under the Hood)

The fix pipeline runs step-by-step:

  1. Escape control characters
  2. Strip comments (string-aware, not naive regex)
  3. Convert single → double quotes
  4. Quote unquoted keys
  5. Remove trailing commas
  6. Replace invalid values (undefined, NaN)
  7. Fix bracket mismatches (stack-based)
  8. Quote unquoted values
  9. Attempt JSON.parse()

If it still fails → AI fallback.

🧩 The tricky part: Comment stripping

Naively doing this breaks URLs:

// ❌ This will break https://example.com
text.replace(/\/\/.*$/gm, '')
Enter fullscreen mode Exit fullscreen mode

So I wrote a character-by-character parser that tracks string state:

for (const line of text.split('\n')) {
  let inString = false;
  let escaped = false;
  let commentStart = -1;

  for (let i = 0; i < line.length; i++) {
    if (escaped) {
      escaped = false;
      continue;
    }

    if (line[i] === '\\' && inString) {
      escaped = true;
      continue;
    }

    if (line[i] === '"') {
      inString = !inString;
      continue;
    }

    if (!inString && line[i] === '/' && line[i + 1] === '/') {
      commentStart = i;
      break;
    }
  }

  // Only strip if // is outside a string
}
Enter fullscreen mode Exit fullscreen mode

🤖 AI Fallback Details

  • Max input: 50KB
  • 5 free AI fixes/day
  • Output is validated using JSON.parse()
  • Markdown fences (`json) are stripped automatically

🧰 Tech Stack

  • Next.js 16
  • React 19
  • TypeScript (strict)
  • Monaco Editor (VS Code engine)
  • Web Workers for files >5MB

🧪 Testing

361 unit tests, including:

  • __proto__ pollution prevention
  • ReDoS-safe regex
  • 5MB payload performance
  • AI response parsing

🔗 Try It

Everything is free. No signup.
Core tools work 100% client-side (even offline).

🙌 Feedback?

Would love to hear:

  • Edge cases I might’ve missed
  • Performance issues
  • Weird JSON you've encountered in the wild

💬 Question for you

What’s the weirdest broken JSON you’ve ever debugged?

Top comments (0)