Free Online HTML Viewer – Live Preview<\/title>\n<meta name=\"description\" content=\"Free online HTML viewer. Paste your HTML code and see live preview instantly. No signup required.\">\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');\n\n :root {\n --bg: #f1f5f9;\n --card: #ffffff;\n --dark: #0f172a;\n --dark2: #1e293b;\n --border: #e2e8f0;\n --text: #334155;\n --text-dim: #94a3b8;\n --accent: #3b82f6;\n --accent-hover: #2563eb;\n --green: #22c55e;\n --red: #ef4444;\n --purple: #8b5cf6;\n --radius: 12px;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Inter', -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n }\n\n .hv-header {\n background: var(--dark);\n padding: 16px 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .hv-logo {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .hv-logo-icon {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: linear-gradient(135deg, var(--accent), var(--purple));\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 14px;\n font-weight: 700;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .hv-logo-text {\n font-weight: 800;\n font-size: 18px;\n color: #f8fafc;\n letter-spacing: -0.5px;\n }\n\n .hv-badge {\n font-size: 10px;\n color: var(--text-dim);\n background: rgba(255,255,255,0.08);\n padding: 3px 10px;\n border-radius: 20px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .hv-actions {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n }\n\n .hv-btn {\n font-family: 'Inter', sans-serif;\n font-size: 13px;\n font-weight: 600;\n padding: 8px 18px;\n border-radius: 8px;\n border: none;\n cursor: pointer;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .hv-btn-ghost {\n background: rgba(255,255,255,0.06);\n color: #cbd5e1;\n border: 1px solid rgba(255,255,255,0.1);\n }\n .hv-btn-ghost:hover { background: rgba(255,255,255,0.12); color: #f8fafc; }\n\n .hv-btn-danger {\n background: rgba(239,68,68,0.1);\n color: var(--red);\n border: 1px solid rgba(239,68,68,0.2);\n }\n .hv-btn-danger:hover { background: rgba(239,68,68,0.2); }\n\n .hv-btn-primary {\n background: var(--accent);\n color: #fff;\n }\n .hv-btn-primary:hover {\n background: var(--accent-hover);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(59,130,246,0.4);\n }\n\n .hv-container {\n max-width: 1200px;\n margin: 24px auto;\n padding: 0 20px;\n }\n\n .hv-card {\n background: var(--card);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n overflow: hidden;\n box-shadow: 0 4px 24px rgba(0,0,0,0.06);\n }\n\n .hv-tabs {\n display: flex;\n background: #f8fafc;\n border-bottom: 1px solid var(--border);\n }\n\n .hv-tab {\n font-family: 'Inter', sans-serif;\n padding: 12px 28px;\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n border: none;\n background: transparent;\n color: var(--text-dim);\n cursor: pointer;\n border-bottom: 3px solid transparent;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .hv-tab:hover { color: var(--text); }\n .hv-tab.active { color: var(--dark); border-bottom-color: var(--accent); }\n\n .hv-tab-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--text-dim);\n }\n .hv-tab.active .hv-tab-dot {\n background: var(--green);\n box-shadow: 0 0 6px var(--green);\n }\n\n .hv-tab-spacer { flex: 1; }\n\n .hv-char-count {\n padding: 12px 20px;\n font-size: 12px;\n color: var(--text-dim);\n font-family: 'JetBrains Mono', monospace;\n display: flex;\n align-items: center;\n }\n\n .hv-editor-wrap {\n display: flex;\n min-height: 400px;\n }\n\n .hv-line-numbers {\n padding: 20px 12px 20px 16px;\n text-align: right;\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n line-height: 1.7;\n color: #cbd5e1;\n user-select: none;\n background: #f8fafc;\n border-right: 1px solid var(--border);\n min-width: 52px;\n overflow: hidden;\n flex-shrink: 0;\n }\n\n .hv-textarea {\n flex: 1;\n padding: 20px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n line-height: 1.7;\n color: var(--dark);\n background: #fff;\n border: none;\n outline: none;\n resize: vertical;\n white-space: pre;\n overflow: auto;\n tab-size: 2;\n -moz-tab-size: 2;\n min-height: 400px;\n width: 100%;\n }\n .hv-textarea::placeholder { color: #cbd5e1; }\n\n .hv-preview-wrap {\n min-height: 400px;\n background: #fff;\n display: none;\n }\n\n .hv-preview-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n flex-direction: column;\n gap: 16px;\n }\n\n .hv-preview-empty-icon {\n width: 64px;\n height: 64px;\n border-radius: 16px;\n background: var(--bg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n color: #cbd5e1;\n }\n .hv-preview-empty p { color: var(--text-dim); font-size: 15px; }\n .hv-preview-empty strong { color: var(--text); }\n\n .hv-iframe {\n width: 100%;\n min-height: 400px;\n border: none;\n display: none;\n }\n\n .hv-footer {\n padding: 10px 20px;\n background: #f8fafc;\n border-top: 1px solid var(--border);\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: var(--text-dim);\n font-family: 'JetBrains Mono', monospace;\n }\n\n .hv-toast {\n position: fixed;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%) translateY(20px);\n background: var(--dark);\n color: #f8fafc;\n padding: 10px 24px;\n border-radius: 10px;\n font-size: 13px;\n font-weight: 500;\n font-family: 'Inter', sans-serif;\n box-shadow: 0 8px 32px rgba(0,0,0,0.25);\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n z-index: 9999;\n }\n .hv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }\n\n .hv-info {\n max-width: 1200px;\n margin: 24px auto;\n padding: 0 20px;\n }\n\n .hv-info-card {\n background: var(--card);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n padding: 32px;\n box-shadow: 0 4px 24px rgba(0,0,0,0.06);\n }\n .hv-info-card h2 { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 16px; }\n .hv-info-card p { color: var(--text); line-height: 1.7; margin-bottom: 12px; font-size: 15px; }\n\n .hv-steps {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n margin-top: 20px;\n }\n\n .hv-step {\n background: var(--bg);\n border-radius: 10px;\n padding: 20px;\n text-align: center;\n }\n\n .hv-step-num {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--accent);\n color: #fff;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 15px;\n margin-bottom: 12px;\n }\n .hv-step h3 { font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }\n .hv-step p { font-size: 13px; color: var(--text-dim); margin: 0; }\n\n @media (max-width: 600px) {\n .hv-header { padding: 12px 16px; }\n .hv-container { padding: 0 12px; margin: 16px auto; }\n .hv-textarea { font-size: 12px; padding: 14px; min-height: 280px; }\n .hv-editor-wrap { min-height: 280px; }\n .hv-btn { padding: 6px 12px; font-size: 12px; }\n .hv-logo-text { font-size: 15px; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"hv-header\">\n <div class=\"hv-logo\">\n <div class=\"hv-logo-icon\"><\/><\/div>\n <span class=\"hv-logo-text\">HTML Viewer<\/span>\n <span class=\"hv-badge\">Free Online Tool<\/span>\n <\/div>\n <div class=\"hv-actions\">\n <button class=\"hv-btn hv-btn-danger\" id=\"btnClear\">✕ Clear<\/button>\n <button class=\"hv-btn hv-btn-ghost\" id=\"btnCopy\">⎘ Copy<\/button>\n <button class=\"hv-btn hv-btn-ghost\" id=\"btnSample\">☆ Sample<\/button>\n <button class=\"hv-btn hv-btn-primary\" id=\"btnRun\">▶ Run<\/button>\n <\/div>\n<\/div>\n\n<div class=\"hv-container\">\n <div class=\"hv-card\">\n <div class=\"hv-tabs\">\n <button class=\"hv-tab active\" id=\"tabEditor\"><span class=\"hv-tab-dot\"><\/span> Editor<\/button>\n <button class=\"hv-tab\" id=\"tabPreview\"><span class=\"hv-tab-dot\"><\/span> Preview<\/button>\n <div class=\"hv-tab-spacer\"><\/div>\n <div class=\"hv-char-count\" id=\"charCount\">0 chars<\/div>\n <\/div>\n <div class=\"hv-editor-wrap\" id=\"editorPane\">\n <div class=\"hv-line-numbers\" id=\"lineNums\">1<\/div>\n <textarea class=\"hv-textarea\" id=\"codeEditor\" placeholder=\"Type or paste your HTML code here...\"><\/textarea>\n <\/div>\n <div class=\"hv-preview-wrap\" id=\"previewPane\">\n <div class=\"hv-preview-empty\" id=\"previewEmpty\">\n <div class=\"hv-preview-empty-icon\">◇<\/div>\n <p>Write HTML in the editor, then hit <strong>▶ Run<\/strong><\/p>\n <\/div>\n <iframe class=\"hv-iframe\" id=\"previewFrame\" sandbox=\"allow-scripts allow-modals\"><\/iframe>\n <\/div>\n <div class=\"hv-footer\">\n <span>Ctrl + Enter to run<\/span>\n <span>HTML • UTF-8<\/span>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"hv-info\">\n <div class=\"hv-info-card\">\n <h2>How to Use This Free HTML Viewer<\/h2>\n <p>This free online HTML viewer lets you write or paste any HTML, CSS, and JavaScript code and instantly see a live preview. No signup, no downloads, no ads.<\/p>\n <div class=\"hv-steps\">\n <div class=\"hv-step\">\n <div class=\"hv-step-num\">1<\/div>\n <h3>Write or Paste<\/h3>\n <p>Type your HTML code or paste it into the editor<\/p>\n <\/div>\n <div class=\"hv-step\">\n <div class=\"hv-step-num\">2<\/div>\n <h3>Click Run<\/h3>\n <p>Hit the Run button or press Ctrl+Enter<\/p>\n <\/div>\n <div class=\"hv-step\">\n <div class=\"hv-step-num\">3<\/div>\n <h3>See Preview<\/h3>\n <p>Your HTML renders instantly in the preview pane<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"hv-toast\" id=\"hvToast\"><\/div>\n\n<script>\n(function() {\n var editor = document.getElementById('codeEditor');\n var frame = document.getElementById('previewFrame');\n var editorPane = document.getElementById('editorPane');\n var previewPane = document.getElementById('previewPane');\n var previewEmpty = document.getElementById('previewEmpty');\n var tabEditorBtn = document.getElementById('tabEditor');\n var tabPreviewBtn = document.getElementById('tabPreview');\n var lineNums = document.getElementById('lineNums');\n var charCount = document.getElementById('charCount');\n var toastEl = document.getElementById('hvToast');\n var toastTimer = null;\n\n function toast(msg) {\n toastEl.textContent = msg;\n toastEl.classList.add('show');\n clearTimeout(toastTimer);\n toastTimer = setTimeout(function() { toastEl.classList.remove('show'); }, 2000);\n }\n\n function switchTab(tab) {\n if (tab === 'editor') {\n editorPane.style.display = 'flex';\n previewPane.style.display = 'none';\n tabEditorBtn.classList.add('active');\n tabPreviewBtn.classList.remove('active');\n } else {\n editorPane.style.display = 'none';\n previewPane.style.display = 'block';\n tabPreviewBtn.classList.add('active');\n tabEditorBtn.classList.remove('active');\n }\n }\n\n function updateLines() {\n var n = editor.value.split('\\n').length;\n var h = '';\n for (var i = 1; i <= n; i++) h += i + '<br>';\n lineNums.innerHTML = h;\n }\n\n function updateCount() {\n charCount.textContent = editor.value.length.toLocaleString() + ' chars';\n }\n\n function runCode() {\n var code = editor.value;\n if (!code.trim()) { toast('Write some HTML first'); return; }\n frame.srcdoc = code;\n frame.style.display = 'block';\n previewEmpty.style.display = 'none';\n switchTab('preview');\n toast('Preview updated');\n }\n\n function clearAll() {\n editor.value = '';\n frame.srcdoc = '';\n frame.style.display = 'none';\n previewEmpty.style.display = 'flex';\n switchTab('editor');\n updateLines();\n updateCount();\n editor.focus();\n toast('Cleared');\n }\n\n function copyCode() {\n if (!editor.value.trim()) { toast('Nothing to copy'); return; }\n if (navigator.clipboard) {\n navigator.clipboard.writeText(editor.value).then(function() { toast('Copied'); });\n } else {\n editor.select();\n document.execCommand('copy');\n toast('Copied');\n }\n }\n\n function loadSample() {\n editor.value = '<!DOCTYPE html>\\n<html>\\n<head>\\n <style>\\n * { margin: 0; box-sizing: border-box; }\\n body {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background: linear-gradient(135deg, #667eea, #764ba2);\\n font-family: system-ui, sans-serif;\\n }\\n .card {\\n background: rgba(255,255,255,0.95);\\n border-radius: 16px;\\n padding: 40px;\\n text-align: center;\\n max-width: 380px;\\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\\n }\\n .card h1 {\\n font-size: 28px;\\n color: #1e293b;\\n margin-bottom: 8px;\\n }\\n .card p {\\n color: #64748b;\\n line-height: 1.6;\\n margin-bottom: 20px;\\n }\\n .btn {\\n padding: 12px 28px;\\n background: linear-gradient(135deg, #667eea, #764ba2);\\n color: #fff;\\n border: none;\\n border-radius: 8px;\\n font-size: 14px;\\n font-weight: 600;\\n cursor: pointer;\\n }\\n <\/style>\\n<\/head>\\n<body>\\n <div class=\"card\">\\n <h1>Hello World!<\/h1>\\n <p>A sample card with gradient styling and shadow effects.<\/p>\\n <button class=\"btn\" onclick=\"this.textContent=\\'It works!\\'\">Click Me<\/button>\\n <\/div>\\n<\/body>\\n<\/html>';\n updateLines();\n updateCount();\n runCode();\n }\n\n document.getElementById('btnRun').addEventListener('click', runCode);\n document.getElementById('btnClear').addEventListener('click', clearAll);\n document.getElementById('btnCopy').addEventListener('click', copyCode);\n document.getElementById('btnSample').addEventListener('click', loadSample);\n tabEditorBtn.addEventListener('click', function() { switchTab('editor'); });\n tabPreviewBtn.addEventListener('click', function() { switchTab('preview'); });\n\n editor.addEventListener('input', function() { updateLines(); updateCount(); });\n editor.addEventListener('scroll', function() { lineNums.scrollTop = editor.scrollTop; });\n\n editor.addEventListener('keydown', function(e) {\n if (e.key === 'Tab') {\n e.preventDefault();\n var s = editor.selectionStart;\n var end = editor.selectionEnd;\n editor.value = editor.value.substring(0, s) + ' ' + editor.value.substring(end);\n editor.selectionStart = editor.selectionEnd = s + 2;\n updateLines();\n }\n if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {\n e.preventDefault();\n runCode();\n }\n });\n\n frame.addEventListener('load', function() {\n try {\n var h = frame.contentDocument.documentElement.scrollHeight;\n if (h > 50) frame.style.height = Math.min(h + 30, 700) + 'px';\n } catch(e) {}\n });\n\n updateLines();\n updateCount();\n})();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Free Online HTML Viewer – Live Preview <\/> HTML Viewer Free Online Tool ✕ Clear ⎘ Copy ☆ Sample ▶ Run Editor Preview 0 chars 1 ◇ Write HTML in the editor, then hit ▶ Run Ctrl + Enter to run HTML • UTF-8 How to Use This Free HTML Viewer This free online HTML…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-325","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"taxonomy_info":{"category":[{"value":1,"label":"Uncategorized"}]},"featured_image_src_large":false,"author_info":{"display_name":"gptips","author_link":"https:\/\/bottleneckcalculatoronline.com\/tips\/author\/gptips\/"},"comment_info":0,"category_info":[{"term_id":1,"name":"Uncategorized","slug":"uncategorized","term_group":0,"term_taxonomy_id":1,"taxonomy":"category","description":"","parent":0,"count":41,"filter":"raw","cat_ID":1,"category_count":41,"category_description":"","cat_name":"Uncategorized","category_nicename":"uncategorized","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/posts\/325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/comments?post=325"}],"version-history":[{"count":2,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/posts\/325\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":325,"date":"2026-05-06T17:04:11","date_gmt":"2026-05-06T17:04:11","guid":{"rendered":"https:\/\/bottleneckcalculatoronline.com\/tips\/?p=325"},"modified":"2026-05-06T17:27:26","modified_gmt":"2026-05-06T17:27:26","slug":"html-viewer","status":"publish","type":"post","link":"https:\/\/bottleneckcalculatoronline.com\/tips\/html-viewer\/","title":{"rendered":"HTML Viewer"},"content":{"rendered":"\n\n\n\n\n\nFree Online HTML Viewer – Live Preview<\/title>\n<meta name=\"description\" content=\"Free online HTML viewer. Paste your HTML code and see live preview instantly. No signup required.\">\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');\n\n :root {\n --bg: #f1f5f9;\n --card: #ffffff;\n --dark: #0f172a;\n --dark2: #1e293b;\n --border: #e2e8f0;\n --text: #334155;\n --text-dim: #94a3b8;\n --accent: #3b82f6;\n --accent-hover: #2563eb;\n --green: #22c55e;\n --red: #ef4444;\n --purple: #8b5cf6;\n --radius: 12px;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'Inter', -apple-system, sans-serif;\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n }\n\n .hv-header {\n background: var(--dark);\n padding: 16px 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .hv-logo {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .hv-logo-icon {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: linear-gradient(135deg, var(--accent), var(--purple));\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 14px;\n font-weight: 700;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .hv-logo-text {\n font-weight: 800;\n font-size: 18px;\n color: #f8fafc;\n letter-spacing: -0.5px;\n }\n\n .hv-badge {\n font-size: 10px;\n color: var(--text-dim);\n background: rgba(255,255,255,0.08);\n padding: 3px 10px;\n border-radius: 20px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .hv-actions {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n }\n\n .hv-btn {\n font-family: 'Inter', sans-serif;\n font-size: 13px;\n font-weight: 600;\n padding: 8px 18px;\n border-radius: 8px;\n border: none;\n cursor: pointer;\n transition: all 0.2s;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .hv-btn-ghost {\n background: rgba(255,255,255,0.06);\n color: #cbd5e1;\n border: 1px solid rgba(255,255,255,0.1);\n }\n .hv-btn-ghost:hover { background: rgba(255,255,255,0.12); color: #f8fafc; }\n\n .hv-btn-danger {\n background: rgba(239,68,68,0.1);\n color: var(--red);\n border: 1px solid rgba(239,68,68,0.2);\n }\n .hv-btn-danger:hover { background: rgba(239,68,68,0.2); }\n\n .hv-btn-primary {\n background: var(--accent);\n color: #fff;\n }\n .hv-btn-primary:hover {\n background: var(--accent-hover);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(59,130,246,0.4);\n }\n\n .hv-container {\n max-width: 1200px;\n margin: 24px auto;\n padding: 0 20px;\n }\n\n .hv-card {\n background: var(--card);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n overflow: hidden;\n box-shadow: 0 4px 24px rgba(0,0,0,0.06);\n }\n\n .hv-tabs {\n display: flex;\n background: #f8fafc;\n border-bottom: 1px solid var(--border);\n }\n\n .hv-tab {\n font-family: 'Inter', sans-serif;\n padding: 12px 28px;\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n border: none;\n background: transparent;\n color: var(--text-dim);\n cursor: pointer;\n border-bottom: 3px solid transparent;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .hv-tab:hover { color: var(--text); }\n .hv-tab.active { color: var(--dark); border-bottom-color: var(--accent); }\n\n .hv-tab-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--text-dim);\n }\n .hv-tab.active .hv-tab-dot {\n background: var(--green);\n box-shadow: 0 0 6px var(--green);\n }\n\n .hv-tab-spacer { flex: 1; }\n\n .hv-char-count {\n padding: 12px 20px;\n font-size: 12px;\n color: var(--text-dim);\n font-family: 'JetBrains Mono', monospace;\n display: flex;\n align-items: center;\n }\n\n .hv-editor-wrap {\n display: flex;\n min-height: 400px;\n }\n\n .hv-line-numbers {\n padding: 20px 12px 20px 16px;\n text-align: right;\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n line-height: 1.7;\n color: #cbd5e1;\n user-select: none;\n background: #f8fafc;\n border-right: 1px solid var(--border);\n min-width: 52px;\n overflow: hidden;\n flex-shrink: 0;\n }\n\n .hv-textarea {\n flex: 1;\n padding: 20px;\n font-family: 'JetBrains Mono', monospace;\n font-size: 13px;\n line-height: 1.7;\n color: var(--dark);\n background: #fff;\n border: none;\n outline: none;\n resize: vertical;\n white-space: pre;\n overflow: auto;\n tab-size: 2;\n -moz-tab-size: 2;\n min-height: 400px;\n width: 100%;\n }\n .hv-textarea::placeholder { color: #cbd5e1; }\n\n .hv-preview-wrap {\n min-height: 400px;\n background: #fff;\n display: none;\n }\n\n .hv-preview-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n flex-direction: column;\n gap: 16px;\n }\n\n .hv-preview-empty-icon {\n width: 64px;\n height: 64px;\n border-radius: 16px;\n background: var(--bg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n color: #cbd5e1;\n }\n .hv-preview-empty p { color: var(--text-dim); font-size: 15px; }\n .hv-preview-empty strong { color: var(--text); }\n\n .hv-iframe {\n width: 100%;\n min-height: 400px;\n border: none;\n display: none;\n }\n\n .hv-footer {\n padding: 10px 20px;\n background: #f8fafc;\n border-top: 1px solid var(--border);\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: var(--text-dim);\n font-family: 'JetBrains Mono', monospace;\n }\n\n .hv-toast {\n position: fixed;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%) translateY(20px);\n background: var(--dark);\n color: #f8fafc;\n padding: 10px 24px;\n border-radius: 10px;\n font-size: 13px;\n font-weight: 500;\n font-family: 'Inter', sans-serif;\n box-shadow: 0 8px 32px rgba(0,0,0,0.25);\n opacity: 0;\n pointer-events: none;\n transition: all 0.3s;\n z-index: 9999;\n }\n .hv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }\n\n .hv-info {\n max-width: 1200px;\n margin: 24px auto;\n padding: 0 20px;\n }\n\n .hv-info-card {\n background: var(--card);\n border-radius: var(--radius);\n border: 1px solid var(--border);\n padding: 32px;\n box-shadow: 0 4px 24px rgba(0,0,0,0.06);\n }\n .hv-info-card h2 { font-size: 20px; font-weight: 800; color: var(--dark); margin-bottom: 16px; }\n .hv-info-card p { color: var(--text); line-height: 1.7; margin-bottom: 12px; font-size: 15px; }\n\n .hv-steps {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 16px;\n margin-top: 20px;\n }\n\n .hv-step {\n background: var(--bg);\n border-radius: 10px;\n padding: 20px;\n text-align: center;\n }\n\n .hv-step-num {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--accent);\n color: #fff;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 15px;\n margin-bottom: 12px;\n }\n .hv-step h3 { font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }\n .hv-step p { font-size: 13px; color: var(--text-dim); margin: 0; }\n\n @media (max-width: 600px) {\n .hv-header { padding: 12px 16px; }\n .hv-container { padding: 0 12px; margin: 16px auto; }\n .hv-textarea { font-size: 12px; padding: 14px; min-height: 280px; }\n .hv-editor-wrap { min-height: 280px; }\n .hv-btn { padding: 6px 12px; font-size: 12px; }\n .hv-logo-text { font-size: 15px; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"hv-header\">\n <div class=\"hv-logo\">\n <div class=\"hv-logo-icon\"><\/><\/div>\n <span class=\"hv-logo-text\">HTML Viewer<\/span>\n <span class=\"hv-badge\">Free Online Tool<\/span>\n <\/div>\n <div class=\"hv-actions\">\n <button class=\"hv-btn hv-btn-danger\" id=\"btnClear\">✕ Clear<\/button>\n <button class=\"hv-btn hv-btn-ghost\" id=\"btnCopy\">⎘ Copy<\/button>\n <button class=\"hv-btn hv-btn-ghost\" id=\"btnSample\">☆ Sample<\/button>\n <button class=\"hv-btn hv-btn-primary\" id=\"btnRun\">▶ Run<\/button>\n <\/div>\n<\/div>\n\n<div class=\"hv-container\">\n <div class=\"hv-card\">\n <div class=\"hv-tabs\">\n <button class=\"hv-tab active\" id=\"tabEditor\"><span class=\"hv-tab-dot\"><\/span> Editor<\/button>\n <button class=\"hv-tab\" id=\"tabPreview\"><span class=\"hv-tab-dot\"><\/span> Preview<\/button>\n <div class=\"hv-tab-spacer\"><\/div>\n <div class=\"hv-char-count\" id=\"charCount\">0 chars<\/div>\n <\/div>\n <div class=\"hv-editor-wrap\" id=\"editorPane\">\n <div class=\"hv-line-numbers\" id=\"lineNums\">1<\/div>\n <textarea class=\"hv-textarea\" id=\"codeEditor\" placeholder=\"Type or paste your HTML code here...\"><\/textarea>\n <\/div>\n <div class=\"hv-preview-wrap\" id=\"previewPane\">\n <div class=\"hv-preview-empty\" id=\"previewEmpty\">\n <div class=\"hv-preview-empty-icon\">◇<\/div>\n <p>Write HTML in the editor, then hit <strong>▶ Run<\/strong><\/p>\n <\/div>\n <iframe class=\"hv-iframe\" id=\"previewFrame\" sandbox=\"allow-scripts allow-modals\"><\/iframe>\n <\/div>\n <div class=\"hv-footer\">\n <span>Ctrl + Enter to run<\/span>\n <span>HTML • UTF-8<\/span>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"hv-info\">\n <div class=\"hv-info-card\">\n <h2>How to Use This Free HTML Viewer<\/h2>\n <p>This free online HTML viewer lets you write or paste any HTML, CSS, and JavaScript code and instantly see a live preview. No signup, no downloads, no ads.<\/p>\n <div class=\"hv-steps\">\n <div class=\"hv-step\">\n <div class=\"hv-step-num\">1<\/div>\n <h3>Write or Paste<\/h3>\n <p>Type your HTML code or paste it into the editor<\/p>\n <\/div>\n <div class=\"hv-step\">\n <div class=\"hv-step-num\">2<\/div>\n <h3>Click Run<\/h3>\n <p>Hit the Run button or press Ctrl+Enter<\/p>\n <\/div>\n <div class=\"hv-step\">\n <div class=\"hv-step-num\">3<\/div>\n <h3>See Preview<\/h3>\n <p>Your HTML renders instantly in the preview pane<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<div class=\"hv-toast\" id=\"hvToast\"><\/div>\n\n<script>\n(function() {\n var editor = document.getElementById('codeEditor');\n var frame = document.getElementById('previewFrame');\n var editorPane = document.getElementById('editorPane');\n var previewPane = document.getElementById('previewPane');\n var previewEmpty = document.getElementById('previewEmpty');\n var tabEditorBtn = document.getElementById('tabEditor');\n var tabPreviewBtn = document.getElementById('tabPreview');\n var lineNums = document.getElementById('lineNums');\n var charCount = document.getElementById('charCount');\n var toastEl = document.getElementById('hvToast');\n var toastTimer = null;\n\n function toast(msg) {\n toastEl.textContent = msg;\n toastEl.classList.add('show');\n clearTimeout(toastTimer);\n toastTimer = setTimeout(function() { toastEl.classList.remove('show'); }, 2000);\n }\n\n function switchTab(tab) {\n if (tab === 'editor') {\n editorPane.style.display = 'flex';\n previewPane.style.display = 'none';\n tabEditorBtn.classList.add('active');\n tabPreviewBtn.classList.remove('active');\n } else {\n editorPane.style.display = 'none';\n previewPane.style.display = 'block';\n tabPreviewBtn.classList.add('active');\n tabEditorBtn.classList.remove('active');\n }\n }\n\n function updateLines() {\n var n = editor.value.split('\\n').length;\n var h = '';\n for (var i = 1; i <= n; i++) h += i + '<br>';\n lineNums.innerHTML = h;\n }\n\n function updateCount() {\n charCount.textContent = editor.value.length.toLocaleString() + ' chars';\n }\n\n function runCode() {\n var code = editor.value;\n if (!code.trim()) { toast('Write some HTML first'); return; }\n frame.srcdoc = code;\n frame.style.display = 'block';\n previewEmpty.style.display = 'none';\n switchTab('preview');\n toast('Preview updated');\n }\n\n function clearAll() {\n editor.value = '';\n frame.srcdoc = '';\n frame.style.display = 'none';\n previewEmpty.style.display = 'flex';\n switchTab('editor');\n updateLines();\n updateCount();\n editor.focus();\n toast('Cleared');\n }\n\n function copyCode() {\n if (!editor.value.trim()) { toast('Nothing to copy'); return; }\n if (navigator.clipboard) {\n navigator.clipboard.writeText(editor.value).then(function() { toast('Copied'); });\n } else {\n editor.select();\n document.execCommand('copy');\n toast('Copied');\n }\n }\n\n function loadSample() {\n editor.value = '<!DOCTYPE html>\\n<html>\\n<head>\\n <style>\\n * { margin: 0; box-sizing: border-box; }\\n body {\\n min-height: 100vh;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n background: linear-gradient(135deg, #667eea, #764ba2);\\n font-family: system-ui, sans-serif;\\n }\\n .card {\\n background: rgba(255,255,255,0.95);\\n border-radius: 16px;\\n padding: 40px;\\n text-align: center;\\n max-width: 380px;\\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\\n }\\n .card h1 {\\n font-size: 28px;\\n color: #1e293b;\\n margin-bottom: 8px;\\n }\\n .card p {\\n color: #64748b;\\n line-height: 1.6;\\n margin-bottom: 20px;\\n }\\n .btn {\\n padding: 12px 28px;\\n background: linear-gradient(135deg, #667eea, #764ba2);\\n color: #fff;\\n border: none;\\n border-radius: 8px;\\n font-size: 14px;\\n font-weight: 600;\\n cursor: pointer;\\n }\\n <\/style>\\n<\/head>\\n<body>\\n <div class=\"card\">\\n <h1>Hello World!<\/h1>\\n <p>A sample card with gradient styling and shadow effects.<\/p>\\n <button class=\"btn\" onclick=\"this.textContent=\\'It works!\\'\">Click Me<\/button>\\n <\/div>\\n<\/body>\\n<\/html>';\n updateLines();\n updateCount();\n runCode();\n }\n\n document.getElementById('btnRun').addEventListener('click', runCode);\n document.getElementById('btnClear').addEventListener('click', clearAll);\n document.getElementById('btnCopy').addEventListener('click', copyCode);\n document.getElementById('btnSample').addEventListener('click', loadSample);\n tabEditorBtn.addEventListener('click', function() { switchTab('editor'); });\n tabPreviewBtn.addEventListener('click', function() { switchTab('preview'); });\n\n editor.addEventListener('input', function() { updateLines(); updateCount(); });\n editor.addEventListener('scroll', function() { lineNums.scrollTop = editor.scrollTop; });\n\n editor.addEventListener('keydown', function(e) {\n if (e.key === 'Tab') {\n e.preventDefault();\n var s = editor.selectionStart;\n var end = editor.selectionEnd;\n editor.value = editor.value.substring(0, s) + ' ' + editor.value.substring(end);\n editor.selectionStart = editor.selectionEnd = s + 2;\n updateLines();\n }\n if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {\n e.preventDefault();\n runCode();\n }\n });\n\n frame.addEventListener('load', function() {\n try {\n var h = frame.contentDocument.documentElement.scrollHeight;\n if (h > 50) frame.style.height = Math.min(h + 30, 700) + 'px';\n } catch(e) {}\n });\n\n updateLines();\n updateCount();\n})();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Free Online HTML Viewer – Live Preview <\/> HTML Viewer Free Online Tool ✕ Clear ⎘ Copy ☆ Sample ▶ Run Editor Preview 0 chars 1 ◇ Write HTML in the editor, then hit ▶ Run Ctrl + Enter to run HTML • UTF-8 How to Use This Free HTML Viewer This free online HTML…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-325","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"taxonomy_info":{"category":[{"value":1,"label":"Uncategorized"}]},"featured_image_src_large":false,"author_info":{"display_name":"gptips","author_link":"https:\/\/bottleneckcalculatoronline.com\/tips\/author\/gptips\/"},"comment_info":0,"category_info":[{"term_id":1,"name":"Uncategorized","slug":"uncategorized","term_group":0,"term_taxonomy_id":1,"taxonomy":"category","description":"","parent":0,"count":41,"filter":"raw","cat_ID":1,"category_count":41,"category_description":"","cat_name":"Uncategorized","category_nicename":"uncategorized","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/posts\/325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/comments?post=325"}],"version-history":[{"count":2,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/posts\/325\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/posts\/325\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/media?parent=325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/categories?post=325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bottleneckcalculatoronline.com\/tips\/wp-json\/wp\/v2\/tags?post=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}