Code Playground Online — Tulis HTML, CSS, JS dengan Monaco Editor Gratis

Apa itu Code Playground?

Metoolzy Code Playground adalah editor kode online untuk HTML, CSS, dan JavaScript — menggunakan Monaco Editor (mesin/engine yang sama dengan VS Code). Anda dapat menulis kode dan melihat hasilnya melalui pratinjau langsung (live preview) tepat di browser Anda.

Mirip dengan CodePen atau JSFiddle, tetapi sepenuhnya gratis, tanpa memerlukan akun, dan kode Anda akan tersimpan otomatis di browser.

Fitur Unggulan

• Monaco Editor — Penyorotan sintaks (Syntax highlighting), pelengkapan otomatis (autocomplete), dan pendeteksian kesalahan yang persis seperti VS Code
• Pratinjau Langsung (Live Preview) — Hasil di-render dalam iframe, berjalan otomatis dalam 500ms setelah Anda berhenti mengetik
• Konsol (Console) — Menangkap console.log, console.error, console.warn langsung dari pratinjau
• 3 Mode Tata Letak (Layout) — Tab (1 editor + pratinjau), Terbagi 3 (Split 3: ketiga editor tampil bersamaan), Bertumpuk (Stacked)
• Pustaka Eksternal (External Libraries) — Tambahkan Bootstrap, Tailwind, jQuery, Alpine.js, Chart.js, Three.js, GSAP, atau URL CDN kustom
• Berbagi via URL — Kode dikompresi menggunakan pako deflate → sehingga menghasilkan URL yang pendek, siapa pun yang membukanya akan melihat kode yang tepat
• Pratinjau Responsif — Desktop, Tablet (768px), Seluler (375px)
• Simpan Otomatis (Auto-save) — Kode tersimpan otomatis di localStorage, sehingga tidak hilang saat dimuat ulang (reload)
• Unduh HTML — Ekspor menjadi 1 file .html yang lengkap
• Tema Gelap/Terang (Dark/Light) — Beralih tema (toggle) untuk editor

Pintasan Keyboard (Keyboard Shortcuts)

Pintasan	Fungsi
Ctrl+S	Jalankan kode (segarkan pratinjau)
Ctrl+1 / 2 / 3	Beralih ke tab HTML / CSS / JS
Ctrl+`	Beralih panel Konsol (Toggle Console)
Ctrl+Shift+F	Format kode (HTML + CSS + JS)

Perbandingan dengan CodePen / JSFiddle

Fitur	Metoolzy	CodePen	JSFiddle
Monaco Editor (VS Code)	✅	❌ CodeMirror	❌ CodeMirror
Gratis tanpa batas	✅	❌ Fitur Pro	✅
Tanpa perlu akun	✅	❌	✅
Simpan otomatis di localStorage	✅	❌	❌
Bagikan URL (dikompresi)	✅ pako	✅ server	✅ server
CDN Kustom	✅	✅	✅
Tangkapan konsol (Console capture)	✅	✅ (Pro)	❌
Pemisah yang dapat ditarik (Draggable)	✅	✅	❌

Pertanyaan yang Sering Diajukan (FAQ)

Apakah kode saya akan hilang ketika menutup tab?

Tidak. Kode secara otomatis disimpan ke localStorage setiap detiknya. Saat Anda membukanya lagi, kode terakhir Anda akan dipulihkan.

Apakah tautan berbagi (share link) memiliki batas kedaluwarsa?

Tidak. Kode dienkode langsung ke dalam URL (tidak disimpan di server). Tautan akan berfungsi untuk selamanya.

Apakah mendukung TypeScript / SCSS?

Saat ini belum. Hanya mendukung HTML, CSS, dan JavaScript murni. Dukungan untuk TypeScript sedang direncanakan.

👉 Buka Code Playground sekarang →

Lihat juga: Format HTML · Format CSS · Format JS