πŸ’» Online Code Playground

δΈ­ζ–‡ English
← Back to Tools
HTML
CSS
JavaScript
πŸ“± Preview Ready
Live Preview 0 chars

πŸ“¦ Templates

Hello World

Simple starter template

Card Layout

CSS Flexbox cards

CSS Animation

Keyframe animations

Canvas Drawing

HTML5 Canvas demo

Form Validation

JS form validation

Fetch API

Async data request

πŸ“– Tutorial

Getting Started

The Online Code Playground is a zero-install frontend development environment. Open the page and start writing HTML, CSS, and JavaScript code with instant live preview. The left panel has three editor tabs for HTML structure, CSS styling, and JavaScript logic. Click "Run" or enable auto-run mode to see your code rendered in real time on the right preview panel.

Basic Workflow

Write your HTML structure in the HTML tab, add styles in the CSS tab, and write interactive logic in the JavaScript tab. The editor supports Tab indentation and common keyboard shortcuts. Click the preview header to refresh the output.

Using Templates

Six ready-made templates are available below the editor β€” from a simple Hello World starter to advanced examples like Canvas particle effects, form validation, and Fetch API data loading. Click any template to load it instantly and start experimenting.

🎯 Use Cases

Learning Frontend: Beginners can visually understand how HTML, CSS, and JS work together. Modify code and see instant results β€” far more effective than reading tutorials alone.

Quick Prototyping: Product managers and designers can rapidly build page prototypes and test interaction logic without setting up a local development environment.

Teaching & Demos: Instructors can write code live while students watch the output in real time. Share results by exporting an HTML file or taking a screenshot.

Debugging: Paste problematic code here to isolate and test it away from other code, making it easier to pinpoint the root cause of bugs.

πŸ“š Deep Dive

The Frontend Trinity: HTML defines page structure (the skeleton), CSS controls visual appearance (the skin), and JavaScript handles interactive behavior (the muscles). Together they form the foundation of every modern web page.

Sandbox Security: The preview uses an iframe with the sandbox attribute, which restricts script permissions. Even malicious code can only affect the preview area β€” it cannot access the main page DOM or make network requests.

Offline Principle: All code parsing and rendering happen locally in your browser with no backend dependency. Once the page loads, all features work perfectly even without an internet connection.

❓ FAQ

Is my code uploaded to a server?
No. All code runs and previews entirely in your browser. Nothing is sent to any server. When you close the page, your code is not saved anywhere.
Which languages are supported?
HTML, CSS, and JavaScript β€” the three core frontend languages. The editor provides basic syntax highlighting and auto-indentation for quick coding and testing.
Can I use it offline?
Yes. Once the page loads, all features run locally. You can disconnect from the internet and still use everything.
Is the preview safe?
Yes. The preview uses an iframe with sandbox isolation, preventing any code from affecting the main page or accessing your device.
Is it good for beginners learning frontend?
Absolutely. Live preview lets you see code results instantly, making it the best way to learn HTML/CSS/JS. Modify code and click Run to see changes immediately.

Β© 2026 Online Tools Matrix Β· shexiangsheng@gmail.com

Pure client-side processing β€” code never leaves your browser

