Code Playground Online — Viết HTML, CSS, JS với Monaco Editor miễn phí

Code Playground là gì?

Metoolzy Code Playground là một online code editor cho HTML, CSS và JavaScript — sử dụng Monaco Editor (cùng engine với VS Code). Bạn có thể viết code và xem kết quả live preview ngay trên browser.

Tương tự CodePen, JSFiddle nhưng hoàn toàn miễn phí, không cần tài khoản, và code tự lưu trên browser.

Tính năng nổi bật

• Monaco Editor — Syntax highlighting, autocomplete, error detection từ VS Code
• Live Preview — Kết quả render trong iframe, auto-run sau 500ms khi ngừng gõ
• Console — Bắt console.log, console.error, console.warn từ preview
• 3 Layout modes — Tabs (1 editor + preview), Split 3 (3 editors cùng lúc), Stacked
• External Libraries — Thêm Bootstrap, Tailwind, jQuery, Alpine.js, Chart.js, Three.js, GSAP, hoặc custom CDN URL
• Share via URL — Code nén bằng pako deflate → URL ngắn gọn, ai mở cũng thấy đúng code
• Responsive Preview — Desktop, Tablet (768px), Mobile (375px)
• Auto-save — Code tự lưu localStorage, reload không mất
• Download HTML — Export thành 1 file .html hoàn chỉnh
• Dark/Light theme — Toggle theme cho editor

Keyboard Shortcuts

Phím tắt	Chức năng
Ctrl+S	Run code (refresh preview)
Ctrl+1 / 2 / 3	Chuyển tab HTML / CSS / JS
Ctrl+\	Toggle Console panel
Ctrl+Shift+F	Format code (HTML + CSS + JS)

So sánh với CodePen / JSFiddle

Tính năng	Metoolzy	CodePen	JSFiddle
Monaco Editor (VS Code)	✅	❌ CodeMirror	❌ CodeMirror
Miễn phí không giới hạn	✅	❌ Pro features	✅
Không cần tài khoản	✅	❌	✅
Auto-save localStorage	✅	❌	❌
Share URL (compressed)	✅ pako	✅ server	✅ server
Custom CDN	✅	✅	✅
Console capture	✅	✅ (Pro)	❌
Draggable divider	✅	✅	❌

Câu hỏi thường gặp

Code có bị mất khi đóng tab?

Không. Code tự lưu vào localStorage mỗi giây. Khi mở lại sẽ restore code cuối cùng.

Share link có hết hạn không?

Không. Code được encode trực tiếp trong URL (không lưu server). Link hoạt động vĩnh viễn.

Có hỗ trợ TypeScript / SCSS?

Hiện chưa. Chỉ hỗ trợ HTML, CSS, JavaScript thuần. TypeScript support đang trong kế hoạch.

👉 Mở Code Playground ngay →

Xem thêm: HTML Formatter · CSS Formatter · JS Formatter