Link

Simple HTML Viewer

HTML Input

<label class="panel-label">Live Preview</label>
      <div id="html-output" class="output-box"></div>
    </div>
  </div>
</div>

<style>
  /* Wrapper and general scoping to prevent WordPress theme conflicts */
  .html-viewer-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    box-sizing: border-box;
  }

.html-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

.html-viewer-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
  }

.html-btn {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
  }

.html-btn:hover {
    background: #005177;
  }

/* Responsive Grid setup */
  .html-viewer-container {
    display: flex;
    flex-direction: column; /* Mobile first: stacked */
    gap: 15px;
  }

@media (min-width: 768px) {
    .html-viewer-container {
      flex-direction: row; /* Desktop side-by-side */
    }
  }

.html-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

.panel-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

#html-input, .output-box {
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px;
    box-sizing: border-box;
  }

/* Editor styling */
  #html-input {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    background: #2d2d2d;
    color: #f8f8f2;
    resize: vertical;
    outline: none;
  }
  
  #html-input:focus {
    border-color: #0073aa;
  }

/* Output styling */
  .output-box {
    background: #fff;
    overflow-y: auto;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const htmlInput = document.getElementById('html-input');
    const htmlOutput = document.getElementById('html-output');
    const clearBtn = document.getElementById('clear-btn');

// Function to render HTML securely-ish (basic rendering)
    function renderHTML() {
      // Taking the raw input and injecting it into the output div. 
      // Note: If you are making this public, be cautious of JS execution via <script> tags.
      htmlOutput.innerHTML = htmlInput.value;
    }

// Auto-update as the user types
    htmlInput.addEventListener('input', renderHTML);

// Clear button functionality
    clearBtn.addEventListener('click', function() {
      htmlInput.value = '';
      renderHTML();
      htmlInput.focus();
    });

// Initial render for placeholder content
    // Check if empty, if so, render the placeholder text as a demo
    if(!htmlInput.value) {
       htmlOutput.innerHTML = "<h1>Hello, World!</h1><p>This is a mobile-friendly HTML viewer.</p>";
    } else {
       renderHTML();
    }
  });
</script>

</div>
</article>

</main>

</div>
	</div>
	<footer class="site-footer" id="site-footer" next-page-hide>
	<div class="hfg_footer">
			</div>
</footer>

</div>

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/stax/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
		<script>
			/(trident|msie)/i.test(navigator.userAgent) && document.getElementById && window.addEventListener &&
			window.addEventListener('hashchange', function() {
				var t, e = location.hash.substring(1);
				/^[A-z0-9_-]+$/.test(e) && (t = document.getElementById(e)) &&
				(/^(?:a|select|input|button|textarea)$/i.test(t.tagName) || (t.tabIndex = -1), t.focus());
			}, !1);
		</script>
		<script id="lazy-load-images-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/lazyload.min.js?ver=1.2.1"></script>
<script id="lazy-load-images-js-after">
if (window.Element && !Element.prototype.closest) {
				    Element.prototype.closest =
				    function(s) {
				        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
				            i,
				            el = this;
				        do {
				            i = matches.length;
				            while (--i >= 0 && matches.item(i) !== el) {};
				        } while ((i < 0) && (el = el.parentElement));
				        return el;
				    };
				} function staxTriggerLazy() {let loadImage = new LazyLoad({elements_selector: ".lazy",class_loading: "lazy-is-loading",class_loaded: "lazy-is-loaded",callback_enter: function(el) {el.setAttribute("style", "");var parentEl = el.closest(".placeholder-el");if(parentEl !== null) { el.closest(".placeholder-el").classList.add("el-loaded"); }}});}window.addEventListener("DOMContentLoaded", staxTriggerLazy);window.addEventListener("loadLazy", staxTriggerLazy);
//# sourceURL=lazy-load-images-js-after
</script>
<script id="modernizr-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/modernizr-custom.min.js?ver=1.2.1"></script>
<script id="css-vars-ponyfill-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/css-vars/css-vars-ponyfill.min.js?ver=1.2.1"></script>
<script id="css-vars-ponyfill-js-after">
jQuery(document).ready(function($) {cssVars();});
//# sourceURL=css-vars-ponyfill-js-after
</script>
<script id="objectfit-pollyfill-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/object-fit/objectFitPolyfill.basic.min.js?ver=1.2.1"></script>
<script id="objectfit-pollyfill-js-after">
jQuery(document).ready(function($) { objectFitPolyfill(); });
//# sourceURL=objectfit-pollyfill-js-after
</script>
<script id="intersection-polyfill-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/intersection-observer.min.js?ver=1.2.1"></script>
<script id="stax-hfg-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/hfg/app.js?ver=1.2.1"></script>
<script id="stax-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/index.min.js?ver=1.2.1"></script>
<script id="hc-sticky-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/hc-sticky/hc-sticky-all.min.js?ver=1.2.1"></script>
<script id="lightbox-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/lightbox/lightbox.min.js?ver=1.2.1"></script>
<script id="plyr-polyfill-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/plyr/plyr.polyfilled.min.js?ver=1.2.1"></script>
<script id="plyr-init-js" src="https://adsetters.com/wp-content/themes/stax/assets/js/plyr-init.min.js?ver=1.2.1"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://adsetters.com/wp-includes/js/wp-emoji-release.min.js?ver=7.1"}}
</script>
<script type="module">
/*! This file is auto-generated */
var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))});
//# sourceURL=https://adsetters.com/wp-includes/js/wp-emoji-loader.min.js
</script>

</body>
</html>