', '', '

HTML File Viewer Example

', '', '

This page demonstrates how HTML content appears in the safe preview.

', '', ' ', '', '

Unordered List

', '

', '
• HTML structure
', '
• Embedded CSS
', '
• Rendered preview
', '

', '', '

Ordered List

', '

', '
1. Upload or paste HTML.
', '
2. Review the source.
', '
3. Inspect the preview.
', '

', '', '

Sample Table

', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '

Element	Purpose
HTML	Defines page structure
CSS	Controls visual styling

', '', '

Blockquote

', '

', ' A rendered preview helps you inspect the structure and appearance of HTML.', '

', '', ' Example Button', '', '' ].join('\n'); /* ---------------------------- Helpers ----------------------------- */ function setStatus(message, kind) { statusEl.textContent = message; statusEl.className = 'jm-hfv-status' + (kind === 'success' ? ' jm-hfv-status--success' : kind === 'error' ? ' jm-hfv-status--error' : kind === 'info' ? ' jm-hfv-status--info' : ''); } function setSourceStatus(kind, text) { sourceStatusEl.className = 'jm-hfv-source-status' + (kind === 'dirty' ? ' jm-hfv-source-status--dirty' : kind === 'empty' ? ' jm-hfv-source-status--empty' : ' jm-hfv-source-status--ok'); sourceStatusEl.textContent = text; } function setPreviewStatus(kind, text) { previewStatusEl.className = 'jm-hfv-preview-status' + (kind === 'ok' ? ' jm-hfv-preview-status--ok' : kind === 'stale' ? ' jm-hfv-preview-status--stale' : kind === 'error' ? ' jm-hfv-preview-status--error' : ''); previewStatusEl.textContent = text; } function formatBytes(bytes) { if (typeof bytes !== 'number' || isNaN(bytes) || bytes < 0) { return '0 B'; } if (bytes < 1024) { return bytes + ' B'; } if (bytes < 1024 * 1024) { return (bytes / 1024).toFixed(1) + ' KB'; } return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; } function safeFilename(name) { if (!name || typeof name !== 'string') { return DEFAULT_FILENAME; } var cleaned = name.replace(/[\\/:*?"<>|\x00-\x1f]/g, '_').trim(); if (!cleaned) { return DEFAULT_FILENAME; } if (!/\.(html?|txt)$/i.test(cleaned)) { cleaned = cleaned.replace(/\.[^.]*$/, ''); cleaned = (cleaned || 'viewed-file') + '.html'; } return cleaned; } function updateCounts() { var n = sourceEl.value.length; charCountEl.textContent = n + ' characters'; srcCharCountEl.textContent = n + ' characters'; } function updateFileInfo() { if (currentFileName) { var parts = [currentFileName]; if (typeof currentFileSize === 'number') { parts.push(formatBytes(currentFileSize)); } fileInfoEl.textContent = parts.join(' \u00B7 '); fileInfoEl.classList.add('jm-hfv-file-info--active'); return; } if (sourceEl.value.length > 0) { fileInfoEl.textContent = 'Pasted HTML'; } else { fileInfoEl.textContent = 'No file loaded'; } fileInfoEl.classList.remove('jm-hfv-file-info--active'); } function updateSourceStatusForCurrentState() { if (sourceEl.value.length === 0) { setSourceStatus('empty', 'No source'); return; } if (sourceDirty) { setSourceStatus('dirty', 'Source changed'); } else { setSourceStatus('ok', 'Up to date'); } } function cancelPending() { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = null; } } function copyText(text, successMessage, failureMessage) { if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') { navigator.clipboard.writeText(text).then(function () { setStatus(successMessage, 'success'); }).catch(function () { legacyCopy(text, successMessage, failureMessage); }); return; } legacyCopy(text, successMessage, failureMessage); } function legacyCopy(text, successMessage, failureMessage) { var ta = null; try { ta = document.createElement('textarea'); ta.value = text; ta.setAttribute('readonly', 'readonly'); ta.style.position = 'fixed'; ta.style.top = '-1000px'; ta.style.left = '-1000px'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); ta.setSelectionRange(0, ta.value.length); var ok = document.execCommand('copy'); document.body.removeChild(ta); ta = null; setStatus(ok ? successMessage : failureMessage, ok ? 'success' : 'error'); } catch (e) { if (ta && ta.parentNode) { ta.parentNode.removeChild(ta); } setStatus(failureMessage, 'error'); } } function downloadBlob(filename, content, mime) { var url = null; try { var blob = new Blob([content], { type: mime }); url = URL.createObjectURL(blob); var link = document.createElement('a'); link.href = url; link.download = filename; link.rel = 'noopener'; link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link); setTimeout(function () { try { URL.revokeObjectURL(url); } catch (e) { /* ignore */ } }, 1000); return true; } catch (e) { if (url) { try { URL.revokeObjectURL(url); } catch (e2) { /* ignore */ } } return false; } } /* ------------------------- Preview engine ------------------------- */ var PREVIEW_CSP = "default-src 'none'; " + "script-src 'none'; " + "connect-src 'none'; " + "object-src 'none'; " + "base-uri 'none'; " + "form-action 'none'; " + "frame-src 'none'; " + "img-src data: blob:; " + "media-src data: blob:; " + "font-src data:; " + "style-src 'unsafe-inline' data:;"; function stripDangerousCss(css) { if (!css) { return ''; } var out = String(css); // Remove @import rules (would attempt external stylesheet loads). out = out.replace(/@import[^;]*;?/gi, ''); // Neutralize external url() references inside CSS. out = out.replace(/url\s*\(\s*(['"]?)\s*(?:https?:|\/\/|data:text\/html)[^)]*\1\s*\)/gi, 'url("")'); // Remove expression() and javascript: in CSS (legacy IE exploits, safety belt). out = out.replace(/expression\s*\(/gi, 'disabled('); out = out.replace(/javascript\s*:/gi, 'disabled:'); return out; } function sanitizeSource(source) { var DOMPurify = window.DOMPurify; if (!DOMPurify || typeof DOMPurify.sanitize !== 'function') { return null; } var clean = DOMPurify.sanitize(source, { FORBID_TAGS: [ 'script', 'iframe', 'object', 'embed', 'base', 'meta', 'link', 'noscript', 'template', 'applet', 'frame', 'frameset', 'param' ], FORBID_ATTR: ['srcdoc', 'formaction', 'xlink:href'], ALLOW_DATA_ATTR: true, ALLOW_UNKNOWN_PROTOCOLS: false, WHOLE_DOCUMENT: false, RETURN_TRUSTED_TYPE: false }); return (typeof clean === 'string') ? clean : null; } function buildPreviewDocument(source) { var clean = sanitizeSource(source); if (clean === null) { return null; } var doc; try { doc = new DOMParser().parseFromString(clean, 'text/html'); } catch (e) { return null; } if (!doc || !doc.body) { doc = null; return buildPreviewFromFragment(clean); } // Collect ' + '' + bodyContent + ''; } function renderPreview(source) { if (!engineReady || !window.DOMPurify) { setStatus('Unable to initialize the preview. The HTML sanitizer is not available.', 'error'); return; } if (source.trim() === '') { lastRenderedSource = ''; previewFrame.removeAttribute('srcdoc'); previewPanel.classList.add('jm-hfv-preview-panel--empty'); setPreviewStatus('', 'No preview yet'); sourceDirty = false; updateSourceStatusForCurrentState(); setStatus('Preview cleared. Load or enter HTML source to see a preview.', 'info'); return; } var previewDoc = buildPreviewDocument(source); if (!previewDoc) { setStatus('Unable to generate a safe preview from the current source.', 'error'); setPreviewStatus('error', 'Preview failed'); return; } try { previewFrame.srcdoc = previewDoc; } catch (e) { setStatus('Unable to generate a safe preview from the current source.', 'error'); setPreviewStatus('error', 'Preview failed'); return; } lastRenderedSource = source; previewPanel.classList.remove('jm-hfv-preview-panel--empty'); sourceDirty = false; updateSourceStatusForCurrentState(); setPreviewStatus('ok', 'Up to date'); setStatus('Preview updated successfully.', 'success'); } function schedulePreview() { cancelPending(); debounceTimer = setTimeout(function () { debounceTimer = null; renderPreview(sourceEl.value); }, DEBOUNCE_MS); } function onSourceChanged() { updateCounts(); updateFileInfo(); if (sourceEl.value.length === 0) { sourceDirty = false; updateSourceStatusForCurrentState(); if (autoPreviewChk.checked) { schedulePreview(); } else { setStatus('Source changed. Refresh Preview to display the latest version.', 'info'); } return; } if (lastRenderedSource !== null && sourceEl.value === lastRenderedSource) { sourceDirty = false; } else { sourceDirty = true; } updateSourceStatusForCurrentState(); if (autoPreviewChk.checked) { setPreviewStatus('stale', 'Updating\u2026'); schedulePreview(); } else { setPreviewStatus('stale', 'Source changed'); setStatus('Source changed. Refresh Preview to display the latest version.', 'info'); } } /* ------------------------- Engine loading ------------------------- */ function loadScript(url) { return new Promise(function (resolve) { var s = document.createElement('script'); s.src = url; s.async = true; s.crossOrigin = 'anonymous'; s.onload = function () { resolve(true); }; s.onerror = function () { resolve(false); }; document.head.appendChild(s); }); } function loadFirstAvailable(urls) { var i = 0; function attempt() { if (i >= urls.length) { return Promise.resolve(false); } var url = urls[i++]; return loadScript(url).then(function (ok) { if (ok && window.DOMPurify && typeof window.DOMPurify.sanitize === 'function') { return true; } return attempt(); }); } return attempt(); } /* --------------------------- Event wiring ------------------------- */ sourceEl.addEventListener('input', onSourceChanged); uploadBtn.addEventListener('click', function () { fileInput.click(); }); fileInput.addEventListener('change', function () { var file = fileInput.files && fileInput.files[0]; if (!file) { return; } if (typeof file.size === 'number' && file.size > MAX_FILE_SIZE) { fileInput.value = ''; setStatus('File exceeds the maximum permitted size of ' + formatBytes(MAX_FILE_SIZE) + '. The previous source was kept.', 'error'); return; } var name = file.name || ''; if (name && !/\.(html?|txt)$/i.test(name)) { fileInput.value = ''; setStatus('Unsupported file type. Please choose a .html, .htm, or .txt file. The previous source was kept.', 'error'); return; } var finish = function (text) { fileInput.value = ''; // Strip a leading UTF-8 BOM if present. if (typeof text === 'string' && text.charCodeAt(0) === 0xFEFF) { text = text.slice(1); } sourceEl.value = (typeof text === 'string') ? text : String(text || ''); currentFileName = name || null; currentFileSize = (typeof file.size === 'number') ? file.size : null; sourceDirty = true; updateCounts(); updateFileInfo(); updateSourceStatusForCurrentState(); if (autoPreviewChk.checked) { schedulePreview(); } else { setPreviewStatus('stale', 'Source changed'); } setStatus('HTML file loaded successfully: ' + (name || 'unnamed'), 'success'); }; var fail = function () { fileInput.value = ''; setStatus('Unable to read the selected file. The previous source was kept.', 'error'); }; if (typeof file.text === 'function') { file.text().then(finish).catch(fail); } else if (typeof FileReader !== 'undefined') { var reader = new FileReader(); reader.onload = function () { finish(reader.result == null ? '' : String(reader.result)); }; reader.onerror = fail; try { reader.readAsText(file, 'utf-8'); } catch (e) { fail(); } } else { fail(); } }); exampleBtn.addEventListener('click', function () { sourceEl.value = EXAMPLE_HTML; currentFileName = null; currentFileSize = null; sourceDirty = true; updateCounts(); updateFileInfo(); updateSourceStatusForCurrentState(); if (autoPreviewChk.checked) { schedulePreview(); } else { setPreviewStatus('stale', 'Source changed'); } setStatus('Example loaded.', 'success'); }); pasteBtn.addEventListener('click', function () { if (!navigator.clipboard || typeof navigator.clipboard.readText !== 'function') { setStatus('Clipboard access is not available in this browser. Paste manually into the HTML Source editor.', 'error'); return; } navigator.clipboard.readText().then(function (text) { var str = (typeof text === 'string') ? text : ''; // Insert at cursor position. var start = sourceEl.selectionStart; var end = sourceEl.selectionEnd; if (typeof start === 'number' && typeof end === 'number' && start <= end) { sourceEl.value = sourceEl.value.slice(0, start) + str + sourceEl.value.slice(end); var pos = start + str.length; try { sourceEl.selectionStart = sourceEl.selectionEnd = pos; } catch (e) { /* ignore */ } } else { sourceEl.value = str; } sourceEl.focus(); onSourceChanged(); setStatus('HTML pasted from clipboard.', 'success'); }).catch(function () { setStatus('Clipboard access denied. Paste manually into the HTML Source editor.', 'error'); }); }); clearBtn.addEventListener('click', function () { cancelPending(); sourceEl.value = ''; currentFileName = null; currentFileSize = null; sourceDirty = false; lastRenderedSource = ''; previewFrame.removeAttribute('srcdoc'); previewPanel.classList.add('jm-hfv-preview-panel--empty'); setPreviewStatus('', 'No preview yet'); updateCounts(); updateFileInfo(); updateSourceStatusForCurrentState(); setStatus('Input cleared.', 'success'); }); copyBtn.addEventListener('click', function () { var text = sourceEl.value; if (text === '') { setStatus('There is no source code to copy.', 'info'); return; } copyText( text, 'HTML source copied successfully.', 'Could not copy the HTML source. Select it manually and copy.' ); }); downloadBtn.addEventListener('click', function () { var text = sourceEl.value; if (text === '') { setStatus('There is no source code to download.', 'info'); return; } var filename = safeFilename(currentFileName); var ok = downloadBlob(filename, text, 'text/html;charset=utf-8'); if (ok) { setStatus('HTML download started.', 'success'); } else { setStatus('Unable to download the HTML in this browser.', 'error'); } }); refreshBtn.addEventListener('click', function () { cancelPending(); renderPreview(sourceEl.value); }); viewModeSel.addEventListener('change', function () { var mode = viewModeSel.value; if (mode !== 'split' && mode !== 'source' && mode !== 'preview') { mode = 'split'; viewModeSel.value = 'split'; } workspaceEl.setAttribute('data-mode', mode); }); autoPreviewChk.addEventListener('change', function () { if (autoPreviewChk.checked) { cancelPending(); renderPreview(sourceEl.value); } }); /* ----------------------------- Startup ---------------------------- */ sourceEl.setAttribute( 'placeholder', '\n\n\n \n \n \n\n\n

Hello, world!

\n

A sample link inside a paragraph.

\n\n' ); updateCounts(); updateFileInfo(); updateSourceStatusForCurrentState(); setPreviewStatus('', 'No preview yet'); setStatus('Loading the safe preview engine\u2026', 'info'); loadFirstAvailable(DOMPURIFY_URLS).then(function (ok) { if (!ok) { engineReady = false; setStatus('Unable to initialize the preview. The HTML sanitizer could not be loaded. Check your connection and reload the page.', 'error'); return; } engineReady = true; setStatus('Ready. Upload, paste, or type HTML to preview it safely.', 'info'); }); })();