'; frame.srcdoc = doc; document.getElementById('previewStatus').textContent = 'Running...'; setTimeout(function(){document.getElementById('previewStatus').textContent = 'Ready';},500); }; // Auto-run on input ['htmlCode','cssCode','jsCode'].forEach(function(id){ document.getElementById(id).addEventListener('input',function(){ updateCharCount(); if(autoRunEnabled){ clearTimeout(runTimer); runTimer = setTimeout(window.runCode,500); } }); }); // Char count function updateCharCount(){ var total = document.getElementById('htmlCode').value.length + document.getElementById('cssCode').value.length + document.getElementById('jsCode').value.length; document.getElementById('charCount').textContent = total+' chars'; } updateCharCount(); // Tab key support ['htmlCode','cssCode','jsCode'].forEach(function(id){ document.getElementById(id).addEventListener('keydown',function(e){ if(e.key==='Tab'){ e.preventDefault(); var s=this.selectionStart, end=this.selectionEnd; this.value=this.value.substring(0,s)+' '+this.value.substring(end); this.selectionStart=this.selectionEnd=s+2; } }); }); // Copy code window.copyCode = function(){ var html = document.getElementById('htmlCode').value; var css = document.getElementById('cssCode').value; var js = document.getElementById('jsCode').value; var st = '<' + 'script>'; var et = '<' + '/script>'; var full = '\n\n\n\n\n\n\n'+html+'\n'+st+'\n'+js+'\n'+et+'\n
\n'; navigator.clipboard.writeText(full).then(function(){ alert('Code copied to clipboard!'); }); }; // Download code window.downloadCode = function(){ var html = document.getElementById('htmlCode').value; var css = document.getElementById('cssCode').value; var js = document.getElementById('jsCode').value; var st = '<' + 'script>'; var et = '<' + '/script>'; var full = '\n\n\n\n\n\n\n'+html+'\n'+st+'\n'+js+'\n'+et+'\n
\n'; var blob = new Blob([full],{type:'text/html'}); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'code.html'; a.click(); URL.revokeObjectURL(a.href); }; // Clear all window.clearAll = function(){ if(!confirm('Clear all code?')) return; document.getElementById('htmlCode').value=''; document.getElementById('cssCode').value=''; document.getElementById('jsCode').value=''; document.getElementById('previewFrame').srcdoc=''; updateCharCount(); }; // Templates var templates = { hello: { html: '
\n

Hello, World!

\n

My first web page

\n \n

