Why I stopped pasting API keys into random online converters (so I built a local one)

Sagar Budhwani — Sat, 24 Jan 2026 20:05:35 +0000

The "Paranoia" Problem 🕵️‍♂️

We've all been there. You get a massive JSON response from an API, and you need to type it out for your TypeScript interface.

The lazy (and normal) solution is to Google "JSON to TS", click the first link, and paste your data.

But recently, I paused. I was about to paste a JSON blob containing user emails and a few internal IDs into a random website.

I checked the network tab of that site, and sure enough. it was sending a POST request to their backend. Why? I don't know. Maybe for analytics, maybe to train an AI, or maybe just bad architecture.

But I realized: I don't need a server to parse JSON. My browser can do that.

The Solution: 100% Client-Side 🛡️

I spent the weekend building json2ts.js.org.

It is a simple, no-nonsense tool that does one thing: Converts JSON to TypeScript Interfaces.

But the main feature isn't the conversion - it's the architecture.

✅ Zero Backend: There is no API. If you disconnect your WiFi, the site still works perfectly.
✅ Privacy: Your data never leaves window.localStorage (or purely memory).
✅ Recursive Parsing: It handles nested arrays/objects and generates clean, named interfaces (not just any).

How it works (The Logic) 🧠

I built this using React + Vite. The core logic uses a recursive function to traverse the JSON tree.

If it finds an object, it creates a new Interface name (e.g., RootObject, User, Address). If it finds a primitive, it maps it to string, number, or boolean.

Here is a snippet of the recursive logic:

// Simplified logic
const parse = (obj, name) => {
  if (typeof obj !== "object" || obj === null) return "any";

  const keys = Object.keys(obj);
  let result = `export interface ${name} {\n`;

  keys.forEach((key) => {
    // Recursively check values...
  });

  return result;
};

Why not just use a VS Code Extension? 🔌

I know, I know. "There's an extension for that!"

And I use them too. But sometimes, I'm debugging in Chrome DevTools, or I'm on a different machine, or I just want a quick visual check without polluting my codebase with temporary files.

I wanted a URL I could bookmark that loads instantly and doesn't spy on me.

Roadmap (Zod is coming!) 🗺️

Right now, it just does TypeScript Interfaces.

But since everyone (including me) is moving to Zod for runtime validation, my next goal is to add a toggle:

[ TypeScript Interface | Zod Schema ]

Try it out (Roast my Code) 🧪

I hosted it on the community js.org domain because I want this to be a free utility for everyone.

👉 Live Demo: https://json2ts.js.org/

Let me know if you find any bugs or edge cases where the parser fails! I'm actively fixing them this week.