Code Playground

Write HTML, CSS, and JavaScript code and see the result in real-time

HTML / CSS / JavaScript

Output

Quick Templates:

`, form: ` Contact Form

Contact Us

`, card: ` Card Component

Card Title

This is a beautiful card component with an image, title, description, and action button.

Learn More

` }; // Initialize code editor and output document.addEventListener('DOMContentLoaded', function() { const codeEditor = document.getElementById('code-editor'); const codeOutput = document.getElementById('code-output'); const runButton = document.getElementById('run-code'); const resetButton = document.getElementById('reset-code'); const openNewWindowButton = document.getElementById('open-new-window'); const templateButtons = document.querySelectorAll('.template-btn'); // Run code function function runCode() { const code = codeEditor.value; const blob = new Blob([code], { type: 'text/html' }); const url = URL.createObjectURL(blob); codeOutput.src = url; } // Initial run runCode(); // Run button click runButton.addEventListener('click', runCode); // Auto-run on input (with debounce) let timeout; codeEditor.addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(runCode, 1000); }); // Reset button resetButton.addEventListener('click', function() { if (confirm('Are you sure you want to reset the code?')) { codeEditor.value = templates.html; runCode(); } }); // Open in new window openNewWindowButton.addEventListener('click', function() { const code = codeEditor.value; const newWindow = window.open('', '_blank'); newWindow.document.write(code); newWindow.document.close(); }); // Template buttons templateButtons.forEach(function(btn) { btn.addEventListener('click', function() { const template = this.getAttribute('data-template'); if (templates[template]) { if (confirm('This will replace your current code. Continue?')) { codeEditor.value = templates[template]; runCode(); } } }); }); // Keyboard shortcuts codeEditor.addEventListener('keydown', function(e) { // Ctrl/Cmd + Enter to run if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); runCode(); } // Tab key support if (e.key === 'Tab') { e.preventDefault(); const start = this.selectionStart; const end = this.selectionEnd; this.value = this.value.substring(0, start) + ' ' + this.value.substring(end); this.selectionStart = this.selectionEnd = start + 4; } }); });