Online HTML Viewer

write · paste · preview live

HTML input

<div class="pane-label"><span><span class="dot"></span>Live preview</span></div>
    <div class="preview-frame-wrap">
      <iframe id="preview" title="HTML preview" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe>
    </div>
  </section>
</div>

<div class="statusbar">
  <span><span class="prompt">></span> <span id="stat-lines">0</span> lines</span>
  <span class="sep">·</span>
  <span><span id="stat-bytes">0</span> bytes</span>
  <span class="sep">·</span>
  <span><span id="stat-elements">0</span> elements</span>
  <span class="sep">·</span>
  <span>rendered <span id="stat-time">just now</span></span>
</div>

let renderTimer = null;

function render(){
    preview.srcdoc = input.value;
    updateStats();
    statTime.textContent = 'just now';
  }

function scheduleRender(){
    clearTimeout(renderTimer);
    renderTimer = setTimeout(render, 250);
  }

function updateStats(){
    const text = input.value;
    const lines = text.length ? text.split('\n').length : 0;
    const bytes = new Blob([text]).size;
    statLines.textContent = lines;
    statBytes.textContent = bytes;

// Count elements by parsing into a detached document
    try{
      const doc = new DOMParser().parseFromString(text, 'text/html');
      statElements.textContent = doc.body ? doc.body.querySelectorAll('*').length : 0;
    }catch(e){
      statElements.textContent = '0';
    }
  }

input.addEventListener('input', scheduleRender);

deviceSelect.addEventListener('change', (e) => {
    previewPane.dataset.device = e.target.value;
  });

document.getElementById('sample-btn').addEventListener('click', () => {
    input.value = SAMPLE;
    render();
  });

document.getElementById('clear-btn').addEventListener('click', () => {
    input.value = '';
    render();
    input.focus();
  });

document.getElementById('download-btn').addEventListener('click', () => {
    const blob = new Blob([input.value], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'page.html';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });

function enterFullscreenPreview(){
    document.body.classList.add('preview-fullscreen');
  }
  function exitFullscreenPreview(){
    document.body.classList.remove('preview-fullscreen');
  }

document.getElementById('fullscreen-btn').addEventListener('click', enterFullscreenPreview);
  document.getElementById('exit-fullscreen-btn').addEventListener('click', exitFullscreenPreview);

document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && document.body.classList.contains('preview-fullscreen')){
      exitFullscreenPreview();
    }
  });

// Tab key inserts spaces instead of moving focus
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Tab'){
      e.preventDefault();
      const start = input.selectionStart;
      const end = input.selectionEnd;
      input.value = input.value.substring(0, start) + '  ' + input.value.substring(end);
      input.selectionStart = input.selectionEnd = start + 2;
      scheduleRender();
    }
  });

// Initial render
  input.value = SAMPLE;
  render();
</script>

</body>
</html>
</div>

<footer class="wp-block-template-part">
<div class="wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<div class="wp-block-group is-layout-flow wp-container-core-group-is-layout-ff1e87f5 wp-block-group-is-layout-flow">
<ul class="wp-block-social-links has-normal-icon-size has-icon-color is-style-logos-only is-content-justification-center is-layout-flex wp-container-core-social-links-is-layout-5b632aa0 wp-block-social-links-is-layout-flex"><li style="color:#0B0620" class="wp-social-link wp-social-link-instagram has-foreground-color wp-block-social-link"><a href="https://www.instagram.com/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Instagram</span></a></li>

<li style="color:#0B0620" class="wp-social-link wp-social-link-facebook has-foreground-color wp-block-social-link"><a href="https://www.facebook.com/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a></li>

<p style="font-style:normal;font-weight:400" class="has-text-align-center wp-block-site-title has-medium-font-size"><a href="https://accordcontent.com" target="_self" rel="home">Accord Content</a></p>

<p class="wp-block-paragraph"></p>
</div>
</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/extendable/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-primary-foreground"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.027450980392157 0.043137254901961" /><feFuncG type="table" tableValues="0.058823529411765 0.015686274509804" /><feFuncB type="table" tableValues="0.47450980392157 0.28627450980392" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><script>
/* Add a shrink class on scroll for block-theme headers (Extendable) */
(function(){
  var candidates = [
    '.wp-site-blocks > header',
    'header.wp-block-template-part',
    '.wp-block-template-part[area="header"]',
    'header[role="banner"]'
  ];
  var header;
  for(var i=0;i<candidates.length;i++){
    header = document.querySelector(candidates[i]);
    if(header) break;
  }
  if(!header) return;