Code Playground

Write, run, and test JavaScript, Python, and HTML directly in your browser. No signup required.

Loading Python runtime...
Output
\n\n' }, { label: 'Flexbox Layout', code: '\n\n\n\n\n\n

Flexbox Cards

\n
\n

Card 1

Flexible layout with CSS Flexbox.

\n

Card 2

Responsive by default.

\n

Card 3

No media queries needed.

\n
\n\n' } ] }; // ---- Line Numbers ---- function updateLines() { var lines = editor.value.split('\n').length; var html = ''; for (var i = 1; i <= lines; i++) html += i + '\n'; linesEl.textContent = html; linesEl.scrollTop = editor.scrollTop; } editor.addEventListener('input', updateLines); editor.addEventListener('scroll', function() { linesEl.scrollTop = editor.scrollTop; }); // ---- Tab Key Support ---- editor.addEventListener('keydown', function(e) { if (e.key === 'Tab') { e.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; this.value = this.value.substring(0, start) + ' ' + this.value.substring(end); this.selectionStart = this.selectionEnd = start + 2; updateLines(); } }); // ---- Tab Switching ---- tabs.forEach(function(tab) { tab.addEventListener('click', function() { tabs.forEach(function(t) { t.classList.remove('active'); }); tab.classList.add('active'); currentLang = tab.getAttribute('data-lang'); editor.placeholder = currentLang === 'python' ? '# Write your Python code here...' : currentLang === 'html' ? '' : '// Write your code here...'; editor.value = ''; output.innerHTML = ''; updateLines(); renderExamples(); }); }); // ---- Examples Dropdown ---- function renderExamples() { var items = examples[currentLang] || []; examplesDropdown.innerHTML = ''; items.forEach(function(ex) { var div = document.createElement('div'); div.className = 'pg-example-item'; div.innerHTML = '' + ex.label + ''; div.addEventListener('click', function() { editor.value = ex.code; updateLines(); examplesDropdown.classList.remove('open'); }); examplesDropdown.appendChild(div); }); } renderExamples(); examplesBtn.addEventListener('click', function(e) { e.stopPropagation(); examplesDropdown.classList.toggle('open'); }); document.addEventListener('click', function() { examplesDropdown.classList.remove('open'); }); // ---- Output Helpers ---- function appendOutput(text, cls) { var span = document.createElement('span'); if (cls) span.className = cls; span.textContent = text + '\n'; output.appendChild(span); output.scrollTop = output.scrollHeight; } clearBtn.addEventListener('click', function() { output.innerHTML = ''; }); // ---- Run JavaScript ---- function runJS(code) { output.innerHTML = ''; var iframeDoc = '