CodeKitHubCara Menggunakan
- Tempel JSON Anda ke kotak input di sebelah kiri (atau klik "Load Example" untuk mencobanya).
- Pilih indentasi 2 spasi atau 4 spasi.
- Klik "Format" untuk merapikan, atau "Minify" untuk mengompresinya menjadi satu baris.
- Jika JSON tidak valid, baca pesan error di bawah kotak untuk menemukan masalahnya.
- Klik "Copy" untuk menyalin hasilnya ke clipboard.
Contoh
Input
{"name":"CodeKitHub","tools":["json","base64"],"free":true}Output
{
"name": "CodeKitHub",
"tools": [
"json",
"base64"
],
"free": true
}Data yang sama, diformat dengan indentasi 2 spasi. Minify melakukan sebaliknya: menghapus semua whitespace.
Apa Itu Alat Ini?
JSON formatter mengambil teks JSON mentah, terminifikasi, atau berantakan dan menulis ulangnya dengan indentasi dan jeda baris yang konsisten sehingga mudah dibaca. JSON (JavaScript Object Notation) adalah format data paling umum yang digunakan API, file konfigurasi, dan sistem log, tapi server biasanya mengirimkannya sebagai satu baris panjang yang sulit dibaca untuk menghemat bandwidth.
Tool ini juga berfungsi sebagai JSON validator: tool ini mem-parse input Anda menggunakan aturan ketat yang sama seperti browser, jadi jika JSON Anda memiliki koma yang hilang, kunci tanpa tanda kutip, atau koma berlebih di akhir, Anda akan melihat pesan error yang tepat alih-alih kegagalan yang diam-diam.
JSON secara resmi didefinisikan oleh dua standar yang selaras, RFC 8259 dan ECMA-404 — dan spesifikasinya sengaja dibuat lebih ketat daripada JavaScript itu sendiri, itulah sebabnya sebuah cuplikan kode yang berjalan lancar sebagai kode JS bisa saja tetap gagal validasi JSON ketat di sini.
Tips praktis
- Sedang men-debug API? Tempel respons mentahnya dulu, format kedua — validator menunjukkan baris dan kolom pasti dari masalah sintaks apa pun, jauh lebih baik dibanding menyipitkan mata pada satu blob satu baris.
- Gunakan indentasi 2 spasi untuk dibaca di layar dan minify sebelum menempelkan JSON ke URL, environment variable, atau pesan chat — di sana whitespace hanya menghabiskan byte.
- Komentar gaya JSON5 dan koma berlebih adalah dua alasan paling umum mengapa konfigurasi tulisan tangan "terlihat baik-baik saja" tapi gagal validasi: JSON ketat tidak mengizinkan keduanya.
- Untuk file yang sangat besar (log, dump database), format hanya bagian yang Anda perlukan — editor Anda tetap responsif dan strukturnya lebih mudah diikuti.
Di mana tool ini digunakan dalam workflow nyata
Alur yang paling sering kami lihat: sebuah API mengembalikan JSON yang dibungkus Base64 atau terminifikasi di dalam token atau payload webhook. Decode Base64 dulu, format JSON kedua, dan diff dua respons ketiga saat sesuatu berubah antar environment. Setiap langkah punya tool khusus di sini, dan payload Anda tidak pernah meninggalkan browser di langkah mana pun.
Developer frontend menggunakan arah minify sama seringnya dengan format: sedang merilis file JSON statis yang besar? Minifikasi biasanya menghemat 20–30% bahkan sebelum gzip mulai bekerja.
Kasus penggunaan umum
- Membaca respons API terminifikasi yang dikembalikan sebagai satu baris yang sulit dibaca, untuk memahami strukturnya saat debugging.
- Memvalidasi file konfigurasi (seperti package.json atau file setting berbasis JSON) yang secara misterius tidak terbaca dengan benar oleh sebuah aplikasi.
- Membagikan potongan JSON yang mudah dibaca dan terformat dalam laporan bug, code review, atau dokumentasi.
- Memperkecil payload JSON ke bentuk terkecilnya sebelum menanamnya di parameter URL atau menyimpannya di kolom database dengan batas ukuran.
Error JSON yang umum dan cara memperbaikinya
Sebagian besar laporan "JSON tidak valid" berasal dari segelintir kesalahan yang sama berulang-ulang. Tabel berikut merangkum yang paling sering muncul saat mengedit file konfigurasi manual atau men-debug hasil salin-tempel dari API.
| Error | Contoh | Cara memperbaiki |
|---|---|---|
| Koma berlebih | {"a": 1, "b": 2,} | Hapus koma setelah item terakhir dalam objek atau array. |
| Tanda kutip tunggal | {'a': 1} | JSON mengharuskan tanda kutip ganda untuk kunci dan nilai string. |
| Kunci tanpa tanda kutip | {a: 1} | Bungkus setiap kunci objek dengan tanda kutip ganda: {"a": 1}. |
| Komentar | { // catatan\n "a": 1 } | JSON ketat tidak punya sintaks komentar — hapus komentar // dan /* */ sebelum validasi. |
| Koma hilang | {"a": 1 "b": 2} | Sisipkan koma di antara setiap pasangan kunci-nilai. |
| NaN / undefined / Infinity | {"a": NaN} | Ini valid di JavaScript tapi tidak valid di JSON — gunakan null atau string sebagai gantinya. |
Mengapa Menggunakannya?
Response dari endpoint Midtrans atau Xendit balik sebagai satu baris panjang di terminal Postman — tempel di sini untuk langsung melihat field mana yang berisi status pembayaran atau kode error.
npm run build tiba-tiba berhenti dengan pesan "Unexpected token in JSON at position 87" pada file konfigurasi — tempel isi file itu untuk melihat persis baris dan kolom yang bikin parser gagal.
Sebelum push payload webhook WhatsApp Business API atau Firebase ke production, minify dulu supaya ukurannya lebih kecil saat dikirim lewat jaringan seluler yang lambat.
Data yang sedang Anda tempel berisi nomor HP pelanggan atau API key internal — semua pemrosesan terjadi di browser sendiri, jadi tidak perlu khawatir data itu ikut terunggah ke server pihak ketiga.
Rekan tim mengirim fixture JSON terminifikasi lewat pull request — format dulu di sini sebelum review supaya diff-nya benar-benar terbaca, bukan satu blok tanpa jeda baris.
Pertanyaan yang Sering Diajukan
Apakah data JSON saya diunggah ke server?
Tidak. Tool ini berjalan sepenuhnya di browser Anda menggunakan JavaScript. JSON Anda tidak pernah meninggalkan perangkat Anda, sehingga aman digunakan untuk data sensitif atau internal.
Mengapa JSON saya tidak valid?
Penyebab paling umum adalah: koma yang hilang atau berlebih, kunci tanpa tanda kutip ganda, tanda kutip tunggal alih-alih tanda kutip ganda, koma berlebih setelah item terakhir, dan komentar (JSON tidak mengizinkan komentar). Pesan error di bawah kotak input memberi tahu apa yang ditemukan parser.
Apa bedanya Format dan Minify?
Format menambahkan indentasi dan jeda baris agar JSON mudah dibaca manusia. Minify menghapus semua whitespace yang tidak perlu agar JSON sekecil mungkin — berguna sebelum mengirimkannya atau menanamnya.
Apakah ada batas ukuran?
Tidak ada batas ketat yang diberlakukan oleh tool ini. File yang sangat besar (puluhan megabyte) mungkin lebih lambat tergantung perangkat Anda, karena semua pemrosesan terjadi secara lokal di browser Anda.
Bisakah ini memperbaiki JSON yang rusak secara otomatis?
Tidak — tool ini memberi tahu Anda persis di mana JSON rusak agar Anda bisa memperbaikinya, tapi tidak menebak atau mengubah data Anda. Ini disengaja: "memperbaiki" data secara diam-diam bisa menyembunyikan bug sungguhan.
Apakah tool ini mendukung JSON5 atau JSONC (komentar, koma berlebih, kunci tanpa tanda kutip)?
Tidak, dan itu disengaja — tool ini memvalidasi dengan aturan ketat RFC 8259, format yang sama persis yang dibutuhkan API dan JSON.parse() Anda. Jika perlu memformat file JSONC seperti tsconfig.json atau settings.json VS Code, hapus dulu komentarnya, karena parser akan melaporkannya sebagai error.
Apa bedanya tool ini dengan sekadar menjalankan JSON.stringify di console browser?
JSON.stringify(JSON.parse(x), null, 2) menghasilkan hasil format yang sama, tapi Anda harus membuka DevTools dulu dan hanya mendapat pesan error generik yang tidak jelas saat inputnya invalid — bukan penunjuk baris dan kolom yang tepat seperti di sini.
Apakah ada batas ukuran file?
Tidak ada batas keras yang diterapkan tool ini sendiri. File yang sangat besar (puluhan megabyte) bisa terasa lebih lambat tergantung spesifikasi perangkat, karena seluruh proses parsing berjalan di browser Anda, bukan di server.
Apakah tool ini bisa dipakai offline atau tanpa koneksi internet?
Bisa. Setelah halaman selesai dimuat, seluruh logika parsing dan format berjalan secara lokal dengan JavaScript — Anda bisa memutus koneksi internet dan tetap bisa memformat JSON seperti biasa.