TRIXY

TRIXY — TryIt HTML

Jalankan HTML/CSS/JS secara langsung di browser

|

Catatan: Mode default sandbox **tidak** mengizinkan akses same-origin untuk keamanan. Centang opsi di atas bila butuh (mis. akses storage/fetch ke domain yang sama).

`, tailwind: ` Tailwind Starter

Tailwind Starter

Edit konten di editor, lalu tekan Run.

`, bootstrap: ` Bootstrap 5 Starter

Bootstrap Starter

Edit konten di editor, lalu tekan Run.

` }; function loadFromHash() { try { const hash = location.hash.slice(1); if (!hash) return null; const obj = Object.fromEntries(new URLSearchParams(hash).entries()); if (!obj.code) return null; const decoded = atob(obj.code); return decoded; } catch (e) { console.warn('Hash decode error', e); return null; } } function saveToHash(code) { const params = new URLSearchParams(); params.set('code', btoa(code)); location.hash = params.toString(); } function run() { const code = $('#code').value; const iframe = $('#frame'); const allowSameOrigin = $('#allow-same-origin').checked; const baseSandbox = "allow-forms allow-scripts allow-modals allow-popups allow-downloads"; iframe.setAttribute('sandbox', allowSameOrigin ? baseSandbox + " allow-same-origin" : baseSandbox); iframe.srcdoc = code; localStorage.setItem(storeKey, code); } function downloadHtml() { const code = $('#code').value; const blob = new Blob([code], {type: 'text/html'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'tryit.html'; a.click(); URL.revokeObjectURL(a.href); } function importFile(file) { const reader = new FileReader(); reader.onload = () => { $('#code').value = reader.result; run(); }; reader.readAsText(file); } function applyTemplate(key) { $('#code').value = templates[key] || templates.blank; } function setupDrag() { const drag = document.getElementById('drag'); const editor = document.getElementById('editorWrap'); const preview = document.getElementById('previewWrap'); let startX = 0, startWidth = 0; drag.addEventListener('mousedown', (e)=>{ startX = e.clientX; startWidth = editor.getBoundingClientRect().width; document.body.style.userSelect = 'none'; function onMove(ev) { const dx = ev.clientX - startX; const newW = Math.max(240, Math.min(window.innerWidth - 240, startWidth + dx)); editor.style.width = newW + 'px'; preview.style.width = 'calc(100% - ' + newW + 'px)'; } function onUp() { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); document.body.style.userSelect = ''; } document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp); }); } document.addEventListener('DOMContentLoaded', ()=>{ document.getElementById('year').textContent = new Date().getFullYear(); const saved = loadFromHash() ?? localStorage.getItem(storeKey); $('#code').value = saved || templates.html5; $('#btn-run').addEventListener('click', run); $('#btn-download').addEventListener('click', downloadHtml); $('#file-import').addEventListener('change', e => { if (e.target.files[0]) importFile(e.target.files[0]); e.target.value=''; }); $('#btn-save').addEventListener('click', ()=> localStorage.setItem(storeKey, $('#code').value)); $('#btn-share').addEventListener('click', ()=> { saveToHash($('#code').value); navigator.clipboard.writeText(location.href); alert('Link dengan kode tersimpan di URL sudah di-copy.'); }); $('#btn-apply-tpl').addEventListener('click', ()=> applyTemplate($('#tpl').value)); setupDrag(); run(); });