Auto Save:
Your latest code is saved in this browser.
HTML Online Viewer Live editor + instant preview + full screen mode
HTML Editor Ready
Live Preview Rendered

HTML Online Viewer

Use this free HTML Online Viewer to write, paste, format, preview, inspect, import, export, and test HTML code instantly in your browser.

JSON Formatter Meta Tag Generator Base64 Encoder Decoder Slug Generator HTML to Text Converter Word Counter

How to use

  1. Paste or write HTML code in the editor.
  2. View the live preview instantly.
  3. Use Format, Minify, Copy, Import, Export, or Full Screen options.
  4. Switch between Desktop, Tablet, and Mobile preview modes.

Example

Input: HTML snippet, landing page section, form, email block, or widget code.

Output: Clean live preview and editable HTML source.

FAQ

Is this HTML Viewer free?

Yes, this tool is free to use.

Can I import HTML files?

Yes, you can import .html, .htm, or .txt files.

Can I use full screen mode?

Yes, you can open the editor or preview area in full screen mode.

`;function mtHtmlInit(){ mtHtmlEditor = ace.edit("mtHtmlEditor"); mtHtmlEditor.session.setMode("ace/mode/html"); mtHtmlEditor.setTheme("ace/theme/monokai"); mtHtmlEditor.setFontSize(14); mtHtmlEditor.session.setUseWrapMode(true); mtHtmlEditor.setOptions({ showPrintMargin:false, enableBasicAutocompletion:true, enableLiveAutocompletion:true });const saved = localStorage.getItem('mt_html_saved_code'); mtHtmlEditor.setValue(saved && saved.trim() ? saved : mtHtmlSampleCode, -1); mtHtmlRender();mtHtmlEditor.session.on('change', function(){ mtHtmlRender(); localStorage.setItem('mt_html_saved_code', mtHtmlGet()); }); }function mtHtmlGet(){ return mtHtmlEditor ? mtHtmlEditor.getValue() : ''; }function mtHtmlSet(v){ if(mtHtmlEditor){ mtHtmlEditor.setValue(v, -1); mtHtmlRender(); localStorage.setItem('mt_html_saved_code', v); } }function mtHtmlRender(){ const html = mtHtmlGet(); document.getElementById('mtHtmlPreview').srcdoc = html; document.getElementById('mtHtmlSource').textContent = html;const lines = html.split('\n').length; const chars = html.length; const tags = (html.match(/<\s*\/?\s*[a-zA-Z0-9-]+/g) || []).length;document.getElementById('mtHtmlStats').textContent = lines + ' lines · ' + chars + ' chars · ' + tags + ' tags'; document.getElementById('mtHtmlStatus').textContent = 'Live'; }function mtHtmlMode(mode){ const editorWrap = document.getElementById('mtHtmlEditorWrap'); const previewWrap = document.getElementById('mtHtmlPreviewWrap'); const preview = document.getElementById('mtHtmlPreview'); const source = document.getElementById('mtHtmlSource'); const workspace = document.getElementById('mtHtmlWorkspace'); const divider = document.getElementById('mtHtmlDivider');document.querySelectorAll('#mtTabSplit,#mtTabPreview,#mtTabSource').forEach(b => b.classList.remove('active'));if(mode === 'split'){ workspace.style.gridTemplateColumns = '1fr 6px 1fr'; editorWrap.style.display = 'flex'; divider.style.display = 'block'; previewWrap.style.display = 'flex'; preview.style.display = 'block'; source.style.display = 'none'; document.getElementById('mtTabSplit').classList.add('active'); }if(mode === 'preview'){ workspace.style.gridTemplateColumns = '1fr'; editorWrap.style.display = 'none'; divider.style.display = 'none'; previewWrap.style.display = 'flex'; preview.style.display = 'block'; source.style.display = 'none'; document.getElementById('mtTabPreview').classList.add('active'); }if(mode === 'source'){ workspace.style.gridTemplateColumns = '1fr'; editorWrap.style.display = 'none'; divider.style.display = 'none'; previewWrap.style.display = 'flex'; preview.style.display = 'none'; source.style.display = 'block'; document.getElementById('mtTabSource').classList.add('active'); }setTimeout(() => mtHtmlEditor && mtHtmlEditor.resize(), 100); }function mtHtmlDevice(type){ const frame = document.getElementById('mtHtmlDeviceFrame');frame.classList.remove('tablet','mobile');document.querySelectorAll('#mtDeviceDesktop,#mtDeviceTablet,#mtDeviceMobile').forEach(b => b.classList.remove('active'));if(type === 'desktop'){ document.getElementById('mtDeviceDesktop').classList.add('active'); } if(type === 'tablet'){ frame.classList.add('tablet'); document.getElementById('mtDeviceTablet').classList.add('active'); } if(type === 'mobile'){ frame.classList.add('mobile'); document.getElementById('mtDeviceMobile').classList.add('active'); } }function mtHtmlFormat(){ const html = mtHtmlGet(); if(!html.trim()) return alert('Please enter HTML first.'); if(typeof html_beautify !== 'undefined'){ mtHtmlSet(html_beautify(html, { indent_size: 2, wrap_line_length: 120, preserve_newlines: true })); } else { mtHtmlSet(html.replace(/>\n<')); } }function mtHtmlMinify(){ const html = mtHtmlGet(); if(!html.trim()) return alert('Please enter HTML first.'); mtHtmlSet( html.replace(/\n/g,' ') .replace(/\t/g,' ') .replace(/\s{2,}/g,' ') .replace(/>\s+<') .trim() ); }function mtHtmlExpand(){ if(mtHtmlEditor) mtHtmlEditor.session.unfold(); }function mtHtmlCollapse(){ if(mtHtmlEditor) mtHtmlEditor.session.foldAll(); }function mtHtmlSample(){ mtHtmlSet(mtHtmlSampleCode); }function mtHtmlClear(){ if(confirm('Clear all HTML code?')){ mtHtmlSet(''); localStorage.removeItem('mt_html_saved_code'); } }function mtHtmlCopy(){ const html = mtHtmlGet(); if(!html.trim()) return alert('Nothing to copy.'); navigator.clipboard.writeText(html).then(() => alert('HTML copied.')); }function mtHtmlDownload(){ const html = mtHtmlGet(); if(!html.trim()) return alert('Please enter HTML first.'); const blob = new Blob([html], {type:'text/html'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'themultitools-html-viewer-output.html'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }function mtHtmlPreviewFull(){ const html = mtHtmlGet(); if(!html.trim()) return alert('Please enter HTML first.'); const win = window.open('', '_blank'); win.document.open(); win.document.write(html); win.document.close(); }function mtHtmlSourceFull(){ const html = mtHtmlGet(); if(!html.trim()) return alert('Please enter HTML first.'); const safe = html.replace(/[&<>"']/g, m => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m])); const win = window.open('', '_blank'); win.document.open(); win.document.write('
' + safe + '
'); win.document.close(); }function mtHtmlFullscreenEditor(){ const editor = document.getElementById('mtHtmlEditorWrap'); if(!document.fullscreenElement){ editor.requestFullscreen().catch(err => alert('Fullscreen error: ' + err.message)); } else { document.exitFullscreen(); } setTimeout(() => mtHtmlEditor && mtHtmlEditor.resize(), 300); }function mtHtmlFullscreenPreview(){ const preview = document.getElementById('mtHtmlPreviewWrap'); if(!document.fullscreenElement){ preview.requestFullscreen().catch(err => alert('Fullscreen error: ' + err.message)); } else { document.exitFullscreen(); } }function mtHtmlToggleWrap(){ mtHtmlWrapOn = !mtHtmlWrapOn; mtHtmlEditor.session.setUseWrapMode(mtHtmlWrapOn); alert(mtHtmlWrapOn ? 'Word wrap enabled.' : 'Word wrap disabled.'); }function mtHtmlToggleDark(){ const app = document.getElementById('mt-html-viewer-app'); const btn = document.getElementById('mtHtmlDarkBtn');if(mtHtmlTheme === 'dark'){ mtHtmlTheme = 'light'; app.classList.add('light-mode'); mtHtmlEditor.setTheme("ace/theme/chrome"); btn.textContent = '🌙 Dark Mode'; } else { mtHtmlTheme = 'dark'; app.classList.remove('light-mode'); mtHtmlEditor.setTheme("ace/theme/monokai"); btn.textContent = '☀ Light Mode'; } }function mtHtmlInitResize(){ const divider = document.getElementById('mtHtmlDivider'); const workspace = document.getElementById('mtHtmlWorkspace'); let isDragging = false;divider.addEventListener('mousedown', function(){ isDragging = true; document.body.style.cursor = 'col-resize'; });document.addEventListener('mousemove', function(e){ if(!isDragging) return;const rect = workspace.getBoundingClientRect(); let percent = ((e.clientX - rect.left) / rect.width) * 100; percent = Math.max(25, Math.min(75, percent));workspace.style.gridTemplateColumns = percent + '% 6px ' + (100 - percent) + '%';if(mtHtmlEditor){ mtHtmlEditor.resize(); } });document.addEventListener('mouseup', function(){ isDragging = false; document.body.style.cursor = ''; }); }document.addEventListener('DOMContentLoaded', function(){ mtHtmlInit(); mtHtmlInitResize();document.getElementById('mtHtmlFile').addEventListener('change', function(e){ const file = e.target.files[0]; if(!file) return; const reader = new FileReader(); reader.onload = function(evt){ mtHtmlSet(evt.target.result); }; reader.readAsText(file); });document.addEventListener('fullscreenchange', function(){ setTimeout(() => mtHtmlEditor && mtHtmlEditor.resize(), 300); }); });
Scroll to Top