JSON विज़ुअलाइज़र

JSON विज़ुअलाइज़र वह टैब है जिसे मैं JSON के लिए हमेशा खुला रखता हूँ। कोई API रिस्पॉन्स, कॉन्फ़िग फ़ाइल, या लॉगर का बिगाड़ा हुआ कुछ भी पेस्ट करो, और यह बता देता है कि वह वैलिड है या नहीं, उसे फ़ॉर्मैट करता है, और आपको उसे एक ट्री की तरह खंगालने देता है।

पहला वर्ज़न मैंने एक दिन में बनाया था, 27 जुलाई 2025 को। तब से यही मेरा डिफ़ॉल्ट JSON टूल है।

पहला दिन

पहला वर्ज़न बस एक एडिटर, एक ट्री और एक स्टेटस बार था। उस दिन का ज़्यादातर वक़्त छोटी-छोटी चीज़ों में गया: फ़ोल्डिंग के लिए VS Code शॉर्टकट्स, ट्री के रंगों को एडिटर थीम से मिलाना, और एक स्टेटस बार जिसमें टाइप करते वक़्त लाइन काउंट और फ़ाइल साइज़ घूमकर अपनी नई वैल्यू पर पहुँचते हैं।

स्टेटस बार आज भी दो में से एक शब्द से शुरू होता है, Valid या Invalid। सबसे पहले मेरी नज़र उसी पर जाती है।

बढ़ता गया

अगले कुछ महीनों में इसमें IndexedDB पर चलने वाला एक फ़ाइल साइडबार, एक फ़ोर्स-डायरेक्टेड ग्राफ़ व्यू, और एनालिटिक्स जुड़ गए। अपने आप में हर एक का मतलब बनता था।

पर सब मिलकर उन्होंने एक फटाफट वाले टूल को ऐसा ऐप बना दिया जिसे सँभालना पड़ता था।

इसे छोटा करना

मार्च 2026 में मैंने वर्कस्पेस दोबारा लिखा और फ़ाइल सिस्टम हटा दिया, साइडबार समेत। अब हर टैब में एक डॉक्यूमेंट रहता है और वह ख़ुद ही सेव हो जाता है, तो रिफ़्रेश करने पर आपका काम कभी नहीं खोता और कुछ भी व्यवस्थित करने की ज़रूरत नहीं पड़ती।

उसी महीने मैंने एनालिटिक्स हटाया और उसकी जगह एक प्राइवेसी पॉलिसी लिखी। जुलाई में ग्राफ़ व्यू भी चला गया। इस ऐप की हिस्ट्री के ज़्यादातर सबसे अच्छे बदलाव डिलीशन हैं।

Unescape

लॉगर्स को डबल एनकोड करना बहुत पसंद है। आप किसी लॉग लाइन से पेलोड कॉपी करते हैं और हाथ आती है बैकस्लैश की एक दीवार:

{\"id\":42,\"name\":\"Ada\",\"roles\":[\"admin\",\"editor\"]}

Unescape उसे वापस ऐसे JSON में बदल देता है जिसे आप फ़ॉर्मैट करके पढ़ सकें। यह JSON में तय सात एस्केप सीक्वेंस पर चलने वाला एक रेगुलर एक्सप्रेशन है:

const JSON_UNESCAPE_PATTERN = /\\([bfnrt"\\])/g;

export function unescapeJsonText(input: string) {
  let replacementCount = 0;

  const value = input.replace(JSON_UNESCAPE_PATTERN, (_, sequence: string) => {
    replacementCount += 1;
    return JSON_UNESCAPE_SEQUENCES[sequence] ?? _;
  });

  return { value, replacementCount };
}

पेलोड से टाइप्स

Generate Types डॉक्यूमेंट पढ़ता है और उसके लिए TypeScript लिख देता है। यह पेलोड:

{
  "id": 42,
  "name": "Ada",
  "roles": ["admin", "editor"],
  "profile": { "city": "London", "verified": true }
}

बन जाता है:

type RootObject = {
  id: number;
  name: string;
  roles: string[];
  profile: Profile;
}

type Profile = {
  city: string;
  verified: boolean;
}

असली मेहनत json-to-ts करता है। मैंने बस इतना जोड़ा कि interface को type में बदल दिया जाए, क्योंकि हाथ से मैं यही लिखता।

Chrome एक्सटेंशन

एक्सटेंशन भी मैंने एक दिन में बनाया, 13 मार्च 2026 को। यह ब्राउज़र में रॉ JSON पेजों की जगह वही एडिटर, ट्री और टाइप जनरेटर दिखाता है, सब एक्सटेंशन के अंदर बंडल किया हुआ। कोई पेज रॉ JSON तब माना जाता है जब वह JSON के तौर पर सर्व हो, या उसकी बॉडी बस एक <pre> हो, और टेक्स्ट सच में पार्स हो जाए।

यह किसी रिस्पॉन्स को वेब ऐप तक भी पहुँचा सकता है। पहला बग एक रेस था: पेज के सुनने से पहले ही एक्सटेंशन पेलोड भेज देता था। इसका हल था एक हैंडशेक। पेज बताता है कि वह तैयार है, और उसके बाद ही डेटा आता है।

अगली दिक़्क़त बड़े रिस्पॉन्स थे, तो अब वे टुकड़ों में स्ट्रीम होकर आते हैं और पहुँचते-पहुँचते फ़ॉर्मैट होते जाते हैं, बजाय एक ही मैसेज में आकर टैब को फ़्रीज़ करने के।

सब कुछ लोकल रहता है

पार्सिंग, वैलिडेशन, ट्री और टाइप जनरेशन, सब आपके ब्राउज़र में चलते हैं। न कोई अकाउंट है, न एनालिटिक्स, और न कोई सर्वर जो कभी आपका JSON देखता हो। यह एक प्रोग्रेसिव वेब ऐप की तरह इंस्टॉल होता है और ऑफ़लाइन भी चलता रहता है।

लगभग एक साल तक एडिटर Monaco था। जून 2026 में मैंने उसकी जगह CodeMirror 6 लगाया, जो आज एडिटर और लिंटर दोनों चलाता है।

JSON विज़ुअलाइज़र खोलें और अगला पेलोड पेस्ट करें जो आपको उलझा दे।