TK TaskKit
Tools Developer

Formatter JSON

Format, minify, validasi, perbaiki, dan urutkan JSON. Query JSONPath, edit tree inline, export CSV, dan permalink yang dapat dibagikan — semua di browser.

Input
Hasil
Paste JSON atau drop file .json.
Format di halaman manapun (bookmarklet)

Drag tombol ini ke bookmark bar kamu. Di halaman manapun, klik untuk mengirim seleksi saat ini (atau teks halaman) ke TaskKit untuk diformat. Link same-origin — tanpa traffic pihak ketiga.

Format JSON

Input tetap di perangkat ini. Setiap tool developer di TaskKit berjalan sepenuhnya di browser kamu. Token, payload, dan teks yang di-paste tidak ditransmisikan ke server TaskKit atau pihak ketiga.

Apa yang dilakukan tool ini

Formatter JSON yang melakukan pretty-print, minify, validasi, perbaikan, dan query JSON di browser kamu. Menunjuk ke baris dan kolom persis dari setiap error sintaks, mendukung drag-and-drop untuk file, mengingat input terakhir kamu di seluruh reload halaman, dan me-render dokumen multi-megabyte tanpa membekukan tab. Semuanya berjalan secara lokal — tanpa round-trip server, tanpa upload.

Di luar formatting, tool menawarkan query JSONPath untuk mengambil nilai dari dokumen, tampilan tree interaktif dengan editing inline, sort-keys untuk diff yang stabil, pass « Repair » untuk JSON-dengan-koma-trailing-dan-komentar yang sebenarnya berisi file config kamu, export CSV untuk array of objects, dan permalink yang meng-encode input kamu ke URL sehingga kamu dapat membagikan tampilan tepat dengan rekan kerja.

Kapan menggunakannya

  • Membaca body respons API yang kembali sebagai satu baris yang di-minify.
  • Membersihkan file config sebelum melakukan commit ke repo.
  • Mengkonfirmasi bahwa payload yang akan kamu POST memang JSON yang valid.
  • Mengambil nilai tunggal dari dokumen yang bersarang dalam dengan ekspresi JSONPath seperti $.users[?(@.role=='admin')].email.
  • Mengekspor array record sebagai CSV untuk spreadsheet.
  • Membagikan payload bermasalah dengan rekan kerja melalui permalink, tanpa paste JSON ke Slack.
  • Mem-diff dua dokumen JSON (sort keys di keduanya, lalu jalankan Pembanding pada output yang ter-format).

Cara kerjanya

Parser strict adalah JSON.parse bawaan browser, yang berarti kepatuhan RFC 8259: tidak ada koma trailing, tidak ada komentar, tidak ada key tanpa quote, tidak ada string dengan apostrof. Saat parsing gagal, kami memetakan posisi dari pesan error native kembali ke baris dan kolom sehingga kamu tidak perlu menghitung kurung dengan tangan. Pretty-printing menggunakan JSON.stringify(value, null, 2) dan minifying menggunakan JSON.stringify(value) — primitif yang sama dengan yang digunakan runtime kamu.

Pass Repair sengaja terpisah: menghapus komentar baris dan blok, menghapus koma trailing, dan menormalkan smart quote menjadi straight quote, lalu menjalankan parser strict pada hasilnya. Tidak mencoba menebak key tanpa quote atau menemukan bracket yang hilang — jika dokumen rusak secara struktural, kamu harus tahu.

Sort keys menelusuri tree secara rekursif dan mengeluarkan ulang setiap object dengan key-nya dalam urutan leksikografis. Array mempertahankan urutannya. Ini adalah trik untuk mendapatkan diff yang stabil antara dua respons API yang berbeda hanya pada urutan key.

Query JSONPath dievaluasi terhadap dokumen yang ter-parse. Nilai yang cocok di-highlight di tampilan tree dan terdaftar di panel hasil. Ekspresi filter (?()), wildcard (*), descent rekursif (..), dan slice array ([start:end]) semuanya didukung.

Edit tree membiarkan kamu mengklik nilai untuk mengubahnya di tempat. Edit diterapkan ke struktur yang ter-parse dan di-serialize ulang kembali ke textarea, sehingga output ter-format dan tree tidak pernah tidak setuju. Status expand/collapse dipertahankan antar render-ulang sehingga kamu tidak kehilangan tempat saat menyimpan edit.

Export CSV meratakan array of objects menjadi baris header plus baris nilai. Field bersarang dapat diakses melalui dot-paths. String yang berisi koma, quote, atau newline di-escape per RFC 4180.

Permalink meng-encode input ke fragment URL dengan base64 + kompresi gaya LZ, sehingga JSON itu sendiri tidak pernah menyentuh server. Fragment muat dengan nyaman di address bar untuk payload tipikal (beberapa KB); dokumen besar tetap lokal dan opsi permalink redup.

Catatan

Mengapa salinan dari respons API gagal di-parse? Browser dan terminal kadang paste smart quote (" dan ") alih-alih straight quote ("). JSON memerlukan straight quote. Parser strict akan menempatkan indikator error pada smart quote pertama, atau pass Repair akan menormalkannya untukmu.

Apakah file besar didukung? Ya. Parser menangani dokumen multi-megabyte dan tampilan tree memvirtualisasi rendering sehingga bahkan array 50 MB tetap dapat di-scroll. Di atas itu, main thread browser dapat sebentar membeku pada langkah parse itu sendiri; pada skala itu, lebih baik gunakan parser streaming seperti stream-json di Node.

Mengapa hasil JSONPath kosong? Ekspresi JSONPath case-sensitive dan harus dimulai dengan $ untuk root. Ekspresi filter membutuhkan @ di depan untuk node saat ini — $.users[?(@.role=='admin')] bukan $.users[?(role=='admin')].

Apakah permalink mengekspos data saya? Tidak. Payload yang ter-encode duduk di fragment URL (bagian setelah #), yang tidak dikirim browser ke server. Jika kamu membagikan permalink, browser penerima men-decode-nya secara lokal; TaskKit tidak pernah melihatnya.

Apakah tool ini melihat data saya? Tidak. Parsing, formatting, evaluasi JSONPath, repair, dan export CSV semuanya terjadi di tab kamu. Tidak ada langkah upload, tidak ada analytics pada konten, dan tidak ada preview yang mengirim teks ke server.

Tools terkait