Editor Visual JSON
Bangun dan sunting JSON secara visual — tambah kunci, ubah tipe, ganti nama bidang — tanpa sintaks mentah.
Masukan JSON
Editor visual
Apa itu Editor Visual JSON?
Editor Visual JSON — Alat yang memungkinkan Anda membangun dan memodifikasi dokumen JSON dengan mengklik tombol dan mengisi kolom — mengganti nama kunci, mengubah tipe nilai, menambahkan properti baru, atau menghapus item — alih-alih menyunting teks mentah secara manual sambil berharap tidak merusak tanda kurung atau lupa koma di suatu tempat. Alat ini berbeda dari editor JSON berbasis teks (seperti editor pada Formatter JSON): setiap kunci memiliki kolom ganti-namanya sendiri, setiap nilai memiliki pemilih tipe yang bisa beralih antara string/number/boolean/null/object/array dan kembali ke nilai bawaan yang wajar untuk tipe tersebut, dan setiap objek atau array memiliki baris "tambah kunci" atau "tambah item" inline. Pratinjau langsung bersifat baca-saja di sisi kanan selalu menampilkan teks JSON persis seperti hasil suntingan visual Anda, sehingga Anda bisa langsung menyalinnya begitu terlihat pas.
Cara menggunakan Editor Visual JSON
- Tempelkan JSON yang sudah ada ke kotak impor di bagian atas dan klik "Muat ke editor" — atau klik "Muat contoh" untuk mulai dari contoh yang sudah disiapkan.
- Sunting pohon di sebelah kiri: ketik pada kolom nilai, gunakan dropdown tipe untuk mengubah tipe nilai, ganti nama kunci dengan menyunting kolom namanya, atau klik ikon tong sampah untuk menghapus kunci/item.
- Gunakan baris "Tambah kunci" / "Tambah item" di bagian bawah setiap objek atau array untuk menyisipkan entri baru.
- Perhatikan pratinjau langsung di sebelah kanan yang diperbarui seketika, lalu salin hasilnya begitu Anda merasa cocok.
Contoh
Mengubah Tipe Sebuah Nilai
Masukan
{"active": "true"}
Keluaran
Alihkan dropdown tipe dari string ke boolean → {"active": true}
Menambahkan Kunci Baru pada Objek
Masukan
{"name": "Ada"}
Keluaran
Tambah kunci "born" (number) → {"name": "Ada", "born": 1815}
Membangun Objek Bersarang dari Nol
Masukan
(editor kosong — mulai dari "Tambah kunci")
Keluaran
Tambah kunci "user" (object), lalu di dalamnya tambahkan "roles" (array) dan dua item string → {"user": {"roles": ["admin", "editor"]}}
Kesalahan umum
- Lupa bahwa mengubah tipe nilai akan meresetnya ke nilai bawaan tipe tersebut — salin dulu nilainya jika Anda masih membutuhkan nilai lama.
- Mencoba mengganti nama kunci menjadi nama yang sudah dipakai kunci lain di objek yang sama — ini diblokir alih-alih menimpa nilai kunci lain secara diam-diam.
- Mengharapkan kotak impor tetap tersinkron dengan suntingan visual Anda — kotak itu hanya benih satu arah "muat ke editor", bukan cermin langsung (gunakan panel pratinjau baca-saja untuk itu).
Mengapa menggunakan alat ini
- Berjalan sepenuhnya di browser Anda — tidak ada dokumen yang Anda bangun atau sunting yang dikirim ke server.
- Menghilangkan seluruh kelas kesalahan penyuntingan manual (trailing comma, kurung tidak cocok, kunci tanpa kutip) karena Anda tidak pernah mengetik sintaks JSON mentah.
- Dropdown tipe memudahkan memperbaiki masalah integrasi API yang umum — sebuah nilai kembali sebagai string "true" atau "42" alih-alih boolean atau angka yang sebenarnya.