{"id":8307650,"date":"2025-06-19T10:12:50","date_gmt":"2025-06-19T07:12:50","guid":{"rendered":"https:\/\/elementor.com\/?p=8307650"},"modified":"2025-08-04T14:23:44","modified_gmt":"2025-08-04T14:23:44","slug":"html-viewer","status":"publish","type":"post","link":"https:\/\/elementor.com\/tools\/html-viewer\/","title":{"rendered":"HTML Online Viewer"},"content":{"rendered":"\t\t<div data-elementor-type=\"container\" data-elementor-id=\"8309758\" class=\"elementor elementor-8309758\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c75c9a9 e-flex e-con-boxed e-con e-parent\" data-id=\"4c75c9a9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7def40d7 elementor-widget elementor-widget-html\" data-id=\"7def40d7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    .html-viewer-app {\n        width: 100%;\n        max-width: 1280px;\n        margin: 0 auto;\n        padding: 60px 0 0;\n        background: transparent;\n        overflow: visible;\n        position: relative;\n    }\n\n    .copy-btn-container {\n        position: absolute;\n        top: -60px;\n        right: 0;\n        z-index: 100;\n    }\n\n    .copy-btn {\n        background-color: rgb(255, 255, 255);\n        color: black;\n        border: 1px solid #ddd;\n        padding: 8px 16px;\n        border-radius: 4px;\n        cursor: pointer;\n        font-size: 14px;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        transition: background-color 0.2s;\n        box-shadow: 0 0 10px rgba(0,0,0,0.1);\n    }\n\n    .format-btn {\n        background-color: #000;\n        color: white;\n        border: none;\n        padding: 12px 20px;\n        cursor: pointer;\n        font-size: 1.125rem;\n        font-weight: 500;\n        transition: all 0.2s;\n        pointer-events: all;\n        min-width: 11rem;\n        text-align: center;\n    }\n\n    .format-btn:is(:hover, :focus, :focus-visible, :active){\n        background-color: #545454;\n    }\n\n    #minifyBtn {\n        background-color: #ff7be5;\n        color: black;\n    }\n\n    #minifyBtn:is(:hover, :focus, :focus-visible, :active) {\n        background-color: #ffa8ee;\n    }\n\n    .reset-btn {\n        background: none;\n        border: none;\n        color: black;\n        text-decoration: underline;\n        font-size: 1rem;\n        cursor: pointer;\n        padding: 0;\n        margin-top: 12px;\n        transition: color 0.2s;\n    }\n\n    .reset-btn:is(:hover, :focus, :focus-visible, :active) {\n       background: none;\n       color: #545454;\n       text-decoration: underline;\n    }\n\n    .copy-btn:is(:hover, :focus, :focus-visible) {\n        background-color: #f6f6f6 !important;\n        color: black;\n    }\n\n    .main-content {\n        display: flex;\n        gap: 3vw;\n        height: 460px;\n        position: relative;\n        align-items: center;\n        justify-content: center;\n        flex-wrap: nowrap;\n        flex-direction: row;\n    }\n\n    .input-section, .output-section {\n        flex: 1;\n        min-width: 0;\n        max-width: 600px;\n        height: 460px;\n        display: flex;\n        flex-direction: column;\n        background: white;\n        border-radius: 8px;\n        overflow: hidden;\n    }\n\n    .section-header {\n        background-color: #05047E;\n        color: white;\n        padding: 12px 20px;\n        font-family: 'DM Sans';\n        font-weight: 400;\n        font-size: 1.125rem;\n    }\n\n    .textarea-container {\n        flex: 1;\n        position: relative;\n        background-color: #ffffff;\n        border: 1.5px solid #EBEBEB;\n    }\n\n    .output-container {\n        flex: 1;\n        position: relative;\n        background-color: #ffffff;\n        border: 1.5px solid #EBEBEB;\n        overflow: auto;\n    }\n\n    .line-numbers {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 40px;\n        height: 100%;\n        background-color: #EBEBEB;\n        border-right: 1px solid #dee2e6;\n        padding: 15px 0;\n        font-family: 'DM Sans';\n        font-size: 12px;\n        color: #6c757d;\n        text-align: center;\n        line-height: 1.5;\n        overflow: hidden;\n    }\n\n    .code-textarea {\n        width: 100%;\n        height: 100%;\n        border: none;\n        outline: none;\n        padding: 15px 15px 15px 50px;\n        font-family: 'Courier New', monospace;\n        font-size: 13px;\n        line-height: 1.5;\n        background-color: transparent;\n        resize: none;\n        color: #333;\n    }\n\n    .code-textarea::placeholder {\n        color: #adb5bd;\n        font-style: italic;\n    }\n\n    .output-iframe {\n        width: 100%;\n        height: 100%;\n        border: none;\n        background: white;\n    }\n\n    .output-code {\n        width: 100%;\n        height: 100%;\n        border: none;\n        outline: none;\n        padding: 15px;\n        font-family: 'Courier New', monospace;\n        font-size: 13px;\n        line-height: 1.5;\n        background-color: white;\n        resize: none;\n        color: #333;\n        overflow: auto;\n        white-space: pre;\n    }\n\n    .format-btn-container {\n        flex: 0 0 150px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .success-message {\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        background-color: #28a745;\n        color: white;\n        padding: 12px 20px;\n        border-radius: 4px;\n        font-size: 14px;\n        opacity: 0;\n        transform: translateX(100%);\n        transition: all 0.3s ease;\n        z-index: 1000;\n    }\n\n    .success-message.show {\n        opacity: 1;\n        transform: translateX(0);\n    }\n\n    .security-notice {\n        background-color: #fff3cd;\n        border: 1px solid #ffc107;\n        color: #856404;\n        padding: 8px 12px;\n        border-radius: 4px;\n        font-size: 12px;\n        margin-bottom: 10px;\n        display: none;\n    }\n\n    .security-notice.show {\n        display: block;\n    }\n\n    @media (max-width: 1024px) {\n        .main-content {\n            flex-direction: column;\n            gap: 15px;\n            height: auto;\n        }\n\n        .input-section, .output-section {\n            min-height: 450px !important;\n            width: 100%;\n            max-width: 700px;\n        }\n\n        .textarea-container {\n            height: calc(100% - 42px);\n        }\n\n        .format-btn-container {\n            margin: 15px 0;\n            flex: 0 0 50px;\n        }\n\n        .copy-btn-container {\n            position: relative;\n            margin: 70px auto 0;\n            text-align: center;\n        }\n    }\n\n    @media (max-width: 768px) {\n        .input-section, .output-section {\n            min-height: 312px !important;\n        }\n\n        .textarea-container {\n            height: calc(100% - 42px);\n        }\n    }\n<\/style>\n\n<div class=\"html-viewer-app\">\n    <div class=\"security-notice\" id=\"securityNotice\">\n        \u26a0\ufe0f Some potentially unsafe content was removed for security reasons.\n    <\/div>\n    <div class=\"main-content\">\n        <div class=\"input-section\">\n            <div class=\"section-header\">HTML<\/div>\n            <div class=\"textarea-container\">\n                <div class=\"line-numbers\" id=\"inputLineNumbers\">1<\/div>\n                <textarea class=\"code-textarea\" id=\"inputHTML\" placeholder=\"Paste or type your HTML code here...\" spellcheck=\"false\"><\/textarea>\n            <\/div>\n        <\/div>\n\n        <div class=\"format-btn-container\">\n            <div style=\"display: flex; flex-direction: column; gap: 10px;\">\n                <button class=\"format-btn\" id=\"runViewBtn\">Run\/View<\/button>\n                <button class=\"format-btn\" id=\"beautifyBtn\">Beautify HTML<\/button>\n                <button class=\"format-btn\" id=\"minifyBtn\">Minify HTML<\/button>\n                <button class=\"format-btn reset-btn\" id=\"resetBtn\">Reset<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"output-section\">\n            <div class=\"section-header\">Output<\/div>\n            <div class=\"output-container\">\n                <iframe class=\"output-iframe\" id=\"outputFrame\" sandbox=\"allow-same-origin\"><\/iframe>\n                <textarea class=\"output-code\" id=\"outputCode\" readonly style=\"display: none;\"><\/textarea>\n            <\/div>\n        <\/div>\n\n        <div class=\"copy-btn-container\">\n            <button class=\"copy-btn\" id=\"copyBtn\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect>\n                    <path d=\"M5 15H4a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path>\n                <\/svg>\n                Copy Code\n            <\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"success-message\" id=\"successMessage\">\n    Code copied to clipboard!\n<\/div>\n\n<script>\n    class HTMLSanitizer {\n        constructor() {\n            this.dangerousElements = [\n                'script', 'iframe', 'frame', 'frameset', 'object', 'embed', \n                'applet', 'form', 'input', 'button', 'select', 'textarea',\n                'base', 'meta', 'link', 'style'\n            ];\n            \n            this.riskyElements = [\n                'svg', 'math', 'image', 'use', 'foreignobject',\n                'animate', 'animatetransform', 'set'\n            ];\n            \n            this.dangerousAttributes = [\n                'onabort', 'onafterprint', 'onanimationend', 'onanimationiteration',\n                'onanimationstart', 'onbeforeprint', 'onbeforeunload', 'onblur',\n                'oncanplay', 'oncanplaythrough', 'onchange', 'onclick', 'oncontextmenu',\n                'oncopy', 'oncut', 'ondblclick', 'ondrag', 'ondragend', 'ondragenter',\n                'ondragleave', 'ondragover', 'ondragstart', 'ondrop', 'ondurationchange',\n                'onemptied', 'onended', 'onerror', 'onfocus', 'onfocusin', 'onfocusout',\n                'onhashchange', 'oninput', 'oninvalid', 'onkeydown', 'onkeypress',\n                'onkeyup', 'onload', 'onloadeddata', 'onloadedmetadata', 'onloadstart',\n                'onmessage', 'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove',\n                'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel', 'onoffline',\n                'ononline', 'onpagehide', 'onpageshow', 'onpaste', 'onpause', 'onplay',\n                'onplaying', 'onpopstate', 'onprogress', 'onratechange', 'onreset',\n                'onresize', 'onscroll', 'onsearch', 'onseeked', 'onseeking', 'onselect',\n                'onshow', 'onstalled', 'onstorage', 'onsubmit', 'onsuspend', 'ontimeupdate',\n                'ontoggle', 'ontouchcancel', 'ontouchend', 'ontouchmove', 'ontouchstart',\n                'ontransitionend', 'onunload', 'onvolumechange', 'onwaiting', 'onwheel',\n                'onbegin', 'onend', 'onrepeat',\n                'formaction', 'xlink:href', 'data'\n            ];\n            \n            this.uriAttributes = ['href', 'src', 'action', 'poster', 'background', 'cite', 'longdesc'];\n        }\n        \n        sanitize(html) {\n            let hadDangerousContent = false;\n            \n            const template = document.createElement('template');\n            template.innerHTML = html;\n            const doc = template.content;\n            \n            this.dangerousElements.forEach(tagName => {\n                const elements = doc.querySelectorAll(tagName);\n                if (elements.length > 0) hadDangerousContent = true;\n                elements.forEach(el => el.remove());\n            });\n            \n            this.riskyElements.forEach(tagName => {\n                const elements = doc.querySelectorAll(tagName);\n                if (elements.length > 0) hadDangerousContent = true;\n                elements.forEach(el => el.remove());\n            });\n            \n            const allElements = doc.querySelectorAll('*');\n            allElements.forEach(el => {\n                this.dangerousAttributes.forEach(attr => {\n                    if (el.hasAttribute(attr)) {\n                        hadDangerousContent = true;\n                        el.removeAttribute(attr);\n                    }\n                });\n                \n                Array.from(el.attributes).forEach(attr => {\n                    const name = attr.name.toLowerCase();\n                    if (name.startsWith('on')) {\n                        hadDangerousContent = true;\n                        el.removeAttribute(attr.name);\n                    }\n                });\n                \n                this.uriAttributes.forEach(attr => {\n                    if (el.hasAttribute(attr)) {\n                        const value = el.getAttribute(attr).trim().toLowerCase();\n                        if (value.startsWith('javascript:') || \n                            value.startsWith('vbscript:') || \n                            value.startsWith('data:') ||\n                            value.startsWith('blob:')) {\n                            hadDangerousContent = true;\n                            el.removeAttribute(attr);\n                        }\n                    }\n                });\n                \n                if (el.hasAttribute('style')) {\n                    const styleValue = el.getAttribute('style').toLowerCase();\n                    if (styleValue.includes('expression') || \n                        styleValue.includes('javascript') ||\n                        styleValue.includes('behavior') ||\n                        styleValue.includes('url(')) {\n                        hadDangerousContent = true;\n                        el.removeAttribute('style');\n                    }\n                }\n            });\n            \n            const div = document.createElement('div');\n            div.appendChild(doc.cloneNode(true));\n            \n            return {\n                html: div.innerHTML,\n                hadDangerousContent: hadDangerousContent\n            };\n        }\n    }\n\n    class HTMLViewer {\n        constructor() {\n            this.inputTextarea = document.getElementById('inputHTML');\n            this.outputFrame = document.getElementById('outputFrame');\n            this.outputCode = document.getElementById('outputCode');\n            this.runViewBtn = document.getElementById('runViewBtn');\n            this.beautifyBtn = document.getElementById('beautifyBtn');\n            this.minifyBtn = document.getElementById('minifyBtn');\n            this.copyBtn = document.getElementById('copyBtn');\n            this.resetBtn = document.getElementById('resetBtn');\n            this.successMessage = document.getElementById('successMessage');\n            this.securityNotice = document.getElementById('securityNotice');\n            this.inputLineNumbers = document.getElementById('inputLineNumbers');\n            this.currentOutput = '';\n            this.isCodeView = false;\n            this.sanitizer = new HTMLSanitizer();\n            this.init();\n        }\n\n        init() {\n            this.runViewBtn.addEventListener('click', () => this.runView());\n            this.beautifyBtn.addEventListener('click', () => this.beautifyHTML());\n            this.minifyBtn.addEventListener('click', () => this.minifyHTML());\n            this.copyBtn.addEventListener('click', () => this.copyToClipboard());\n            this.resetBtn.addEventListener('click', () => this.resetEditor());\n            this.inputTextarea.addEventListener('input', () => this.updateLineNumbers());\n            this.inputTextarea.addEventListener('scroll', () => this.syncScroll());\n        }\n\n        resetEditor() {\n            this.inputTextarea.value = '';\n            this.outputFrame.srcdoc = '';\n            this.outputCode.value = '';\n            this.currentOutput = '';\n            this.showIframe();\n            this.updateLineNumbers();\n            this.hideSecurityNotice();\n        }\n\n        showIframe() {\n            this.outputFrame.style.display = 'block';\n            this.outputCode.style.display = 'none';\n            this.isCodeView = false;\n        }\n\n        showCodeOutput() {\n            this.outputFrame.style.display = 'none';\n            this.outputCode.style.display = 'block';\n            this.isCodeView = true;\n        }\n\n        showSecurityNotice() {\n            this.securityNotice.classList.add('show');\n        }\n\n        hideSecurityNotice() {\n            this.securityNotice.classList.remove('show');\n        }\n\n        runView() {\n            const html = this.inputTextarea.value.trim();\n            if (!html) {\n                this.outputFrame.srcdoc = '';\n                this.currentOutput = '';\n                this.showIframe();\n                this.hideSecurityNotice();\n                return;\n            }\n\n            try {\n                const result = this.sanitizer.sanitize(html);\n                \n                if (result.hadDangerousContent) {\n                    this.showSecurityNotice();\n                } else {\n                    this.hideSecurityNotice();\n                }\n                \n                this.outputFrame.srcdoc = result.html;\n                this.currentOutput = html;\n                this.showIframe();\n\n            } catch (error) {\n                console.error('Error rendering HTML:', error);\n            }\n        }\n\n        beautifyHTML() {\n            const html = this.inputTextarea.value.trim();\n            if (!html) {\n                return;\n            }\n\n            try {\n                const beautified = this.beautifyHTMLCode(html);\n                this.outputCode.value = beautified;\n                this.currentOutput = beautified;\n                this.showCodeOutput();\n                this.hideSecurityNotice();\n            } catch (error) {\n                console.error('Error beautifying HTML:', error);\n            }\n        }\n\n        minifyHTML() {\n            const html = this.inputTextarea.value.trim();\n            if (!html) {\n                return;\n            }\n\n            try {\n                const minified = this.minifyHTMLCode(html);\n                this.outputCode.value = minified;\n                this.currentOutput = minified;\n                this.showCodeOutput();\n                this.hideSecurityNotice();\n            } catch (error) {\n                console.error('Error minifying HTML:', error);\n            }\n        }\n\n        beautifyHTMLCode(html) {\n            let formatted = '';\n            let indentLevel = 0;\n            const indent = '  ';\n            let i = 0;\n\n            html = html.replace(\/>\\s+<\/g, '><').trim();\n\n            while (i < html.length) {\n                if (html[i] === '<') {\n                    const tagEnd = html.indexOf('>', i);\n                    if (tagEnd === -1) break;\n\n                    const tag = html.substring(i, tagEnd + 1);\n                    const tagName = tag.match(\/<\\\/?([^\\s>]+)\/);\n                    \n                    if (tagName) {\n                        const name = tagName[1].toLowerCase();\n                        \n                        if (tag.startsWith('<\/')) {\n                            indentLevel--;\n                            formatted += indent.repeat(Math.max(0, indentLevel)) + tag + '\\n';\n                        }\n                        else if (tag.endsWith('\/>') || ['img', 'br', 'hr', 'input', 'meta', 'link'].includes(name)) {\n                            formatted += indent.repeat(indentLevel) + tag + '\\n';\n                        }\n                        else {\n                            formatted += indent.repeat(indentLevel) + tag + '\\n';\n                            indentLevel++;\n                        }\n                    }\n                    \n                    i = tagEnd + 1;\n                } else {\n                    let textEnd = html.indexOf('<', i);\n                    if (textEnd === -1) textEnd = html.length;\n                    \n                    const text = html.substring(i, textEnd).trim();\n                    if (text) {\n                        formatted += indent.repeat(indentLevel) + text + '\\n';\n                    }\n                    \n                    i = textEnd;\n                }\n            }\n\n            return formatted.trim();\n        }\n\n        minifyHTMLCode(html) {\n            html = html.replace(\/<!--[\\s\\S]*?-->\/g, '');\n            html = html.replace(\/>\\s+<\/g, '><');\n            html = html.replace(\/\\s+\/g, ' ');\n            html = html.trim();\n            \n            return html;\n        }\n\n        updateLineNumbers() {\n            const content = this.inputTextarea.value;\n            const lines = content.split('\\n').length || 1;\n            const lineNumbers = [];\n\n            for (let i = 1; i <= lines; i++) {\n                lineNumbers.push(i);\n            }\n\n            this.inputLineNumbers.innerHTML = lineNumbers.join('<br>');\n        }\n\n        syncScroll() {\n            this.inputLineNumbers.scrollTop = this.inputTextarea.scrollTop;\n        }\n\n        async copyToClipboard() {\n            const textToCopy = this.currentOutput || this.inputTextarea.value;\n            if (!textToCopy.trim()) return;\n\n            try {\n                await navigator.clipboard.writeText(textToCopy);\n                this.showSuccessMessage();\n            } catch (err) {\n                const tempTextarea = document.createElement('textarea');\n                tempTextarea.value = textToCopy;\n                document.body.appendChild(tempTextarea);\n                tempTextarea.select();\n                document.execCommand('copy');\n                document.body.removeChild(tempTextarea);\n                this.showSuccessMessage();\n            }\n        }\n\n        showSuccessMessage() {\n            this.successMessage.classList.add('show');\n            setTimeout(() => {\n                this.successMessage.classList.remove('show');\n            }, 3000);\n        }\n    }\n\n    document.addEventListener('DOMContentLoaded', () => {\n        new HTMLViewer();\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[21],"class_list":["post-8307650","post","type-post","status-publish","format-standard","hentry","category-tools","tag-html-css-tools"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML Online Viewer<\/title>\n<meta name=\"description\" content=\"For immediate tasks, nothing beats the simplicity of a web-based HTML viewer. These are websites that typically offer a split-screen view: you paste your code on one side and see a live, rendered preview appear on the other.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/tools\/html-viewer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Online Viewer\" \/>\n<meta property=\"og:description\" content=\"For immediate tasks, nothing beats the simplicity of a web-based HTML viewer. These are websites that typically offer a split-screen view: you paste your code on one side and see a live, rendered preview appear on the other.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/tools\/html-viewer\/\" \/>\n<meta property=\"og:site_name\" content=\"Tools\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-19T07:12:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-04T14:23:44+00:00\" \/>\n<meta name=\"author\" content=\"Asaf Rotstain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asaf Rotstain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/tools\/html-viewer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/tools\/html-viewer\/\"},\"author\":{\"name\":\"Asaf Rotstain\",\"@id\":\"https:\/\/elementor.com\/tools\/#\/schema\/person\/3adf9f4dd31a1103c8d131d0fa733ee7\"},\"headline\":\"HTML Online Viewer\",\"datePublished\":\"2025-06-19T07:12:50+00:00\",\"dateModified\":\"2025-08-04T14:23:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/tools\/html-viewer\/\"},\"wordCount\":5,\"keywords\":[\"Html-Css-tools\"],\"articleSection\":[\"tools\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/tools\/html-viewer\/\",\"url\":\"https:\/\/elementor.com\/tools\/html-viewer\/\",\"name\":\"HTML Online Viewer\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/tools\/#website\"},\"datePublished\":\"2025-06-19T07:12:50+00:00\",\"dateModified\":\"2025-08-04T14:23:44+00:00\",\"author\":{\"@id\":\"https:\/\/elementor.com\/tools\/#\/schema\/person\/3adf9f4dd31a1103c8d131d0fa733ee7\"},\"description\":\"For immediate tasks, nothing beats the simplicity of a web-based HTML viewer. These are websites that typically offer a split-screen view: you paste your code on one side and see a live, rendered preview appear on the other.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/tools\/html-viewer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/tools\/html-viewer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/tools\/html-viewer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/elementor.com\/tools\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Online Viewer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/tools\/#website\",\"url\":\"https:\/\/elementor.com\/tools\/\",\"name\":\"Tools\",\"description\":\"Just another Elementor hosted website ;)\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/tools\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/tools\/#\/schema\/person\/3adf9f4dd31a1103c8d131d0fa733ee7\",\"name\":\"Asaf Rotstain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g\",\"caption\":\"Asaf Rotstain\"},\"url\":\"https:\/\/elementor.com\/tools\/author\/asafr-211bae\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Online Viewer","description":"For immediate tasks, nothing beats the simplicity of a web-based HTML viewer. These are websites that typically offer a split-screen view: you paste your code on one side and see a live, rendered preview appear on the other.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/tools\/html-viewer\/","og_locale":"en_US","og_type":"article","og_title":"HTML Online Viewer","og_description":"For immediate tasks, nothing beats the simplicity of a web-based HTML viewer. These are websites that typically offer a split-screen view: you paste your code on one side and see a live, rendered preview appear on the other.","og_url":"https:\/\/elementor.com\/tools\/html-viewer\/","og_site_name":"Tools","article_published_time":"2025-06-19T07:12:50+00:00","article_modified_time":"2025-08-04T14:23:44+00:00","author":"Asaf Rotstain","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Asaf Rotstain","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/tools\/html-viewer\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/tools\/html-viewer\/"},"author":{"name":"Asaf Rotstain","@id":"https:\/\/elementor.com\/tools\/#\/schema\/person\/3adf9f4dd31a1103c8d131d0fa733ee7"},"headline":"HTML Online Viewer","datePublished":"2025-06-19T07:12:50+00:00","dateModified":"2025-08-04T14:23:44+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/tools\/html-viewer\/"},"wordCount":5,"keywords":["Html-Css-tools"],"articleSection":["tools"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/tools\/html-viewer\/","url":"https:\/\/elementor.com\/tools\/html-viewer\/","name":"HTML Online Viewer","isPartOf":{"@id":"https:\/\/elementor.com\/tools\/#website"},"datePublished":"2025-06-19T07:12:50+00:00","dateModified":"2025-08-04T14:23:44+00:00","author":{"@id":"https:\/\/elementor.com\/tools\/#\/schema\/person\/3adf9f4dd31a1103c8d131d0fa733ee7"},"description":"For immediate tasks, nothing beats the simplicity of a web-based HTML viewer. These are websites that typically offer a split-screen view: you paste your code on one side and see a live, rendered preview appear on the other.","breadcrumb":{"@id":"https:\/\/elementor.com\/tools\/html-viewer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/tools\/html-viewer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/tools\/html-viewer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elementor.com\/tools\/"},{"@type":"ListItem","position":2,"name":"HTML Online Viewer"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/tools\/#website","url":"https:\/\/elementor.com\/tools\/","name":"Tools","description":"Just another Elementor hosted website ;)","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/tools\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/elementor.com\/tools\/#\/schema\/person\/3adf9f4dd31a1103c8d131d0fa733ee7","name":"Asaf Rotstain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b100acf76c133e3557847510ec2e00c3dd2957cdea2fac992f98838660513c6b?s=96&d=mm&r=g","caption":"Asaf Rotstain"},"url":"https:\/\/elementor.com\/tools\/author\/asafr-211bae\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts\/8307650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/comments?post=8307650"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts\/8307650\/revisions"}],"predecessor-version":[{"id":8309816,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/posts\/8307650\/revisions\/8309816"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/media?parent=8307650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/categories?post=8307650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/tools\/wp-json\/wp\/v2\/tags?post=8307650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}