JSON DevTools

Kompletný jednostránkový nástroj na prácu s JSON-om pri vývoji REST API. Bez frameworkov, bez npm, bez build procesu a bez backendu.

Formatter · Tree viewer · Diff · API Request builder · História

---

Ukážky

Formatter — živá validácia a syntax highlighting

Vľavo vstup, vpravo zvýraznený výstup. Chyba vo vstupe sa zobrazí s presným riadkom, stĺpcom a výrezom textu.

Tree viewer — typy, počty položiek, JSONPath

Strom zobrazuje typ každej hodnoty (string, number, boolean, null) a počet položiek objektov/polí ({6}, [5]). Každý uzol sa dá skopírovať ako JSONPath alebo ako konkrétna hodnota.

API Request builder — stav, trvanie, headers, odpoveď

Status, trvanie požiadavky, response headers a automaticky naformátovaná JSON odpoveď. Pri chybe CORS sa zobrazí podrobné vysvetlenie príčiny.

---

Spustenie

Aplikácia je čisto statická — otvorte src/index.html priamo v prehliadači (dvojklikom) a všetko beží lokálne.

Voliteľne cez lokálny server (odporúčané, ak chcete testovať fetch() proti API s CORS z http://localhost):

python -m http.server 8080 --directory src
# potom otvorte http://localhost:8080/

Otvorenie cez file:// funguje, ale prehliadač považuje pôvod stránky za null — časť API (hlavičky, CORS) môže byť obmedzená. Aplikácia v tom prípade zobrazí podrobné vysvetlenie.

---

Štruktúra repozitára

JSONdevTools/
├── src/                          # samotná aplikácia (jediný adresár, ktorý sa publikuje)
│   ├── index.html                # štruktúra UI (5 panelov, ARIA role, modál skratiek)
│   ├── style.css                 # tmavý / svetlý motív, responzívne rozloženie, resizable panely
│   └── app.js                    # celá logika (vanilla ES6+), bez závislostí
├── tests/
│   └── logic.test.js             # Node testy logiky (bez prehliadača)
├── docs/
│   ├── Screenshot-Formatter.png
│   ├── Screenshot-Tree.png
│   └── Screenshot-API-Request.png
├── AGENTS.md                     # projektové pravidlá pre AI agenty
├── LICENSE
└── README.md

---

Nástroje

1. Formatter

• Vloženie JSON textu, načítanie súboru (tlačidlo alebo pretiahnutie myšou)
• Živá validácia s presnou hláškou chyby: riadok, stĺpec, pozícia, výrez textu
• Pretty print (2 medzery) / Minify
• Kopírovanie výsledku, stiahnutie .json súboru
• Syntax highlighting výstupu

2. Tree

• Rozbaľovanie / zbaľovanie uzlov, zobrazenie typov a počtu položiek ({6}, [5])
• Vyhľadávanie v kľúčoch aj hodnotách, zvýraznenie zhôd, automatické rozbavenie rodičov zhôd
• Kopírovanie JSONPath ($.user.roles[1]) a konkrétnej hodnoty uzla
• Ovládanie klávesnicou: ↑/↓ pohyb, →/← rozbaliť/zbaliť, Enter/Space prepnúť, C kopírovať hodnotu, P kopírovať path

3. Diff

• Dva editory vedľa sebe (A = pôvodné, B = nové)
• Rekurzívne porovnanie vnorených objektov a polí
• Rozdiely: pridané / odstránené / zmenené (vrátane zmeny typu) s JSONPath
• Súhrnný počet rozdielov, kopírovanie výsledkov porovnania ako JSON

4. API Request

• Metódy GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
• URL endpointu, query parametre, vlastné HTTP hlavičky
• Autentifikácia: Bearer token alebo Basic (user:heslo)
• JSON request body (s formátovaním / minifikovaním)
• fetch() s 30 s timeoutom, meranie trvania, zobrazenie HTTP statusu
• Response headers, automaticky naformátovaná JSON odpoveď, surový text pri neplatnom JSON
• Detailné vysvetlenie CORS chýb (chýbajúca hlavička, preflight, file://, DNS, proxy) s návrhmi riešenia

5. História

• Posledných 20 JSON dokumentov a 20 API požiadaviek
• Ukladá sa do localStorage
• Vymazanie jednotlivých záznamov aj celej historie
• Citlivé údaje sa neukladajú: hlavička Authorization, Cookie, X-Api-Key sa z záznamu vymaže, tokeny žijú iba v pamäti stránky

---

Klávesové skratky

Skratka	Akcia
Ctrl+Shift+F	Pretty print
Ctrl+Shift+M	Minify
Ctrl+Shift+C	Kopírovať výstup
Ctrl+Shift+O	Otvoriť JSON súbor
Ctrl+S	Stiahnuť JSON súbor
Ctrl+Enter	Odoslať API požiadavku
Ctrl+Shift+D	Prepnuť motív
Ctrl+Shift+K	Focus na vyhľadávanie v strome
Ctrl+Shift+X	Vyčistiť aktuálny editor
1 … 5	Prepnutie nástroja (mimo textových polí)
?	Zoznam skratiek
Esc	Zavrieť okno / zrušiť vyhľadávanie

Na macOS použite Cmd namiesto Ctrl.

---

Príkazy

node tests/logic.test.js   # testy logiky – 93 assertov, bez prehliadača

Testy nepoužívajú žiadny prehliadač ani externé závislosti: app.js sa načíta do izolovaného vm kontextu s minimálnym DOM stubom a overuje sa diff algoritmus, sanitizácia historie, cesty uzlov, syntax highlighting a konzistencia ID medzi HTML a JavaScriptom.

---

Bezpečnosť a súkromie

• Aplikácia je čisto statická — žiadne CDN, žiadne externé závislosti.
• Údaje sa nikam neposielajú, okrem API požiadaviek, ktoré sám spustíte na URL, ktorú zadáte vy.
• Všetko (história, motív, šírky panelov) sa ukladá lokálne v localStorage.
• Pre zapnutie svetlého motívu jednorazovo cez URL: src/index.html?theme=light.