✓ No signup required

Hello, World! 👋

Edit code on the left →
see live output here

'; } /* Demo wrap click → open editor */ var demoWrap = document.getElementById('lc-demo-wrap'); if (demoWrap) { demoWrap.addEventListener('click', function () { var card = document.getElementById('landing-card'); if (card) { card.classList.add('fade-out'); card.addEventListener('transitionend', function () { card.classList.add('hidden'); }, { once: true }); } window.__loadEditor(); }); } /* 6 — Custom lang dropdown + tagline i18n: immediate setup — bypasses CodeMirror queue */ var _validLangs = ['en','tr','es','zh','hi','fr']; var _dd = document.getElementById('lang-switcher'); var _ALL_TOOLS_TXT = { en:'🧰 All Tools →', tr:'🧰 Tüm Araçlar →', es:'🧰 Todas las Herramientas →', zh:'🧰 所有工具 →', hi:'🧰 सभी टूल्स →', fr:'🧰 Tous les Outils →' }; var _FAB_TXT = { en:'50+ Tools', tr:'50+ Araç', es:'50+ Herramientas', zh:'50+ 工具', hi:'50+ टूल्स', fr:'50+ Outils' }; var _TAGLINES = { en: { main: 'Code freely. Share generously.', sub: 'Free forever · No ads · Just share with a friend 💜' }, tr: { main: 'Özgürce kodla. Cömertçe paylaş.', sub: 'Sonsuza dek ücretsiz · Reklamsız · Bir arkadaşına öner yeter 💜' }, es: { main: 'Programa libremente. Comparte con gusto.', sub: 'Gratis para siempre · Sin anuncios · Solo compártelo con un amigo 💜' }, zh: { main: '自由编码,慑慎分享。', sub: '永久免费 · 无广告 · 分享给朋友就够了 💜' }, hi: { main: 'स्वतंत्र रूप से कोड करें। उदारता से साझा करें।', sub: 'हमेशा मुफ़्त · कोई विज्ञापन नहीं · एक दोस्त को बताएं 💜' }, fr: { main: 'Codez librement. Partagez généreusement.', sub: 'Gratuit pour toujours · Sans pub · Partagez avec un ami 💜' } }; function _applyTagline(lang) { var t = _TAGLINES[lang] || _TAGLINES['en']; var elMain = document.getElementById('tl-main'); var elSub = document.getElementById('tl-sub'); if (elMain) elMain.innerHTML = t.main; if (elSub) elSub.textContent = t.sub; var elAllTools = document.getElementById('lc-all-tools'); if (elAllTools) elAllTools.textContent = _ALL_TOOLS_TXT[lang] || _ALL_TOOLS_TXT['en']; var elFab = document.getElementById('fab-txt'); if (elFab) elFab.textContent = _FAB_TXT[lang] || _FAB_TXT['en']; } function _applyLangChoice(lang) { try { localStorage.setItem('onhtml-lang', lang); document.cookie = 'onhtml-lang=' + lang + '; max-age=31536000; path=/'; } catch(e) {} if (!window.__editorLoaded) { var _u = new URL(location.href); _u.searchParams.set('lang', lang); location.href = _u.toString(); } /* Editor açıksa script.js initLang handler applyLang() çağırır */ } function _setLangDisplay(lang) { if (!_dd) return; var items = _dd.querySelectorAll('[data-lang]'); items.forEach(function(li) { li.setAttribute('aria-selected', li.getAttribute('data-lang') === lang ? 'true' : 'false'); }); var active = _dd.querySelector('[data-lang="' + lang + '"]'); if (active) { var cc = active.getAttribute('data-cc'); var code = active.getAttribute('data-code'); var flagImg = _dd.querySelector('.lang-dd-flag'); if (flagImg) { flagImg.src = 'https://flagcdn.com/16x12/' + cc + '.png'; flagImg.alt = code; } _dd.querySelector('.lang-dd-code').textContent = code; } /* expose current value for script.js */ _dd.dataset.value = lang; } if (_dd) { /* Set initial display from localStorage / URL */ var _initLang = 'en'; try { var _urlL = new URLSearchParams(location.search).get('lang'); var _storedL = localStorage.getItem('onhtml-lang') || ''; if (_urlL && _validLangs.indexOf(_urlL) > -1) _initLang = _urlL; else if (_storedL && _validLangs.indexOf(_storedL) > -1) _initLang = _storedL; } catch(e) {} _setLangDisplay(_initLang); _applyTagline(_initLang); /* If PHP rendered the page in wrong language (no cookie but localStorage has lang), reload with ?lang= so PHP re-renders everything correctly */ var _htmlLang = document.documentElement.getAttribute('lang') || 'en'; if (_initLang !== _htmlLang && !_urlL && !window.__editorLoaded) { var _ru = new URL(location.href); _ru.searchParams.set('lang', _initLang); location.replace(_ru.toString()); } /* Toggle open/close */ _dd.addEventListener('click', function(e) { var li = e.target.closest('[data-lang]'); if (li) { var lang = li.getAttribute('data-lang'); _dd.setAttribute('aria-expanded', 'false'); _setLangDisplay(lang); _applyTagline(lang); _applyLangChoice(lang); /* Dispatch custom event so script.js initLang picks up the change */ _dd.dispatchEvent(new CustomEvent('langchange', { detail: lang })); return; } var open = _dd.getAttribute('aria-expanded') === 'true'; _dd.setAttribute('aria-expanded', open ? 'false' : 'true'); }); /* Close on outside click */ document.addEventListener('click', function(e) { if (!_dd.contains(e.target)) _dd.setAttribute('aria-expanded', 'false'); }); /* Keyboard support */ _dd.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _dd.click(); } if (e.key === 'Escape') _dd.setAttribute('aria-expanded', 'false'); }); } }); })();

Free Online HTML, CSS & JavaScript Live Editor with 50+ Developer Tools

<onHTML/> ✓ Forever free & unlimited

The browser-based HTML, CSS & JS playground

Write code on the left — see the result instantly on the right. No signup, no install.

  • ⚡ Live preview as you type
  • 💾 Auto-save · share in 1 click
  • 🧰 50+ built-in developer tools
🧰 All Tools →
50+Dev Tools
0Sign-ups
100%In-browser
onHTML — Live Preview
Tool
Preview
Console Output
No output yet. Use console.log() in your JS.
DEV TOOLS
🧰All Tools
HTML | Ln 1, Col 1 | 0 chars | ● Saved
UTF-8 | Spaces: 2 | onHTML v2.1
🧰 50+ Tools