\n
', css: 'body {\n font-family: -apple-system, sans-serif;\n background: #0f172a;\n color: #e2e8f0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n}\n\n.container {\n text-align: center;\n padding: 40px;\n}\n\nh1 { color: #22d3ee; margin-bottom: 16px; }\np { color: #94a3b8; margin-bottom: 20px; }\n\nbutton {\n padding: 10px 24px;\n background: rgba(6,182,212,0.2);\n color: #22d3ee;\n border: 1px solid rgba(6,182,212,0.3);\n border-radius: 8px;\n font-size: 16px;\n cursor: pointer;\n}\n\nbutton:hover { background: rgba(6,182,212,0.3); }\n#output { margin-top: 16px; font-size: 18px; color: #4ade80; }', js: 'let count = 0;\ndocument.getElementById("clickBtn").addEventListener("click", function() {\n count++;\n document.getElementById("output").textContent = "You clicked " + count + " times!";\n});' }, card: { html: '
\n
πŸš€

Fast Deploy

One-click production release

\n
πŸ”’

Secure

Enterprise-grade security

\n
πŸ“Š

Analytics

Real-time data dashboard

\n
', css: 'body { background: #0f172a; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }\n.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 800px; padding: 20px; }\n.card { background: #1e293b; border-radius: 12px; padding: 30px; text-align: center; border: 1px solid rgba(148,163,184,0.1); transition: transform 0.3s; }\n.card:hover { transform: translateY(-5px); border-color: rgba(6,182,212,0.3); }\n.card-icon { font-size: 2.5rem; margin-bottom: 16px; }\n.card h3 { color: #f1f5f9; margin-bottom: 8px; }\n.card p { color: #94a3b8; font-size: 0.9rem; }', js: 'document.querySelectorAll(".card").forEach(function(card) {\n card.addEventListener("mouseenter", function() {\n this.style.boxShadow = "0 8px 32px rgba(6,182,212,0.15)";\n });\n card.addEventListener("mouseleave", function() {\n this.style.boxShadow = "none";\n });\n});' }, animation: { html: '
\n
\n
\n
\n
', css: 'body { background: #0f172a; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }\n.scene { position: relative; width: 400px; height: 300px; }\n\n.box {\n position: absolute; width: 60px; height: 60px; background: #22d3ee; border-radius: 8px;\n animation: moveBox 3s ease-in-out infinite;\n}\n.circle {\n position: absolute; width: 40px; height: 40px; background: #f97316; border-radius: 50%;\n animation: moveCircle 4s linear infinite;\n}\n.triangle {\n position: absolute; width: 0; height: 0;\n border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 43px solid #a855f7;\n animation: spin 2s linear infinite;\n}\n\n@keyframes moveBox { 0%,100% { left: 0; top: 120px; } 50% { left: 340px; top: 120px; } }\n@keyframes moveCircle { 0% { left: 180px; top: 0; } 25% { left: 340px; top: 120px; } 50% { left: 180px; top: 240px; } 75% { left: 0; top: 120px; } 100% { left: 180px; top: 0; } }\n@keyframes spin { from { left: 175px; top: 130px; transform: rotate(0deg); } to { left: 175px; top: 130px; transform: rotate(360deg); } }', js: 'var paused = false;\ndocument.querySelector(".scene").addEventListener("click", function() {\n paused = !paused;\n var items = document.querySelectorAll(".box, .circle, .triangle");\n items.forEach(function(el) {\n el.style.animationPlayState = paused ? "paused" : "running";\n });\n});' }, canvas: { html: '\n

Click the canvas to add particles

', css: 'body { background: #0f172a; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }\ncanvas { background: #1e293b; border-radius: 12px; border: 1px solid rgba(148,163,184,0.1); cursor: crosshair; }\n.hint { color: #64748b; margin-top: 12px; font-size: 0.9rem; }', js: 'var canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\nvar particles = [];\n\nfunction Particle(x, y) {\n this.x = x; this.y = y;\n this.vx = (Math.random() - 0.5) * 8;\n this.vy = (Math.random() - 0.5) * 8;\n this.life = 1;\n this.color = "hsl(" + Math.random()*360 + ", 80%, 60%)";\n this.size = Math.random() * 6 + 2;\n}\n\ncanvas.addEventListener("click", function(e) {\n var rect = canvas.getBoundingClientRect();\n for (var i = 0; i < 20; i++) {\n particles.push(new Particle(e.clientX - rect.left, e.clientY - rect.top));\n }\n});\n\nfunction animate() {\n ctx.fillStyle = "rgba(15,23,42,0.15)";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n particles.forEach(function(p, i) {\n p.x += p.vx; p.y += p.vy; p.life -= 0.015;\n if (p.life <= 0) { particles.splice(i, 1); return; }\n ctx.globalAlpha = p.life;\n ctx.fillStyle = p.color;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\n ctx.fill();\n });\n ctx.globalAlpha = 1;\n requestAnimationFrame(animate);\n}\nanimate();' }, form: { html: '
\n

Sign Up

\n
\n
\n
\n
\n \n
\n
', css: 'body { background: #0f172a; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }\n#myForm { background: #1e293b; padding: 32px; border-radius: 12px; width: 360px; border: 1px solid rgba(148,163,184,0.1); }\nh2 { color: #f1f5f9; text-align: center; margin-bottom: 24px; }\n.field { margin-bottom: 16px; }\nlabel { display: block; color: #94a3b8; margin-bottom: 6px; font-size: 0.9rem; }\ninput { width: 100%; padding: 10px 12px; background: #0f172a; border: 1px solid rgba(148,163,184,0.2); border-radius: 6px; color: #e2e8f0; font-size: 14px; }\ninput:focus { outline: none; border-color: rgba(6,182,212,0.5); }\ninput.error { border-color: #ef4444; }\nbutton { width: 100%; padding: 12px; background: rgba(6,182,212,0.2); color: #22d3ee; border: 1px solid rgba(6,182,212,0.3); border-radius: 6px; font-size: 16px; cursor: pointer; margin-top: 8px; }\nbutton:hover { background: rgba(6,182,212,0.3); }\n#msg { margin-top: 12px; text-align: center; font-size: 0.9rem; min-height: 24px; }\n.success { color: #4ade80; }\n.fail { color: #f87171; }', js: 'document.getElementById("myForm").addEventListener("submit", function(e) {\n e.preventDefault();\n var username = document.getElementById("username").value.trim();\n var email = document.getElementById("email").value.trim();\n var password = document.getElementById("password").value;\n var confirmPwd = document.getElementById("confirmPwd").value;\n var msg = document.getElementById("msg");\n var valid = true;\n\n document.querySelectorAll("input").forEach(function(el) { el.classList.remove("error"); });\n\n if (username.length < 3 || username.length > 20) {\n document.getElementById("username").classList.add("error");\n valid = false;\n }\n if (!email || !email.includes("@")) {\n document.getElementById("email").classList.add("error");\n valid = false;\n }\n if (password.length < 6) {\n document.getElementById("password").classList.add("error");\n valid = false;\n }\n if (password !== confirmPwd) {\n document.getElementById("confirmPwd").classList.add("error");\n valid = false;\n }\n\n if (valid) {\n msg.className = "success";\n msg.textContent = "Welcome, " + username + "!";\n } else {\n msg.className = "fail";\n msg.textContent = "Please check your input";\n }\n});' }, api: { html: '
\n

User List

\n \n \n
\n
', css: 'body { background: #0f172a; display: flex; justify-content: center; padding: 40px; margin: 0; font-family: sans-serif; }\n.container { max-width: 500px; width: 100%; }\nh2 { color: #f1f5f9; margin-bottom: 16px; }\nbutton { padding: 10px 20px; background: rgba(6,182,212,0.2); color: #22d3ee; border: 1px solid rgba(6,182,212,0.3); border-radius: 6px; cursor: pointer; margin-bottom: 16px; }\nbutton:hover { background: rgba(6,182,212,0.3); }\n.user-card { background: #1e293b; padding: 16px; border-radius: 8px; margin-bottom: 8px; border: 1px solid rgba(148,163,184,0.1); }\n.user-card h4 { color: #22d3ee; margin-bottom: 4px; }\n.user-card p { color: #94a3b8; font-size: 0.85rem; margin: 2px 0; }', js: 'document.getElementById("fetchBtn").addEventListener("click", function() {\n var loading = document.getElementById("loading");\n var result = document.getElementById("result");\n loading.style.display = "block";\n result.innerHTML = "";\n\n fetch("https://jsonplaceholder.typicode.com/users")\n .then(function(res) { return res.json(); })\n .then(function(users) {\n loading.style.display = "none";\n users.forEach(function(user) {\n result.innerHTML += \'

\' + user.name + \'

πŸ“§ \' + user.email + \'

🏒 \' + user.company.name + \'

\';\n });\n })\n .catch(function(err) {\n loading.style.display = "none";\n result.innerHTML = \'

Request failed: \' + err.message + \'

\';\n });\n});' } }; window.loadTemplate = function(name){ var t = templates[name]; if(!t) return; document.getElementById('htmlCode').value = t.html; document.getElementById('cssCode').value = t.css; document.getElementById('jsCode').value = t.js; updateCharCount(); window.runCode(); }; // Resize handle var handle = document.getElementById('resizeHandle'); var editorPanel = document.getElementById('editorPanel'); var isDragging = false; handle.addEventListener('mousedown',function(e){ isDragging=true; document.body.style.cursor='col-resize'; document.body.style.userSelect='none'; }); document.addEventListener('mousemove',function(e){ if(!isDragging) return; var playground=document.getElementById('playground'); var rect=playground.getBoundingClientRect(); var pct=((e.clientX-rect.left)/rect.width)*100; pct=Math.max(20,Math.min(80,pct)); editorPanel.style.flex='0 0 '+pct+'%'; }); document.addEventListener('mouseup',function(){ isDragging=false; document.body.style.cursor=''; document.body.style.userSelect=''; }); // Initial run window.runCode(); })();