Code beautifier langkah demi langkah: format JavaScript, CSS, HTML, dan JSON

Code beautifier gratis di situs ini merapikan indentasi JavaScript, CSS, dan HTML, serta mencetak JSON agar mudah dibaca, semuanya di browser. Panduan ini menjelaskan apa yang diharapkan untuk setiap jenis input, apa yang harus dilakukan saat hasilnya terlihat salah, dan kapan menggunakan alat lain.

Last reviewed: 2026-07-02

freetoolonline.com Editorial Team

Memformat JavaScript

Tempel potongan JavaScript - satu baris yang diminifikasi, sebuah fungsi yang disalin, atau seluruh file - lalu klik Format. Alat ini memuat salinan self-hosted dari pustaka open-source js-beautify dan memanggil formatter JavaScript-nya, yang merapikan kurung kurawal dan kurung biasa yang bertumpuk dan menempatkan setiap statement pada baris tersendiri. Menempel function add(a,b){return a+b;} mengembalikan fungsi yang sama tersebar di beberapa baris dengan isi diindentasi di dalam kurung kurawal. Formatter hanya mengubah spasi - tidak mengganti nama variabel, tidak menyusun ulang statement, dan tidak mengubah perilaku kode.

Memformat CSS

CSS terdeteksi ketika input terlihat seperti satu atau lebih blok selector { properti: nilai; } tanpa token khusus JavaScript (tidak ada function, tidak ada =>, tidak ada var, let, atau const, tidak ada kurung biasa). Menempel aturan yang diminifikasi seperti .card{margin:0;padding:8px;border-radius:4px} mengembalikan aturan dengan setiap properti pada baris tersendiri yang diindentasi di dalam kurung kurawal. Jika potongan CSS mencampur token yang mirip JavaScript, detektor bisa mengklasifikasikannya sebagai JavaScript - tempel CSS sendiri, tanpa tag script di sekitarnya, agar deteksi tetap dapat diandalkan.

Memformat HTML

Input yang dimulai dengan < diperlakukan sebagai HTML. Potongan satu baris seperti <div><p>hi</p></div> kembali dengan setiap tag pada baris tersendiri dan elemen anak diindentasi satu level lebih dalam dari induknya. Ini berguna untuk HTML yang disalin dengan perintah "Copy outerHTML" browser, yang biasanya datang dalam satu baris yang sulit dibaca. Formatter HTML bergantung pada formatter JavaScript dan CSS dari mesin yang sama untuk memuat lebih dulu (untuk blok <script> atau <style> apa pun di dalam markup), yang dimuat secara otomatis oleh alat ini sebelum berjalan.

Memformat JSON

JSON diperiksa sebelum semua yang di atas: jika input dimulai dengan {, [, tanda kutip, angka, atau salah satu dari true, false, null, alat ini mem-parsing-nya dan mencetaknya kembali dengan JSON.stringify(value, null, 2) - indentasi dua spasi, satu properti per baris. Ini adalah parsing sungguhan, bukan tebakan berbasis teks, sehingga payload yang tidak valid terdeteksi: menempel {"a":1, (koma di akhir tanpa apa pun setelahnya) mengembalikan pesan yang dimulai dengan Invalid JSON: bukan hasil yang diformat. Perbaiki error yang dilaporkan lalu tempel lagi.

Saat hasilnya terlihat salah

Dua hal bisa salah. Pertama, deteksi bahasa bisa meleset - ini adalah heuristik berdasarkan bentuk teks, bukan parser lengkap untuk setiap bahasa, sehingga bahasa yang tidak dibuat untuk alat ini (Python, Java, Go, dan sejenisnya) tetap diproses melalui formatter JavaScript, dan hasilnya mungkin tidak terlihat benar. Kedua, khusus untuk JSON, error parsing berarti alat ini tidak bisa memformat apa pun sampai JSON-nya valid - tempel lagi setelah memperbaiki error yang dilaporkan pesan tersebut. Kedua kasus tidak merusak input Anda: panel kiri tetap menyimpan persis apa yang Anda tempel, jadi Anda selalu bisa mencoba lagi.

Code beautifier vs JSON Parser

Kedua alat bisa mencetak JSON agar mudah dibaca, jadi berguna untuk tahu kapan menggunakan yang mana. Code beautifier adalah pilihan yang tepat untuk JavaScript, CSS, atau HTML, dan mencetak JSON juga sebagai efek samping. JSON Parser adalah pilihan yang tepat ketika Anda secara khusus perlu memvalidasi payload dengan deteksi error, menjelajahi hasil sebagai pohon yang bisa diperluas, atau memeriksa tipe dan indeks array dari field tertentu - alat itu dibuat khusus untuk JSON dan menampilkan lebih banyak tentang struktur dibanding cetakan terindentasi biasa.

Referensi cepat

Input dimulai dengan	Terdeteksi sebagai	Mesin yang dipakai
{, [, tanda kutip, angka, atau true/false/null	JSON	JSON.stringify(value, null, 2)
<	HTML	html_beautify (js-beautify)
Blok aturan, misalnya selector { properti: nilai; }	CSS	css_beautify (js-beautify)
Semua kasus lainnya	JavaScript	js_beautify (js-beautify)

Privasi

Pemformatan berjalan sepenuhnya di tab browser ini. Kode yang ditempel tidak pernah diunggah, dikirim ke layanan analitik, atau ditulis ke server mana pun - kode hanya ada di memori halaman sampai Anda menutup tab atau menempel yang lain.

Panduan terkait

• JSON parser: validasi vs format vs tampilan pohon - panduan keputusan serupa untuk alat yang khusus JSON.
• CSS minifier vs compressor - pekerjaan sebaliknya: memperkecil stylesheet daripada memformatnya.
• Alat pemformat kode - alat itu sendiri.
• Hub alat developer - kumpulan lengkapnya, semua berjalan di browser tanpa upload.

Pertanyaan yang sering diajukan

Apakah beautifier mengubah apa yang dilakukan kode saya?

Tidak. Yang berubah hanya spasi dan indentasi. Logika, nilai, dan struktur JavaScript, CSS, atau HTML yang Anda tempel tetap sama.

Mengapa CSS saya diformat sebagai JavaScript?

Deteksi bahasa adalah heuristik berdasarkan bentuk teks, bukan parser lengkap. Jika potongan CSS Anda mengandung token yang diasosiasikan detektor dengan JavaScript, kode itu bisa diklasifikasikan sebagai JavaScript. Tempel aturan CSS sendiri agar deteksi tetap dapat diandalkan.

Bisakah saya memformat Python, Java, atau bahasa lain?

Tidak dapat diandalkan. Alat ini mengenali JavaScript, CSS, HTML, dan JSON. Bahasa lain tetap diproses melalui formatter JavaScript dan hasilnya mungkin tidak terlihat benar - periksa hasilnya sebelum mengandalkannya.

Apakah kode saya diunggah ke suatu tempat?

Tidak. Pemformatan berjalan sepenuhnya di tab browser ini; tidak ada yang Anda tempel dikirim ke server atau layanan analitik.