Code Playground ออนไลน์ — เขียน HTML, CSS, JS ด้วย Monaco Editor ฟรี

Code Playground คืออะไร?

Metoolzy Code Playground คือเครื่องมือแก้ไขโค้ดออนไลน์สำหรับ HTML, CSS และ JavaScript — โดยใช้ Monaco Editor (engine เดียวกับ VS Code) คุณสามารถเขียนโค้ดและดูผลลัพธ์พรีวิวแบบสดๆ บนเบราว์เซอร์ได้ทันที

คล้ายกับ CodePen หรือ JSFiddle แต่ฟรีทั้งหมด ไม่ต้องใช้บัญชี และโค้ดจะถูกบันทึกโดยอัตโนมัติบนเบราว์เซอร์

คุณสมบัติที่โดดเด่น

• Monaco Editor — เน้นไวยากรณ์ (Syntax highlighting), เติมคำอัตโนมัติ (autocomplete), ตรวจจับข้อผิดพลาดจาก VS Code
• Live Preview — ผลลัพธ์แสดงใน iframe ทำงานอัตโนมัติ 500ms หลังจากหยุดพิมพ์
• Console — จับภาพ console.log, console.error, console.warn จากการแสดงตัวอย่าง
• 3 โหมดเลย์เอาต์ — Tabs (1 editor + preview), Split 3 (3 editors พร้อมกัน), Stacked
• External Libraries — เพิ่ม Bootstrap, Tailwind, jQuery, Alpine.js, Chart.js, Three.js, GSAP หรือ URL CDN ที่กำหนดเองได้
• แชร์ผ่าน URL — บีบอัดโค้ดด้วย pako deflate → URL สั้นลง ใครเปิดก็เห็นโค้ดที่ถูกต้อง
• Responsive Preview — เดสก์ท็อป, แท็บเล็ต (768px), มือถือ (375px)
• บันทึกอัตโนมัติ (Auto-save) — โค้ดถูกบันทึกลงใน localStorage อัตโนมัติ รีโหลดหน้าเว็บแล้วโค้ดไม่หาย
• ดาวน์โหลด HTML — ส่งออกเป็นไฟล์ .html ที่สมบูรณ์
• Dark/Light theme — เปลี่ยนธีมสำหรับตัวแก้ไขโค้ด

แป้นพิมพ์ลัด (Keyboard Shortcuts)

แป้นพิมพ์ลัด	ฟังก์ชั่น
Ctrl+S	Run code (รีเฟรชการแสดงตัวอย่าง)
Ctrl+1 / 2 / 3	เปลี่ยนแท็บ HTML / CSS / JS
Ctrl+`	เปิด/ปิด คอนโซล (Console panel)
Ctrl+Shift+F	จัดรูปแบบโค้ด (Format code HTML + CSS + JS)

เปรียบเทียบกับ CodePen / JSFiddle

คุณสมบัติ	Metoolzy	CodePen	JSFiddle
Monaco Editor (VS Code)	✅	❌ CodeMirror	❌ CodeMirror
ฟรี ไม่จำกัด	✅	❌ คุณสมบัติ Pro	✅
ไม่ต้องใช้บัญชี	✅	❌	✅
Auto-save localStorage	✅	❌	❌
Share URL (บีบอัด)	✅ pako	✅ เซิร์ฟเวอร์	✅ เซิร์ฟเวอร์
Custom CDN	✅	✅	✅
Console capture	✅	✅ (Pro)	❌
Draggable divider	✅	✅	❌

คำถามที่พบบ่อย

โค้ดจะหายไปหรือไม่เมื่อปิดแท็บ?

ไม่ โค้ดจะถูกบันทึกลงใน localStorage โดยอัตโนมัติทุกวินาที เมื่อเปิดใหม่ระบบจะกู้คืนโค้ดล่าสุด

ลิงก์ที่แชร์จะหมดอายุหรือไม่?

ไม่ โค้ดจะถูกเข้ารหัสโดยตรงใน URL (ไม่ได้บันทึกไว้ในเซิร์ฟเวอร์) ลิงก์สามารถใช้งานได้ตลอดไป

รองรับ TypeScript / SCSS หรือไม่?

ยังไม่รองรับในตอนนี้ ปัจจุบันรองรับเฉพาะ HTML, CSS และ JavaScript ล้วนๆ การรองรับ TypeScript อยู่ในแผนงานของเรา

👉 เปิด Code Playground ทันที →

ดูเพิ่มเติม: HTML Formatter · CSS Formatter · JS Formatter