Engineering Lab Note #07: The JSON Data-Sovereignty Notebook

In my 14 years of backend engineering, I’ve seen this happen a hundred times: a senior developer copies a massive, nested JSON response from a production API—one containing customer IDs, unreleased feature flags, and internal routing metadata—and pastes it into a "Free JSON Beautifier" because it’s quicker than using a CLI tool.

It’s an accidental, but massive, security leak. That JSON payload is now on someone else's server, in their database, and possibly in their training data. For an enterprise engineering team, this is an unacceptable vulnerability.

When we built the TiltStack JSON Formatter Notebook, we applied our Zero-Server Philosophy to create a tool where your data never leaves the safety of your own browser's memory.

The Problem: It’s More Than Just Whitespace

A simple formatter just adds indentation. An engineering "notebook" should do more: it should help you model your data.

One of the biggest friction points in modern development is taking a raw JSON payload and manually typing it in TypeScript. Manually writing interfaces for 50-field objects is a waste of time, but using an online "JSON to TS" generator just doubles your data exposure.

In the DevSuite, we built a Deterministic TypeScript Interface Generator that runs entirely client-side. It doesn't use an external API; it uses a recursive descent parser that analyzes your local JSON object and generates a valid TS tree.

Dynamic Type Synthesis

The logic for type synthesis is straightforward but rigorous:

1. The Parsing Step: We use native JSON.parse() to convert the string into a JS object.
2. The Deep Inspection: We recursively walk every key, identifying types (String, Number, Boolean, Array, or Object).
3. The Interface Construction: We build the TS interface string, deduplicating nested object types to keep the output clean.

// Local type inference engine
function inferTSType(val: any, name: string = 'Root'): string {
  if (Array.isArray(val)) {
    return `${inferTSType(val[0], name)}[]`;
  }
  if (typeof val === 'object' && val !== null) {
    // Generate a sub-interface and return its name
    // (Logic omitted for brevity)
    return name; 
  }
  return typeof val;
}

By performing this inference locally, we handle 2MB JSON objects in sub-milliseconds, giving you a ready-to-use interface for your codebase without ever opening a network connection.

Persistent Notebooks without a Database

A typical notebook implementation would require a POST /notebooks call to a backend database. We bypassed this by utilizing the Web Storage API (LocalStorage). This allows us to "save" your active payloads and formatting preferences on your machine.

When you return to the JSON Formatter Notebook tomorrow, your payloads will be right where you left them.

// The local-first persistence loop
const saveToLocal = (payload: string) => {
  localStorage.setItem('tiltstack_json_notebook_v1', payload);
};

// On load
const existing = localStorage.getItem('tiltstack_json_notebook_v1');
if (existing) {
  setEditorValue(existing);
}

This architecture means:

1. Total Isolation: Your JSON payloads are stored on your disk.
2. Offline-First: You can work in the air, on a train, or behind a firewall.
3. Zero Liability: TiltStack has no database to breach, so your data is fundamentally un-hackable from our side.

The Engineering Commitment

At TiltStack, we believe architectural decisions are the ultimate form of security. Your data belongs to you. Your metadata belongs to you. We just provide the local-first infrastructure to handle it.

Stop pasting your production data into someone else's cloud. Settle for nothing less than a zero-server sandbox.

Try the JSON Formatter Notebook