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

#react #typescript #webdev #opensource

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.